拘神遣将--最详全的JavaScript数组方法总结

前言

本文试图地将JS中包含的全部的数组方法尽数列举，介绍它们每一个的定义、用法，并附带一些实例甚至应用场景。因此篇幅不会很短，但绝不冗长。

内容覆盖ES5和ES6中的31种数组方法 ，介绍顺序先ES5后ES6，对于相似方法会进行类比，但不会连带。

为求准确，所有方法的描述文案均引自一些JS领域的权威，本文中引用的文案如下：

ES5部分来自  《MDN（Mozilla Developer Network 》

ES6部分来自 《ECMAScript 6 入门》（作者是阮一峰）

开始之前，劣者先将本文谈到的方法按讲解次序阵列下方，供读者参考：

ES5：
join、push、pop、shift、unshift、sort、reverse、concat、
slice、splice、indexOf、lastIndexOf、forEach、map、filter、
every、some、reduce、reduceRight

ES6：
form、of、copyWithin、find、findIndex、fill、entries、
keys、values、includes、flat、flatMap

---

正文

正文内容所含的数组方法，排名不分先后，均按照劣者使用多寡所排列。

对于某几个应用场景比较广泛的方法，劣者会将其用*标注，对于难以掌握的劣者会详细书写。

1、join(): 将一个数组（或一个类数组对象）的所有元素连接成一个字符串并返回这个字符串。如果数组只有一个项目，那么将返回该项目而不使用分隔符。

非常简短，不多赘述，看一眼下面的代码，便能学会使用它。该方法不会改变原数组。

let arr = ['维', '天', '有', '汉']

arr.join('-')
// 维-天-有-汉

arr.join()
// 维,天,有,汉

2、*push(): 方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度。

既常见又简单。

let arr = ['秦', '汉', '唐', '宋']

console.log(arr.push('明'))
// 5

console.log(arr)
// ['秦', '汉', '唐', '宋', '明']

3、pop(): 方法从数组中删除最后一个元素，并返回该元素的值。此方法更改数组的长度。

let arr = ["Tony", "Banner", "Thor"];

let item = arr.pop();

console.log(item); // Thor

console.log(arr); // ["Tony", "Banner"]

4、shift(): 方法从数组中删除第一个元素，并返回该元素的值。此方法更改数组的长度。

let arr = ["Tony", "Banner", "Thor"];

let item = arr.shift();

console.log(item); // Tony

console.log(arr); // [ "Banner", "Thor"]

5、unshift(): 方法将一个或多个元素添加到数组的开头，并返回该数组的新长度(该方法修改原有数组)。

var arr = ["Tony", "Banner", "Thor"];

var count = arr.unshift("Steve");

console.log(count); // 4

console.log(arr); //["Steve", "Tony", "Banner", "Thor"]

6、sort()：方法用原地算法对数组的元素进行排序，并返回数组。排序算法现在是稳定的。默认排序顺序是根据字符串Unicode码点。

该方法会改变原数组。

下面的代码，是对String和Number两种数据类型的举例：

var arr1 = ["a", "d", "c", "b"];

console.log(arr1.sort()); // ["a", "b", "c", "d"]

arr2 = [13, 24, 51, 3];

console.log(arr2.sort()); // [13, 24, 3, 51]

console.log(arr2); // [13, 24, 3, 51](原数组被改变)

可以看到，上面代码中的arr2数组在调用sort()后未能得到期望的结果，这是因为在排序时，sort()方法会调用每个数组项的 toString()转型方法，然后比较得到的字符串，以确定如何排序。即使数组中的每一项都是数值， sort()方法比较的也是字符串。

当然，这个问题是完全可以规避的。

sort()方法可以接收一个比较函数作为参数，以便我们指定哪个值位于哪个值的前面。比较函数接收两个参数，如果第一个参数应该位于第二个之前则返回一个负数，如果两个参数相等则返回 0，如果第一个参数应该位于第二个之后则返回一个正数。以下就是一个简单的比较函数：

function compare(value1, value2) {

    if (value1 < value2) {

        return -1;

    } else if (value1 > value2) {

        return 1;

    } else {

        return 0;

    }

}

arr2 = [13, 24, 51, 3];

console.log(arr2.sort(compare)); // [3, 13, 24, 51]

7、reverse()：方法将数组中元素的位置颠倒,并返回该数组。该方法会改变原数组。

let arr = [13, 24, 51, 3];

