JS数组方法汇总 _(:ι」∠)_整理的我好累啊。。。

目录

注意：
目录可以点击跳转的（它不是蓝的，怕你们不晓得）
手机端的，跳不了┓(;´_｀)┏

ES3(包括之前)

1. concat
2. pop
3. push
4. shift
5. unshift
6. reverse
7. sort
8. join
9. slice
10. splice
11. toLocaleString
12. toString
13. toSource

ES5

14. Array.isArray
15. indexOf
16. lastIndexOf
17. every
18. some
19. forEach
20. map
21. filter
22. reduce
23. reduceRight

ES6(ES2015)

24. entries
25. keys
26. values
27. Array.from
28. Array.of
29. find
30. findIndex
31. fill
32. copyWithin

ES2016

33. includes

ES2019

34. flat
35. flatMap

1. Array.prototype.concat()

定义和用法：
concat()方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组（以此可知，它是纯函数）。

语法：
arrayObject.concat(arrayX,arrayX,......,arrayX)

参数	描述
arrayX	必需。该参数可以是具体的值，也可以是数组对象。可以是任意多个。

返回值： 返回一个新的数组

代码示例：

var arr1 = [1,2,3];
var arr2 = arr1.concat(4,5);
console.log(arr1);  // [ 1, 2, 3 ]
console.log(arr2);  // [ 1, 2, 3, 4, 5 ]

var arr1 = [1,2,3];
var arr2 = [4,5];
var arr3 = arr1.concat(arr2);
console.log(arr3);  // [ 1, 2, 3, 4, 5 ]

2. Array.prototype.pop()

pop()方法从数组中删除最后一个元素，并返回该元素的值。此方法更改数组的长度。
代码示例：

const arr = ['a', 'b', 'c'];
console.log(arr.pop());
// c
console.log(arr);
// ["a", "b"]

3. Array.prototype.push()

push()方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度。
代码示例：

const arr = ['a', 'b', 'c'];
console.log(arr.push('d'));
// 4
console.log(arr);
// ["a", "b", "c", "d"]

4. Array.prototype.shift()

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

const arr = ['a', 'b', 'c'];
console.log(arr.shift());
//  a
console.log(arr);
//  ["b", "c"]

5. Array.prototype.unshift()

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

const arr = ['a', 'b', 'c'];
console.log(arr.unshift('d'));
//  a
console.log(arr);
//   ["d", "a", "b", "c"]
console.log(arr.unshift(1,2));
// 6
console.log(arr);
// [1, 2, "d", "a", "b", "c"]

6. Array.prototype.reverse()

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

const arr = ['a', 'b', 'c'];
console.log(arr.reverse());
//  ["c", "b", "a"]
console.log(arr);
//  ["c", "b", "a"] 

7. Array.prototype.sort()

sort()方法用于对数组的元素进行排序，并返回数组。
语法：
arrayObject.sort(sortby)

参数	描述
sortby	可选。规定排序顺序。必须是函数。

返回值：
对数组的引用。请注意，数组在原数组上进行排序，不生成副本。

注意： 默认排序顺序是根据字符串UniCode码。因为排序是按照字符串UniCode码的顺序进行排序的
所以会有如下结果：

const arr = [1,4,13,3,11,2,22,9];
arr.sort();
console.log(arr);
// [1, 11, 13, 2, 22, 3, 4, 9]

解决方法就是传入比较函数，如下：
升序：

const arr = [1,4,13,3,11,2,22,9];
arr.sort((a,b) => a-b);
console.log(arr);
//   [1, 2, 3, 4, 9, 11, 13, 22]

降序：

const arr = [1,4,13,3,11,2,22,9];
arr.sort((a,b) => b-a);
console.log(arr);
//   [22, 13, 11, 9, 4, 3, 2, 1]

8. Array.prototype.join()

join() 方法用于把数组中的所有元素放入一个字符串。
元素是通过指定的分隔符(默认为逗号)进行分隔的。

