【Array】数组的方法

数组有很多的方法，初学者很难全部清晰地记住，按《JavaScript高级程序设计》一书中的分类方法，可以帮助我们高效的记忆。

一、迭代器方法

在ES6中，Array的原型上暴露了3个用于检索数组内容的方法：keys()、values()和entries()。keys()返回数组索引的迭代器，values()返回数组元素的迭代器，而entries()返回索引/值对的迭代器。

css 复制代码

const a = ["foo", "bar", "baz", "qux"];
// 因为这些方法都返回迭代器，所以可以将它们的内容通过Array.from()直接转换为数组实例
const aKeys = Array.from(a.keys());
const aValues = Array.from(a.values());
const aEntries = Array.from(a.entries());

console.log(aKeys);     // [0, 1, 2, 3]
console.log(aValues);  // ["foo", "bar", "baz", "qux"]
console.log(aEntries);  // [[0, "foo"], [1, "bar"], [2, "baz"], [3, "qux"]]

二、复制和填充方法

ES6新增了两个方法：批量复制方法copyWithin()，以及填充数组方法fill()。这两个方法的函数签名类似，都需要指定既有数组实例上的一个范围，包含开始索引，不包含结束索引。使用这个方法不会改变数组的大小。

1、fill(value, start？, end？)

**使用fill()方法可以向一个已有的数组中插入start位置开始end位置结束（不包括 end）相同的值value。

scss 复制代码

const zeroes = [0, 0, 0, 0, 0];  
zeroes.fill(5); // 用5 填充整个数组
console.log(zeroes);   // [5, 5, 5, 5, 5]

zeroes.fill(0);         // 重置

// 用6 填充索引大于等于3 的元素
zeroes.fill(6, 3); 
console.log(zeroes);   // [0, 0, 0, 6, 6]

// 用7 填充索引大于等于1 且小于3 的元素
zeroes.fill(7, 1, 3);
console.log(zeroes);   // [0, 7, 7, 0, 0];

用8 填充索引大于等于1 且小于4 的元素
// (-4 + zeroes.length = 1)
// (-1 + zeroes.length = 4)
zeroes.fill(8, -4, -1);
console.log(zeroes);   // [0, 8, 8, 8, 0]

1、copyWithin(target, start？, end?)

copyWithin() 会将数组中的start位置开始end位置结束（不包括 end）的元素，浅复制后插入到target指定索引开始的位置

scss 复制代码

let ints, reset = () => ints = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
reset();

// 从ints中复制索引0 开始的内容，插入到索引5 开始的位置
// 在源索引或目标索引到达数组边界时停止
ints.copyWithin(5);
console.log(ints);   // [0, 1, 2, 3, 4, 0, 1, 2, 3, 4]

reset();
// 从ints中复制索引5 开始的内容，插入到索引0 开始的位置
ints.copyWithin(0, 5); 
console.log(ints);   // [5, 6, 7, 8, 9, 5, 6, 7, 8, 9]

reset();
// 从ints中复制索引0 开始到索引3 结束的内容插入到索引4 开始的位置
ints.copyWithin(4, 0, 3);
alert(ints);   // [0, 1, 2, 3, 0, 1, 2, 7, 8, 9]

reset();
// JavaScript引擎在插值前会完整复制范围内的值，因此复制期间不存在重写的风险
ints.copyWithin(2, 0, 6);
alert(ints);   // [0, 1, 0, 1, 2, 3, 4, 5, 8, 9]

reset();
// 支持负索引值，与fill()相对于数组末尾计算正向索引的过程是一样的
ints.copyWithin(-4, -7, -3);
alert(ints);   // [0, 1, 2, 3, 4, 5, 3, 4, 5, 6]

三、转换方法

所有对象都有toLocaleString()、toString()和valueOf()方法。

scss 复制代码

let colors = ["red", "blue", "green"]; // 创建一个包含3 个字符串的数组alert(colors.toString());  // red,blue,green
alert(colors.valueOf());     // red,blue,green

//因为alert()期待字符串，所以会在后台调用数组的toString()方法，
alert(colors);                  // red,blue,green

四、栈方法

数组对象可以像栈一样，也就是一种限制插入和删除项的数据结构。栈是一种后进先出（LIFO, Last-In-First-Out）的结构。

1、push()

push()方法接收任意数量的参数，并将它们添加到数组末尾，返回数组的最新长度。

ini 复制代码

let colors = new Array();  // 创建一个数组
let count = colors.push("red", "green");   // 推入两项
alert(count);  // 2
ount = colors.push("black");   // 再推入一项
alert(count);                       // 3

2、pop()

pop()方法则用于删除数组的最后一项，同时减少数组的length值，返回被删除的项。

scss 复制代码

let item = colors.pop();         // 取得最后一项
alert(item);                        // black
alert(colors.length);             // 2

五、队列方法

队列以先进先出（FIFO, First-In-First-Out）形式限制访问。队列在列表末尾添加数据，但从列表开头获取数据,使用shift()和push()，可以把数组当成队列来使用.