console.log(arr.reverse()); //[3, 51, 24, 13]

console.log(arr); //[3, 51, 24, 13](原数组改变)

8、concat()：方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。

let arr = [1,3,5,7];

let arrCopy = arr.concat(9,[11,13]);

console.log(arrCopy); //[1, 3, 5, 7, 9, 11, 13]

console.log(arr); // [1, 3, 5, 7](原数组未被修改)

从上面测试结果可以发现：传入的不是数组，则直接把参数添加到数组后面，如果传入的是数组，则将数组中的各个项添加到数组中。但是如果传入的是一个二维数组呢？   

let arrCopy2 = arr.concat([9,[11,13]]);

console.log(arrCopy2); //[1, 3, 5, 7, 9, Array[2]]

console.log(arrCopy2[5]); //[11, 13]

上面的代码中，arrCopy2数组的第五项是一个包含两项的数组，也就是说concat方法只能将传入数组中的每一项添加到数组中，如果传入数组中有些项是数组，那么也会把这一数组项当作一项添加到arrCopy2中。

9、slice()：方法返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝（包括 begin，不包括end）。原始数组不会被改变。

该方法的两个参数遵循[begin, end)模式，下面是一些例子：

let arr = [1,3,5,7,9,11];


let arrCopy = arr.slice(1);
//[3, 5, 7, 9, 11]

let arrCopy2 = arr.slice(1,4);
//[3, 5, 7]

let arrCopy3 = arr.slice(1,-2);
//[3, 5, 7]

let arrCopy4 = arr.slice(-4,-1);
//[5, 7, 9]

console.log(arr); 
//[1, 3, 5, 7, 9, 11](原数组没变)

arrCopy只设置了一个参数，也就是起始下标为1，所以返回的数组为下标1（包括下标1）开始到数组最后。
arrCopy2设置了两个参数，返回起始下标（包括1）开始到终止下标（不包括4）的子数组。
arrCopy3设置了两个参数，终止下标为负数，当出现负数时，将负数加上数组长度的值（6）来替换该位置的数，因此就是从1开始到4（不包括）的子数组。
arrCopy4中两个参数都是负数，所以都加上数组长度6转换成正数，因此相当于slice(2,5)。

10、splice()：方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。

splice()：很强大的数组方法，它有很多种用法，可以实现删除、插入和替换。

删除：可以删除任意数量的项，只需指定 2 个参数：要删除的第一项的位置和要删除的项数。例如， splice(0,2)会删除数组中的前两项。

插入：可以向指定位置插入任意数量的项，只需提供 3 个参数：起始位置、 0（要删除的项数）和要插入的项。例如，splice(2,0,4,6)会从当前数组的位置 2 开始插入4和6。
替换：可以向指定位置插入任意数量的项，且同时删除任意数量的项，只需指定 3 个参数：起始位置、要删除的项数和要插入的任意数量的项。插入的项数不必与删除的项数相等。例如，splice (2,1,4,6)会删除当前数组位置 2 的项，然后再从位置 2 开始插入4和6。

splice()方法始终都会返回一个数组，该数组中包含从原始数组中删除的项，如果没有删除任何项，则返回一个空数组。
 

var arr = [1,3,5,7,9,11];

var arrRemoved = arr.splice(0,2);

console.log(arr); //[5, 7, 9, 11]

console.log(arrRemoved); //[1, 3]

var arrRemoved2 = arr.splice(2,0,4,6);

console.log(arr); // [5, 7, 4, 6, 9, 11]

console.log(arrRemoved2); // []

var arrRemoved3 = arr.splice(1,1,2,4);

console.log(arr); // [5, 2, 4, 4, 6, 9, 11]

console.log(arrRemoved3); //[7]

11、*indexOf()：方法返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1

let arr = [1,3,5,7,7,5,3,1];

console.log(arr.indexOf(5)); //2

console.log(arr.indexOf(5,2)); //2

console.log(arr.indexOf("5")); //-1

12、lastIndexOf()：方法返回指定值在调用该方法的字符串中最后出现的位置，如果没找到则返回 -1。从该字符串的后面向前查找，从 fromIndex 处开始

var arr = [1,3,5,7,7,5,3,1];

console.log(arr.lastIndexOf(5)); //5

console.log(arr.lastIndexOf(5,4)); //2

13、*forEach()：方法对数组的每个元素执行一次提供的函数