代码示例：

const arr = ['a', 'b', 'c'];
console.log(arr.join());
// a,b,c
console.log(arr.join(''));
// abc
console.log(arr.join('-'));
// a-b-c

9. Array.prototype.slice()

slice()方法可从已有的数组中返回选定的元素。
语法： arrayObject.slice(start,end)
返回值： 返回一个新的数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素。

const arr = [10, 20, 30, 40, 50]

const arr1 = arr.slice()
console.log(arr1) // [10, 20, 30, 40, 50]

const arr2 = arr.slice(1, 4)
console.log(arr2) // [20, 30, 40]

const arr3 = arr.slice(2)
console.log(arr3) // [30, 40, 50]

const arr4 = arr.slice(-3) //可使用负值从数组的尾部选取元素。
console.log(arr4) // [30, 40, 50]

10. Array.prototype.splice()

splice()方法向/从数组中添加/删除项目，然后返回被删除的项目。
该方法会改变原始数组。

const arr = [10, 20, 30, 40, 50]

// splice 非纯函数
const spliceRes = arr.splice(1, 2, 'a', 'b', 'c')
console.log(spliceRes, arr) //[20,30] [10, 'a', 'b', 'c', 40, 50]

const spliceRes1 = arr.splice(1, 2)
console.log(spliceRes1, arr)//[20,30] [10, 40, 50]

const spliceRes2 = arr.splice(1, 0, 'a', 'b', 'c')
console.log(spliceRes2, arr)//[] [10, "a", "b", "c", 20, 30, 40, 50]

11. Array.prototype.toLocaleString()

toLocaleString()返回一个字符串表示数组中的元素。数组中的元素将使用各自的toLocaleString方法转成字符串，这些字符串将使用一个特定语言环境的字符串（例如一个逗号 “,”）隔开。

const array1 = [1, 'a', new Date('21 Dec 1997 14:12:00 UTC')];
const localeString = array1.toLocaleString('en', {timeZone: "UTC"});

console.log(localeString);

12. Array.prototype.toString()

toString()返回一个字符串，表示指定的数组及其元素。

const array1 = [1, 2, 'a', '1a'];
console.log(array1.toString());
// 1,2,a,1a

13. Array.prototype.toSource()

该特性是非标准的，请尽量不要在生产环境中使用它！
（不要使用了，我就放在这里看看）
返回一个字符串,代表该数组的源代码.

var alpha = new Array("a", "b", "c");
alpha.toSource();   //返回["a", "b", "c"]

14. Array.isArray()

Array.isArray() 用于确定传递的值是否是一个 Array。

console.log(Array.isArray([1, 2, 3]));  
// true
console.log(Array.isArray({foo: 123})); 
// false
console.log(Array.isArray("foobar")) ;   
// false

15. Array.prototype.indexOf()

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

const arr = ['a','b','c','a'];
console.log(arr.indexOf('a'));
// 0
console.log(arr.indexOf('f'));
// -1

16. Array.prototype.lastIndexOf()

lastIndexOf()方法返回指定元素（也即有效的 JavaScript 值或变量）在数组中的最后一个的索引，如果不存在则返回-1。从数组的后面向前查找。

const arr = ['a','b','c','a'];
console.log(arr.lastIndexOf('a'));
// 3
console.log(arr.indexOf('f'));
// -1

17. Array.prototype.every()

every()方法用于检测数组所有元素是否都符合指定条件（通过函数提供）
every() 方法使用指定函数检测数组中的所有元素：

• 如果数组中检测到有一个元素不满足，则整个表达式返回 false，且剩余的元素不会再进行检测。
• 如果所有元素都满足条件，则返回 true。

注意：
若收到一个空数组，此方法在一切情况下都会返回 true。
every()不会改变原始数组。

const fun1 = (i) => i < 10;
const fun2 = (i) => i > 10;
const arr = [1, 2, 3];
console.log(arr.every(fun1));
// true
console.log(arr.every(fun2));
// false
const arr1 = [1,2,3,11];
console.log(arr1.every(fun1));
// false