1、push()

同上

2、shift()

shift()方法用于删除数组的第一项，同时减少数组的length值，返回被删除的项。

scss 复制代码

let colors = new Array(); // 创建一个数组
let count = colors.push("red", "green");   // 推入两项
alert(count);  // 2
count = colors.push("black"); // 再推入一项
alert(count);                     // 3
let item = colors.shift();   // 取得第一项
alert(item);                    // red
alert(colors.length);         // 2

3、unshift()

unshift()方法接收任意数量的参数，并将它们添加到数组开头，返回数组的最新长度。

通过使用unshift()和pop()，可以在相反方向上模拟队列，即在数组开头添加新数据，在数组末尾取得数据

scss 复制代码

let colors = new Array();                         // 创建一个数组
let count = colors.unshift("red", "green");   // 从数组开头推入两项
alert(count);      // 2
alert(colors);    // red,grenn
count = colors.unshift("black");   // 再推入一项
alert(count);       // 3
let item = colors.pop();   // 取得最后一项
alert(item);                  // green
alert(colors.length);      // 2

六、排序方法

组有两个方法可以用来对元素重新排序：reverse()和sort()。

1、reverse()

reverse()方法就是将数组元素反向排列。

ini 复制代码

let values = [1, 2, 3, 4, 5];
values.reverse();
alert(values);   // 5,4,3,2,1

2、sort(compareFn?)

sort()会按照升序重新排列数组元素，即最小的值在前面，最大的值在后面。

`compareFn(a, b)` 返回值	排序顺序
> 0	`a` 在 `b` 后，如 `[b, a]`
< 0	`a` 在 `b` 前，如 `[a, b]`
=== 0	保持 `a` 和 `b` 原来的顺序

javascript 复制代码

function compare(value1, value2) {
if (value1 < value2) {
    return -1;
} else if (value1 > value2) {
    return 1;
} else {
    return 0;
}}

let values = [0, 1, 5, 10, 15];
values.sort(compare);
alert(values);   // 0,1,5,10,

如果省略该函数，数组元素会被转换为字符串，然后根据每个字符的 Unicode 码位值进行排序。

ini 复制代码

let values = [0, 1, 5, 10, 15];
values.sort(compare);
alert(values);   // 0,1,5,10,

七、操作方法

1、concat()

concat()方法可以在现有数组全部元素基础上创建一个新数组。它首先会创建一个当前数组的副本，然后再把它的参数添加到副本末尾，最后返回这个新构建的数组。

如果传入一个或多个数组，则concat()会把这些数组的每一项都添加到结果数组。

vbscript 复制代码

let colors = ["red", "green", "blue"];
let colors2 = colors.concat("yellow", ["black", "brown"]);
let colors3 = colors.concat("yellow", ["black", ["brown","pink"]]);

console.log(colors);    // ["red", "green", "blue"]
console.log(colors2);   // ["red", "green", "blue", "yellow", "black", "brown"]
console.log(colors2);   // ["red", "green", "blue", "yellow", "black", "brown","pink"]

打平数组参数的行为可以重写，方法是在参数数组上指定一个特殊的符号：Symbol.isConcat-Spreadable。这个值设置为true可以强制打平类数组对象。

vbscript 复制代码

let colors = ["red", "green", "blue"];
let newColors = ["black", "brown"];
let moreNewColors = {
    [Symbol.isConcatSpreadable]: true, 
    length: 2,
    0: "pink",
    1: "cyan"
};
newColors[Symbol.isConcatSpreadable] = false;
// 强制不打平数组
let colors2 = colors.concat("yellow", newColors);
// 强制打平类数组对象
let colors3 = colors.concat(moreNewColors);
console.log(colors);    // ["red", "green", "blue"]
console.log(colors2);   // ["red", "green", "blue", "yellow", ["black", "brown"]]

console.log(colors3);   // ["red", "green", "blue", "pink", "cyan"

2、slice()

slice(start, end)用于创建一个包含原有数组中一个或多个元素的新数组。

ini 复制代码

let colors = ["red", "green", "blue", "yellow", "purple"];
let colors2 = colors.slice(1);
let colors3 = colors.slice(1, 4);
alert(colors2);   // green, blue, yellow, purple
alert(colors3);   // green, blue, yellow

3、splice(start, deleteCount, item1, item2)

splice()的主要目的是在数组中间插入元素。但有3种不同的方式使用这个方法，实现删除、插入、替换 的目的，返回被删除的元素组成的数组

scss 复制代码

let colors = ["red", "green", "blue"];

let removed = colors.splice(0,1);   // 删除第一项
alert(colors);    // green, blue
alert(removed);      // red，只有一个元素的数组

removed = colors.splice(1, 0, "yellow", "orange");    // 在位置1 插入两个元素
alert(colors);     // green, yellow, orange, blue
alert(removed);     // 空数组

removed = colors.splice(1, 1, "red", "purple");   // 插入两个值，删除一个元素
alert(colors);    // green,red,purple,orange,blue
alert(removed);  // yellow，只有一个元素的数组