let arr = [1, 2, 3, 4, 5];

arr.forEach((x, index, a) => {

console.log(x + '|' + index + '|' + (a === arr));

});

// 输出为：

// 1|0|true

// 2|1|true

// 3|2|true

// 4|3|true

// 5|4|true

14、*map()：方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。

简单又实用的数组方法。

let arr = [1, 2, 3, 4, 5];

let arr2 = arr.map((item) => {

return item*item;

});

console.log(arr2); //[1, 4, 9, 16, 25]

15、filter()：方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。

该方法的作用就像它的名字一样，会将数组中不合条件的项过滤掉。

下面的代码，用filter()完成了数组去重：

let arr = [1, 2, 3, 3, 5, 6, 8, 8, 9, 10];

let arr2 = arr.filter((x, index) => {

  return arr[index] !== arr[index + 1]
  
});

console.log(arr2); 
//[1, 3, 5, 6, 8, 9, 10]

除了filter()，数组去重还有很多种方法，此处暂且不表。

16、every()：方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。

返回的是一个布尔值。

let arr = [1, 2, 3, 4, 5];

let arr2 = arr.every(function(x) {

return x < 10;

});

console.log(arr2); //true

let arr3 = arr.every(function(x) {

return x < 3;

});

console.log(arr3); // false

17、some()：方法测试是否至少有一个元素可以通过被提供的函数方法。该方法返回一个Boolean类型的值。

返回的是一个布尔值，注意与every()类比。

let arr = [1, 2, 3, 4, 5];

let arr2 = arr.some(function(x) {

return x < 3;

});

console.log(arr2); //true

let arr3 = arr.some(function(x) {

return x < 1;

});

console.log(arr3); // false

18、reduce()：方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值。

传给 reduce()和 reduceRight()的函数接收 4 个参数：

前一个值、当前值、项的索引和数组对象。

这个函数返回的任何值都会作为第一个参数自动传给下一项。第一次迭代发生在数组的第二项上，因此第一个参数是数组的第一项，第二个参数就是数组的第二项。

let values = [1,2,3,4,5];

let sum = values.reduceRight((prev, cur, index, array) => {

return prev + cur;

},10);

console.log(sum); //25

19、reduceRight()：方法接受一个函数作为累加器（accumulator）和数组的每个值（从右到左）将其减少为单个值。

let values = [1,2,3,4,5];

let sum = values.reduceRight((prev, cur, index, array) => {

return prev + cur;

},10);

console.log(sum); //25

20、*Array.from()：方法用于将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象（包括 ES6 新增的数据结构 Set 和 Map）

首先看第一类：类似数组的对象，代码如下：

let arrayLike = {
    '0': 'tony',
    '1': 'banner',
    '2': 'thor',
    length: 3
};

// 在ES6中使用from()方法

let arr = Array.from(arrayLike); // ['tony', 'banner', 'thor']

所谓类似数组的对象，本质特征只有一点，即必须有length属性。因此，任何有length属性的对象，都可以通过Array.from方法转为数组。

然后是第二类：可遍历（iterable）的对象，下面代码举例：

Array.from('Ming')
// ['M', 'i', 'n', 'g']

let mySet = new Set(['han', 'tang'])
Array.from(mySet) 
// ['han', 'tang']

所有装配了Iterable接口的数据结构，from()都会忠实地将其转换为数组。如果参数是一个真正的数组，Array.from会返回一个一模一样的新数组。

该方法也拥有第二个参数，作用类似与map()，可以将转成的数组中的每一项，都做一个处理，下面看一个实例：

Array.from(arrayLike, x => x * x);
// 等同于
Array.from(arrayLike).map(x => x * x);

Array.from([1, 2, 3], (x) => x * x)
// [1, 4, 9]

Array.from()可以将各种值转为真正的数组，并且还提供map功能。这实际上意味着，只要有一个原始的数据结构，你就可以先对它的值进行处理，然后转成规范的数组结构，进而就可以使用数量众多的数组方法。

 let dynastyObj = {
    '0' : 'HAN',
    '1' : 'TANG',
    '2' : 'SONG',
    '3' : 'MING',
    length: 4
  }
  let dynastyArr = Array.from(dynastyObj, x => x += 'dynasty')

  // ["HANdynasty", "TANGdynasty", "SONGdynasty", "MINGdynasty"]

21、*Array.of()：方法用于将一组值，转换为数组。