18. Array.prototype.some()

some()方法用于检测数组中的元素是否满足指定条件（函数提供）
some() 方法会依次执行数组的每个元素：

• 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测
• 如果没有满足条件的元素，则返回false

注意：
如果用一个空数组进行测试，在任何情况下它返回的都是false
`some() ``不会改变原始数组

const fun1 = (i) => i < 10;
const fun2 = (i) => i > 20;
const arr = [1, 11, 12];
console.log(arr.some(fun1));
// true
console.log(arr.some(fun2));
// false

19. Array.prototype.forEach()

forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数
注意: forEach() 对于空数组是不会执行回调函数的

const arr = [1,2,3];
arr.forEach(i => console.log(i));
// 1
// 2
// 3

20. Array.prototype.map()

map()方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
map() 方法按照原始数组元素顺序依次处理元素。
注意：
map()不会对空数组进行检测。
map() 不会改变原始数组。

const arr = [1,2,3];
const map =  arr.map(i => i*2);
console.log(map);
// [2, 4, 6]
console.log(arr)
// [1, 2, 3]

21. Array.prototype.filter()

filter()方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
注意：
filter()不会对空数组进行检测。
filter() 不会改变原始数组

const arr = [1,2,3,4,5,6];
const result =  arr.filter(i => i>3);
console.log(result);
// [4, 5, 6]
console.log(arr)
// [1, 2, 3, 4, 5, 6]

22. Array.prototype.reduce()

reduce()方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。
reduce()可以作为一个高阶函数，用于函数的 compose。
注意:
reduce()对于空数组是不会执行回调函数的。

const array1 = [1, 2, 3, 4];
const reducer = (total, currentValue) => total + currentValue;

// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer));
// expected output: 10

// 5 + 1 + 2 + 3 + 4
console.log(array1.reduce(reducer, 5));
// expected output: 15

23. Array.prototype.reduceRight()

reduceRight() 方法的功能和 reduce()功能是一样的，不同的是 reduceRight()从数组的末尾向前将数组中的数组项做累加。

const array1 = [[0, 1], [2, 3], [4, 5]].reduceRight(
 (accumulator, currentValue) => accumulator.concat(currentValue)
);
console.log(array1);
// expected output: Array [4, 5, 2, 3, 0, 1]

24. Array.prototype.entries()

定义和用法：
entries()方法返回一个数组的迭代对象(Array Iterator)，该对象包含数组的键值对 (key/value)。

代码示例：

var fruits = ["Banana", "Orange", "Apple"];
var iterator = fruits.entries();

调用遍历器对象的next方法，进行遍历:

console.log(iterator.next().value); // [0, "Banana"]
console.log(iterator.next().value); // [1, "Orange"]
console.log(iterator.next().value); // [2, "Apple"]

使用for...of循环:

for (let [index, elem] of fruits.entries()) {
	console.log(index, elem);
}
// 0 "Banana"
// 1 "Orange"
// 2 "Apple"

25. Array.prototype.keys()

定义和用法：
keys()方法返回一个包含数组中每个索引键的Array Iterator对象。
代码示例：

var fruits = ["Banana", "Orange", "Apple"];
var iterator = fruits.keys();
for (const key of iterator) {
	console.log(key);
}
// 0 
// 1 
// 2 

26. Array.prototype.values()

定义和用法：
values()方法返回一个包含数组中每个索引值的Array Iterator对象。

代码示例：

var fruits = ["Banana", "Orange", "Apple"];
var iterator = fruits.values();
for (const value of iterator) {
	console.log(value);
}
// Banana
// Orange
// Apple

27. Array.from()

Array.from()方法从一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。

console.log(Array.from('foo'));
// ["f", "o", "o"]

console.log(Array.from([1, 2, 3], x => x + x));
// [2, 4, 6]

28. Array.of()

Array.of()方法创建一个具有可变数量参数的新数组实例，而不考虑参数的数量或类型。

Array.of() 和Array构造函数之间的区别在于处理整数参数：

• Array.of(7) 创建一个具有单个元素 7 的数组，
• Array(7)创建一个长度为7的空数组（注意：这是指一个有7个空位(empty)的数组，而不是由7个undefined组成的数组）。

Array.of(7);       // [7] 
Array.of(1, 2, 3); // [1, 2, 3]

Array(7);          // [ , , , , , , ]
Array(1, 2, 3);    // [1, 2, 3]

29. Array.prototype.find()

find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。

const array1 = [5, 12, 8, 130, 44];
const found = array1.find(element => element > 10);
console.log(found);
// 12

30. Array.prototype.findIndex()

findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。

const array1 = [5, 12, 8, 130, 44];
const found = array1.findIndex(element => element > 10);
console.log(found);
// 1

31. Array.prototype.fill()

fill()方法用于将一个固定值替换数组的元素。
语法：
array.fill(value, start, end)

参数	描述
value	必需。填充的值。
start	可选。开始填充位置。
end	可选。停止填充位置 (默认为 array.length)

返回值： 修改后的数组

const array1 = [1, 2, 3, 4];

console.log(array1.fill(0, 2, 4));
// expected output: [1, 2, 0, 0]

console.log(array1.fill(5, 1));
// expected output: [1, 5, 5, 5]

console.log(array1.fill(6));
// expected output: [6, 6, 6, 6]

32. Array.prototype.copyWithin()

copyWithin()方法浅复制数组的一部分到同一数组中的另一个位置，并返回它，不会改变原数组的长度。
语法：
array.copyWithin(target, start, end)

参数	描述
target	必需。复制到指定目标索引位置。
start	可选。元素复制的起始位置。
end	可选。停止复制的索引位置 (默认为 array.length)。如果为负值，表示倒数。

返回值：改变后的数组

const array1 = ['a', 'b', 'c', 'd', 'e'];

console.log(array1.copyWithin(0, 3, 4));
// expected output: Array ["d", "b", "c", "d", "e"]

console.log(array1.copyWithin(1, 3));
// expected output: Array ["d", "d", "e", "d", "e"]

33. Array.prototype.includes()

includes()方法用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回true，否则返回false

const array1 = [1, 2, 3];

console.log(array1.includes(2));
// expected output: true

const pets = ['cat', 'dog', 'bat'];

console.log(pets.includes('cat'));
// expected output: true

console.log(pets.includes('at'));
// expected output: false

34. Array.prototype.flat()

flat() 方法会递归到指定深度将所有子数组连接，并返回一个新数组。

语法：
var newArray = arr.flat([depth]);

参数	描述
depth	指定递归展开的深度，默认为：1

代码示例：

var arr1 = [1, 2, [3, 4]];
console.log(  arr1.flat()) // [1, 2, 3, 4]

var arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
console.log(arr2.flat()); // [1, 2, 3, 4, [5, 6]]

var arr3 = [1, 2, [3, 4, [5, 6]]];
console.log( arr3.flat(2)); // [1, 2, 3, 4, 5, 6]

flat()函数会自动清除数组中的空元素

var arr4 = [1, 2, , 4, 5];
console.log(arr4.flat()); // [1, 2, 4, 5]

35. Array.prototype.flatMap()

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

返回值：
一个新的数组，其中每个元素都是回调函数的结果，并且结构深度 depth 值为1。

代码示例：

const arr1 = [1, 2, 3, 4];

const map1 = arr1.map(x => [x * 2]); 
console.log(map1);
// [[2], [4], [6], [8]]

const flatm1 = arr1.flatMap(x => [x * 2]);
console.log(flatm1);
// [2, 4, 6, 8]

const flatm2 = arr1.flatMap(x => [[x * 2]]);
console.log(flatm2);
// [[2], [4], [6], [8]]