还有一个toSpliced() 方法使用方式和spilced一样，只是不会改变原数组而是返回一个新数组，但是浏览器兼容性不够。

八、搜索和位置方法

1、严格相等

ECMAScript提供了3个严格相等的搜索方法：

indexOf(searchElement,fromIndex)
lastIndexOf(searchElement,fromIndex)
includes(searchElement,fromIndex)

indexOf()和includes()方法从数组前头（第一项）开始向后搜索，而lastIndexOf()从数组末尾（最后一项）开始向前搜索。

indexOf()和lastIndexOf()都返回要查找的元素在数组中的位置，如果没找到则返回-1。

includes()返回布尔值，表示是否至少找到一个与指定元素匹配的项。

scss 复制代码

let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
alert(numbers.indexOf(4));             // 3
alert(numbers.lastIndexOf(4));        // 5
alert(numbers.includes(4));           // true

alert(numbers.indexOf(4, 4));         // 5
alert(numbers.lastIndexOf(4, 4));    // 3
alert(numbers.includes(4, 7));        // false


let person = { name: "Nicholas" };
let people = [{ name: "Nicholas" }];
let morePeople = [person];

alert(people.indexOf(person));        // -1
alert(morePeople.indexOf(person));   // 0
alert(people.includes(person));      // false
alert(morePeople.includes(person)); // true

2、断言函数

find()和findIndex()方法使用了断言函数。这两个方法都从数组的最小索引开始。

find(callbackFn, thisArg?) 返回第一个匹配的元素
findIndex(callbackFn, thisArg?) 返回第一个匹配元素的索引。

thisArg:作为函数运行上下文的作用域对象（影响函数中this的值）

callbackFn函数接收3个参数：元素、索引和数组本身。callbackFn(element,index,array)

javascript 复制代码

const people = [ 
    {   
        name: "Matt",   
        age: 27  
    },  
    { 
        name: "Nicholas",
        age: 29  
    }
];

alert(people.find((element, index, array) => element.age < 28));  // {name: "Matt", age: 27}
alert(people.findIndex((element, index, array) => element.age < 28));  // 0

找到匹配后，永远不会检查数组的最后一个元素

c 复制代码

const evens = [2, 4, 6];
evens.find((element, index, array) => {
    console.log(element);
    console.log(index);
    console.log(array);
    return element === 4;
});
// 2
// 0
// [2, 4, 6]
// 4
// 1
// [2, 4, 6]

九、迭代方法

ECMAScript为数组定义了5个迭代方法。每个方法接收两个参数：以每一项为参数运行的函数，以及可选的作为函数运行上下文的作用域对象（影响函数中this的值）。传给每个方法的函数接收3个参数：数组元素、元素索引和数组本身。

1、every()

对数组每一项都运行传入的函数，如果对每一项函数都返回true，则这个方法返回true。

ini 复制代码

let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
let everyResult = numbers.every((item, index, array) => item > 2);
alert(everyResult);   // false

2、filter()

对数组每一项都运行传入的函数，函数返回true的项会组成数组之后返回。

ini 复制代码

let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
let filterResult = numbers.filter((item, index, array) => item > 2);
alert(filterResult);   // 3,4,5,4,

3、forEach()

对数组每一项都运行传入的函数，没有返回值。

javascript 复制代码

let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
numbers.forEach((item, index, array) => {
    // 执行某些操作
})

4、map()

对数组每一项都运行传入的函数，返回由每次函数调用的结果构成的数组。

ini 复制代码

let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
let mapResult = numbers.map((item, index, array) => item ＊ 2);
alert(mapResult);   // 2,4,6,8,10,8,6,4,

5、some()

对数组每一项都运行传入的函数，如果有一项函数返回true，则这个方法返回true

ini 复制代码

let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
let someResult = numbers.some((item, index, array) => item > 2);
alert(someResult);    // true

十、归并方法

ECMAScript为数组提供了两个归并方法：reduce()和reduceRight()

1、reduce(callbackFn, initialValue)

如果没有给这两个方法传入可选的第二个参数（作为归并起点值），则第一次迭代将从数组的第二项开始，因此传给归并函数的第一个参数是数组的第一项，第二个参数是数组的第二项。

scss 复制代码

let values = [1, 2, 3, 4, 5];
let sum = values.reduce((prev, cur, index, array) => {
    alert(cur)
    return prev + cur
});
alert(sum);   // 15
// 2
// 3
// 4
// 5
//15

scss 复制代码

let values = [1, 2, 3, 4, 5];
let sum = values.reduce((prev, cur, index, array) => {
    alert(cur)
    return prev + cur
}, 20);
alert(sum);   
// 1
// 2
// 3
// 4
//35

2、reduceRight()

reduceRight()方法与之类似，只是方向相反。

scss 复制代码

let values = [1, 2, 3, 4, 5];
let sum = values.reduceRight((prev, cur, index, array) => {
    alert(cur)
    return prev + cur
});
alert(sum)
// 4
// 3
// 2
// 1
//15