Array.of基本上可以用来替代Array()或new Array()，并且不存在由于参数不同而导致的重载。它的行为非常统一。

Array.of() // []
Array.of(undefined) // [undefined]
Array.of(1) // [1]
Array.of(1, 2) // [1, 2]

Array.of总是返回参数值组成的数组。如果没有参数，就返回一个空数组。

Array.of方法可以用下面的代码模拟实现。

function ArrayOf(){
  return [].slice.call(arguments);

22、copyWithin()：方法，在当前数组内部，将指定位置的成员复制到其他位置（会覆盖原有成员），然后返回当前数组。也就是说，使用这个方法，会修改当前数组。

数组实例的copyWithin()方法，在当前数组内部，将指定位置的成员复制到其他位置（会覆盖原有成员），然后返回当前数组。也就是说，使用这个方法，会修改当前数组。

Array.prototype.copyWithin(target, start = 0, end = this.length)

它接受三个参数。

• target（必需）：从该位置开始替换数据。如果为负值，表示倒数。
• start（可选）：从该位置开始读取数据，默认为 0。如果为负值，表示从末尾开始计算。
• end（可选）：到该位置前停止读取数据，默认等于数组长度。如果为负值，表示从末尾开始计算。

这三个参数都应该是数值，如果不是，会自动转为数值。

[1, 2, 3, 4, 5].copyWithin(0, 3)
// [4, 5, 3, 4, 5]

上面代码表示将从 3 号位直到数组结束的成员（4 和 5），复制到从 0 号位开始的位置，结果覆盖了原来的 1 和 2。

下面是更多例子。

// 将3号位复制到0号位
[1, 2, 3, 4, 5].copyWithin(0, 3, 4)
// [4, 2, 3, 4, 5]

// -2相当于3号位，-1相当于4号位
[1, 2, 3, 4, 5].copyWithin(0, -2, -1)
// [4, 2, 3, 4, 5]

// 将3号位复制到0号位
[].copyWithin.call({length: 5, 3: 1}, 0, 3)
// {0: 1, 3: 1, length: 5}

// 将2号位到数组结束，复制到0号位
let i32a = new Int32Array([1, 2, 3, 4, 5]);
i32a.copyWithin(0, 2);
// Int32Array [3, 4, 5, 4, 5]

// 对于没有部署 TypedArray 的 copyWithin 方法的平台
// 需要采用下面的写法
[].copyWithin.call(new Int32Array([1, 2, 3, 4, 5]), 0, 3, 4);
// Int32Array [4, 2, 3, 4, 5]

23、find()：方法，用于找出第一个符合条件的数组成员。它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined。

find()的参数是一个回调函数，它只会返回一个值。

[1, 4, -5, 10].find((n) => n < 0)
// -5

上面代码找出数组中第一个小于 0 的成员。

[1, 5, 10, 15].find(function(value, index, arr) {
  return value > 9;
}) // 10

上面代码中，find方法的回调函数可以接受三个参数，依次为当前的值、当前的位置和原数组。

24、findIndex()：数组实例的findIndex方法的用法与find方法非常类似，返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。

数组实例的findIndex方法的用法与find方法非常类似，返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。

[1, 5, 10, 15].findIndex(function(value, index, arr) {
  return value > 9;
}) // 2

这两个方法都可以接受第二个参数，用来绑定回调函数的this对象。

function f(v){
  return v > this.age;
}
let person = {name: 'John', age: 20};
[10, 12, 26, 15].find(f, person);    // 26

上面的代码中，find函数接收了第二个参数person对象，回调函数中的this对象指向person对象。

另外，这两个方法都可以发现NaN，弥补了数组的indexOf方法的不足。

[NaN].indexOf(NaN)
// -1

[NaN].findIndex(y => Object.is(NaN, y))
// 0

上面代码中，indexOf方法无法识别数组的NaN成员，但是findIndex方法可以借助Object.is方法做到。

25、fill()：方法使用给定值，填充一个数组。

fill方法使用给定值，填充一个数组。

['a', 'b', 'c'].fill(7)
// [7, 7, 7]

new Array(3).fill(7)
// [7, 7, 7]

上面代码表明，fill方法用于空数组的初始化非常方便。数组中已有的元素，会被全部抹去。

fill方法还可以接受第二个和第三个参数，用于指定填充的起始位置和结束位置。

['a', 'b', 'c'].fill(7, 1, 2)
// ['a', 7, 'c']

上面代码表示，fill方法从 1 号位开始，向原数组填充 7，到 2 号位之前结束。

26、entries()：用于遍历数组。它们都返回一个遍历器对象，可以用for...of循环进行遍历，entries()是对键值对的遍历。

for (let index of ['a', 'b'].keys()) {
  console.log(index);
}
// 0
// 1

27、keys()：用于遍历数组。它们都返回一个遍历器对象，可以用for...of循环进行遍历，keys()是对键名的遍历。

for (let elem of ['a', 'b'].values()) {
  console.log(elem);
}
// 'a'
// 'b'

28、values()：用于遍历数组。它们都返回一个遍历器对象，可以用for...of循环进行遍历，values()是对键值的遍历

for (let [index, elem] of ['a', 'b'].entries()) {
  console.log(index, elem);
}
// 0 "a"
// 1 "b"

29、includes()：方法返回一个布尔值，表示某个数组是否包含给定的值，与字符串的includes方法类似。

Array.prototype.includes方法返回一个布尔值，表示某个数组是否包含给定的值，与字符串的includes方法类似。ES2016 引入了该方法。

[1, 2, 3].includes(2)     // true
[1, 2, 3].includes(4)     // false
[1, 2, NaN].includes(NaN) // true

该方法的第二个参数表示搜索的起始位置，默认为0。如果第二个参数为负数，则表示倒数的位置，如果这时它大于数组长度（比如第二个参数为-4，但数组长度为3），则会重置为从0开始。

[1, 2, 3].includes(3, 3);  // false
[1, 2, 3].includes(3, -1); // true

没有该方法之前，我们通常使用数组的indexOf方法，检查是否包含某个值。

if (arr.indexOf(el) !== -1) {
  // ...
}

indexOf方法有两个缺点，一是不够语义化，它的含义是找到参数值的第一个出现位置，所以要去比较是否不等于-1，表达起来不够直观。二是，它内部使用严格相等运算符（===）进行判断，这会导致对NaN的误判。

[NaN].indexOf(NaN)
// -1

includes使用的是不一样的判断算法，就没有这个问题。

[NaN].includes(NaN)
// true

30、flat()：数组的成员有时还是数组，Array.prototype.flat()用于将嵌套的数组“拉平”，变成一维的数组。

该方法返回一个新数组，对原数据没有影响。

[1, 2, [3, 4]].flat()
// [1, 2, 3, 4]

上面代码中，原数组的成员里面有一个数组，flat()方法将子数组的成员取出来，添加在原来的位置。

flat()默认只会“拉平”一层，如果想要“拉平”多层的嵌套数组，可以将flat()方法的参数写成一个整数，表示想要拉平的层数，默认为1。

[1, 2, [3, [4, 5]]].flat()
// [1, 2, 3, [4, 5]]

[1, 2, [3, [4, 5]]].flat(2)
// [1, 2, 3, 4, 5]

上面代码中，flat()的参数为2，表示要“拉平”两层的嵌套数组。

如果不管有多少层嵌套，都要转成一维数组，可以用Infinity关键字作为参数。

[1, [2, [3]]].flat(Infinity)
// [1, 2, 3]

如果原数组有空位，flat()方法会跳过空位。

[1, 2, , 4, 5].flat()
// [1, 2, 4, 5]

31、flatMap()：方法对原数组的每个成员执行一个函数（相当于执行Array.prototype.map()），然后对返回值组成的数组执行flat()方法。该方法返回一个新数组，不改变原数组。

flatMap()只能展开一层数组。

// 相当于 [[[2]], [[4]], [[6]], [[8]]].flat()
[1, 2, 3, 4].flatMap(x => [[x * 2]])
// [[2], [4], [6], [8]]

上面代码中，遍历函数返回的是一个双层的数组，但是默认只能展开一层，因此flatMap()返回的还是一个嵌套数组。

flatMap()方法的参数是一个遍历函数，该函数可以接受三个参数，分别是当前数组成员、当前数组成员的位置（从零开始）、原数组。

arr.flatMap(function callback(currentValue[, index[, array]]) {
  // ...
}[, thisArg])

flatMap()方法还可以有第二个参数，用来绑定遍历函数里面的this。

---

后记

劣者有意将本文在后续不断完善，保证本文在未来随着自己经验的积累，能为读者们提供一些更独到也更实用的写法和使用技巧。