数组操作方法汇总

常用方法速览：

接下来是比较全的、详细的方法用法

1. Array.from()

该方法从一个类似数组或可迭代对象中创建一个新的，浅拷贝的数组实例。

语法：Array.from(arrayLike[, mapFn[, thisArg]])

参数：
arrayLike -- 想要转换成数组的伪数组对象或可迭代对象。
mapFn -- (可选参数) 如果指定了该参数，新数组中的每个元素会执行该回调函数。
thisArg -- (可选参数) 可选参数，执行回调函数 mapFn 时 this 对象。

返回值：一个新的数组实例。

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

2. Array.isArray()

用于确定传递的值是否是一个 Array。

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

3. 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]
Array.of(undefined); // [undefined]

4. concat()

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

语法：var new_array = old_array.concat(value1[, value2[, ...[, valueN]]])

var array1 = ['a', 'b', 'c'];
var array2 = ['d', 'e', 'f'];
var arr = array1.concat(array2);
console.log(arr); // ["a", "b", "c", "d", "e", "f"]
console.log(array1); // ["a", "b", "c"]

5. copyWithin()

浅复制数组的一部分到同一数组中的另一个位置，并返回它，不会改变原数组的长度，但是会$color{red}{改变原数组}$(同返回值)。

语法：arr.copyWithin(target[, start[, end]])

参数：
target -- 0 为基底的索引，复制序列到该位置。如果是负数，target 将从末尾开始计算。如果 target 大于等于 arr.length，将会不发生拷贝。如果 target 在 start 之后，复制的序列将被修改以符合 arr.length。
start -- 0 为基底的索引，开始复制元素的起始位置。如果是负数，start 将从末尾开始计算。如果 start 被忽略，copyWithin 将会从0开始复制。
end -- 0 为基底的索引，开始复制元素的结束位置。copyWithin 将会拷贝到该位置，但不包括 end 这个位置的元素。如果是负数， end 将从末尾开始计算。

返回值：改变后的数组。

var array1 = ['a', 'b', 'c', 'd', 'e'];
console.log(array1.copyWithin(0, 3, 4));  // ["d", "b", "c", "d", "e"]  
console.log(array1);  // ["d", "b", "c", "d", "e"]
console.log(array1.copyWithin(1, 3));  // ["d", "d", "e", "d", "e"]

let numbers = [1, 2, 3, 4, 5];
numbers.copyWithin(-2); // [1, 2, 3, 1, 2]
numbers.copyWithin(0, 3); // [4, 5, 3, 4, 5]
numbers.copyWithin(0, 3, 4); // [4, 2, 3, 4, 5]
numbers.copyWithin(-2, -3, -1); // [1, 2, 3, 3, 4]

6. entries()

该方法返回一个新的Array Iterator对象，该对象包含数组中每个索引的键/值对。

var array1 = ['a', 'b', 'c'];
var iterator1 = array1.entries();
console.log(iterator1.next().value); // [0, "a"]
console.log(iterator1.next().value); //  [1, "b"]

var arr = ["a", "b", "c"];
var iterator = arr.entries();
for (let e of iterator) {
  console.log(e);
}
// [0, "a"] 
// [1, "b"] 
// [2, "c"]

7. every()

该方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。若收到一个空数组，此方法在一切情况下都会返回 true。

语法：arr.every(callback[, thisArg])

参数：
callback -- 用来测试每个元素的函数，它可以接收三个参数：
element ： 用于测试的当前值。
index ：可选，用于测试的当前值的索引。
array：可选，调用 every 的当前数组。
thisArg -- 执行 callback 时使用的 this 值。

返回值：如果回调函数的每一次返回都为 truthy 值，返回 true ，否则返回 false。

every 方法为数组中的每个元素执行一次 callback 函数，直到它找到一个会使 callback 返回 falsy 的元素。如果发现了一个这样的元素，every 方法将会立即返回 false。否则，callback 为每一个元素返回 true，every 就会返回 true。callback 只会为那些已经被赋值的索引调用。不会为那些被删除或从未被赋值的索引调用。

const val = [12, 5, 8, 130, 44].every((x,i,array) => {
  console.log(x,i,array);
  return x >= 10;
});
// 12 0 [12, 5, 8, 130, 44]
// 5 1  [12, 5, 8, 130, 44]
console.log(val); // false
[12, 54, 18, 130, 44].every(x => x >= 10); // true

8. some()

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

[2, 5, 8, 1, 4].some(x => x > 10);  // false
[12, 5, 8, 1, 4].some(x => x > 10); // true

9. fill()

用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。$color{red}{改变原数组}$(同返回值)

语法：arr.fill(value[, start[, end]])

value -- 用来填充数组元素的值。
start -- 起始索引，默认值为0。
end -- 终止索引，默认值为 this.length。

返回值：改变后的数组。

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

[1, 2, 3].fill(4, 1); // [1, 4, 4]
[1, 2, 3].fill(4, 1, 2);  // [1, 4, 3]
[1, 2, 3].fill(4, 1, 1); // [1, 2, 3]
[1, 2, 3].fill(4, 3, 3); // [1, 2, 3]
[1, 2, 3].fill(4, -3, -2); // [4, 2, 3]
[1, 2, 3].fill(4, NaN, NaN); // [1, 2, 3]
[1, 2, 3].fill(4, 3, 5); // [1, 2, 3]

10. filter()

创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。

语法：var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])

返回值：一个新的、由通过测试的元素组成的数组，如果没有任何数组元素通过测试，则返回空数组。

var words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
const result = words.filter(val => val.length > 6);
console.log(result); // ["exuberant", "destruction", "present"]
console.log(words); // ["spray", "limit", "elite", "exuberant", "destruction", "present"]

11. find()

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

语法：arr.find(callback[, thisArg])

返回值：数组中第一个满足所提供测试函数的元素的值，否则返回 undefined。

find方法对数组中的每一项元素执行一次 callback 函数，直至有一个 callback 返回 true。当找到了这样一个元素后，该方法会立即返回这个元素的值，否则返回 undefined。

var array1 = [5, 12, 8, 130, 44];
var found = array1.find((element,i) => {
  console.log(i); // 0 1
  return element > 10;
});
console.log(found); // 12

12. findIndex()

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

var array1 = [5, 12, 8, 130, 44];
var found = array1.findIndex((element,i) => {
  console.log(i); // 0 1
  return element > 10;
});
console.log(found); // 1

13. flat()

按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。不改变原数组。

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

返回值：一个包含将数组与子数组中所有元素的新数组。

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

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

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

//使用 Infinity 作为深度，展开任意深度的嵌套数组
arr3.flat(Infinity);  // [1, 2, 3, 4, 5, 6]

flat() 方法会移除数组中的空项:

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

14. flatMap()

首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。它与 map 和 深度值1的 flat 几乎相同，但 flatMap 通常在合并成一种方法的效率稍微高一些。
语法：

var new_array = arr.flatMap(function callback(currentValue[, index[, array]]) {
    // 返回新数组的元素
}[, thisArg])

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

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

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

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

// 只会将 flatMap 中的函数返回的数组 “压平” 一层
arr1.flatMap(x => [[x * 2]]); // [[2], [4], [6], [8]]

15. forEach()

对数组的每个元素执行一次提供的函数。

var arr1 = ['a', 'b', 'c', 'd'];
arr1.forEach((ele, i) => {
  console.log(ele,i); 
});
// a 0
// b 1
// c 2
// d 3

16. includes()

用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回false。使用 includes()比较字符串和字符时是区分大小写。
注意：对象数组不能使用includes方法来检测。

语法：arr.includes(valueToFind[, fromIndex])

参数：
valueToFind -- 需要查找的元素值。
fromIndex -- 可选。从fromIndex 索引处开始查找 valueToFind。如果为负值，则按升序从 array.length + fromIndex 的索引开始搜 （即使从末尾开始往前跳 fromIndex 的绝对值个索引，然后往后搜寻）。默认为 0。

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

17. indexOf()

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

语法：arr.indexOf(searchElement[, fromIndex = 0])

参数：
searchElement -- 要查找的元素。
fromIndex -- 开始查找的位置。如果该索引值大于或等于数组长度，意味着不会在数组里查找，返回-1。如果参数中提供的索引值是一个负值，则将其作为数组末尾的一个抵消，即-1表示从最后一个元素开始查找，-2表示从倒数第二个元素开始查找 ，以此类推。 注意：如果参数中提供的索引值是一个负值，并不改变其查找顺序，查找顺序仍然是从前向后查询数组。如果抵消后的索引值仍小于0，则整个数组都将会被查询。其默认值为0.

返回值：首个被找到的元素在数组中的索引位置; 若没有找到则返回 -1。

var array = [2, 5, 9];
array.indexOf(2);     // 0
array.indexOf(7);     // -1
array.indexOf(9, 2);  // 2
array.indexOf(2, -1); // -1
array.indexOf(2, -3); // 0

18. join()

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

注意：如果一个元素为 undefined 或 null，它会被转换为空字符串。

var a = ['Wind', 'Rain', 'Fire'];
var myVar1 = a.join();      // myVar1的值变为"Wind,Rain,Fire"
var myVar2 = a.join(', ');  // myVar2的值变为"Wind, Rain, Fire"
var myVar3 = a.join(' + '); // myVar3的值变为"Wind + Rain + Fire"
var myVar4 = a.join('');    // myVar4的值变为"WindRainFire"

var b = ['Wind', 'Rain', null, 'Fire', undefined, 6];
console.log(b.join('/')); // Wind/Rain//Fire//6
console.log(b); // ["Wind", "Rain", null, "Fire", undefined, 6]

19. lastIndexOf()

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

语法：arr.lastIndexOf(searchElement[, fromIndex = arr.length - 1])

参数：
searchElement -- 被查找的元素。
fromIndex -- 从此位置开始逆向查找。默认为数组的长度减 1，即整个数组都被查找。如果该值大于或等于数组的长度，则整个数组会被查找。如果为负值，将其视为从数组末尾向前的偏移。即使该值为负，数组仍然会被从后向前查找。如果该值为负时，其绝对值大于数组长度，则方法返回 -1，即数组不会被查找。

返回值：数组中最后一个元素的索引，如未找到返回-1。

var array = [2, 5, 9, 2];
var index = array.lastIndexOf(2); // index is 3
index = array.lastIndexOf(7); // index is -1
index = array.lastIndexOf(2, 3); // index is 3
index = array.lastIndexOf(2, 2); // index is 0
index = array.lastIndexOf(2, -2); // index is 0
index = array.lastIndexOf(2, -1); // index is 3

20. map()

创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。
语法：

var new_array = arr.map((currentValue, index, array) => {
 // Return element for new_array 
}, thisArg)

var numbers = [1, 4, 9];
var doubles = numbers.map(function(num) {
  return num * 2;
});

// doubles数组的值为： [2, 8, 18]
// numbers数组未被修改： [1, 4, 9]

21. pop()

从数组中删除最后一个元素，并返回该元素的值。此方法$color{red}{改变原数组}$。

let myFish = ["angel", "clown", "mandarin", "surgeon"];
let popped = myFish.pop();
console.log(myFish);  // ["angel", "clown", "mandarin"]
console.log(popped);  // surgeon

22. push()

将一个或多个元素添加到数组的末尾，并返回该数组的新长度。此方法$color{red}{改变原数组}$。

var sports = ["soccer", "baseball"];
var total = sports.push("football", "swimming");

console.log(sports);  // ["soccer", "baseball", "football", "swimming"]
console.log(total);   // 4

23. shift()

从数组中删除第一个元素，并返回该元素的值。此方法$color{red}{改变原数组}$。

let myFish = ['angel', 'clown', 'mandarin', 'surgeon'];
console.log(myFish); // ["angel", "clown", "mandarin", "surgeon"]

var shifted = myFish.shift(); 
console.log(myFish); // ["clown", "mandarin", "surgeon"]
console.log('被删除的元素: ', shifted); // 被删除的元素: angel

24. unshift()

将一个或多个元素添加到数组的开头，并返回该数组的新长度，该方法$color{red}{改变原数组}$。

arr.unshift(element1, ..., elementN)

let arr = [1, 2];

arr.unshift(0); // result of the call is 3, which is the new array length
// arr is [0, 1, 2]

arr.unshift(-2, -1); // the new array length is 5
// arr is [-2, -1, 0, 1, 2]

arr.unshift([-4, -3]); // the new array length is 6
// arr is [[-4, -3], -2, -1, 0, 1, 2]

arr.unshift([-7, -6], [-5]); // the new array length is 8
// arr is [ [-7, -6], [-5], [-4, -3], -2, -1, 0, 1, 2 ]

25. reverse()

将数组中元素的位置颠倒，并返回该数组。该方法$color{red}{改变原数组}$。

var sourceArray = ['one', 'two', 'three'];
var reverseArray = sourceArray.reverse();

console.log(sourceArray ) // ['three', 'two', 'one']
console.log(sourceArray === reverseArray); // true

26. sort()

用原地算法对数组的元素进行排序，并返回数组。默认排序顺序是在将元素转换为字符串，然后比较它们的UTF-16代码单元值序列时构建的。该方法$color{red}{改变原数组}$。

arr.sort([compareFunction])

参数：
compareFunction -- 可选。用来指定按某种顺序进行排列的函数。如果省略，元素按照转换为的字符串的各个字符的Unicode位点进行排序。
firstEl：第一个用于比较的元素。
secondEl：第二个用于比较的元素。

返回值：排序后的数组。请注意，数组已原地排序，并且不进行复制。

如果指明了 compareFunction ，那么数组会按照调用该函数的返回值排序。即 a 和 b 是两个将要被比较的元素：

• 如果 compareFunction(a, b) 小于 0 ，那么 a 会被排列到 b 之前；
• 如果 compareFunction(a, b) 等于 0 ， a 和 b 的相对位置不变。备注： ECMAScript 标准并不保证这一行为，而且也不是所有浏览器都会遵守（例如 Mozilla 在 2003 年之前的版本）；
• 如果 compareFunction(a, b) 大于 0 ， b 会被排列到 a 之前。
• compareFunction(a, b) 必须总是对相同的输入返回相同的比较结果，否则排序的结果将是不确定的。

//升序
var numbers = [4, 2, 5, 1, 3]; 
var num = numbers.sort((a, b) => a - b); 
console.log(numbers,num); // [1, 2, 3, 4, 5]  [1, 2, 3, 4, 5]
// 降序
var number1 = [4, 2, 5, 1, 3]; 
var num1 = number1.sort((a, b) => b - a); 
console.log(number1,num1); // [5, 4, 3, 2, 1]  [5, 4, 3, 2, 1]

var arr = ['s', 2,'d',23];
arr.sort();
console.log(arr); // [2, 23, "d", "s"] 按照ASCII 字符编码排序。

27. slice()

返回被提取的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝，包括 begin，不包括end。原始数组不会被改变。

arr.slice([begin[, end]])

参数：
begin -- 可选。提取起始处的索引，从该索引开始提取原数组元素，默认为 0。

• 如果该参数为负数，则表示从原数组中的倒数第几个元素开始提取，slice(-2) 表示提取原数组中的倒数第二个元素到最后一个元素（包含最后一个元素）。
• 如果省略 begin，则 slice 从索引 0 开始。如果 begin 大于原数组的长度，则会返回空数组。

end -- 可选。提取终止处的索引，在该索引处结束提取原数组元素，默认为 0。slice 会提取原数组中索引从 begin 到 end 的所有元素（包含 begin，但不包含 end）。

• slice(1,4) 会提取原数组中从第二个元素开始一直到第四个元素的所有元素 （索引为 1, 2, 3的元素）。
• 如果该参数为负数， 则它表示在原数组中的倒数第几个元素结束抽取。 slice(-2,-1) 表示抽取了原数组中的倒数第二个元素到最后一个元素（不包含最后一个元素，也就是只有倒数第二个元素）。
• 如果 end 被省略，则slice 会一直提取到原数组末尾。
• 如果 end 大于数组的长度，slice 也会一直提取到原数组末尾。

var fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'];
var citrus = fruits.slice(1, 3);
// fruits contains ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango']
// citrus contains ['Orange','Lemon']

28. splice()

通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会$color{red}{改变原数组}$。

array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

参数：
start​ -- 指定修改的开始位置（从0计数）。如果超出了数组的长度，则从数组末尾开始添加内容；如果是负值，则表示从数组末位开始的第几位（从-1计数，这意味着-n是倒数第n个元素并且等价于array.length-n）；如果负数的绝对值大于数组的长度，则表示开始位置为第0位。
deleteCount -- 可选。整数，表示要移除的数组元素的个数。如果 deleteCount 大于 start 之后的元素的总数，则从 start 后面的元素都将被删除（含第 start 位）。
如果 deleteCount 被省略了，或者它的值大于等于array.length - start(也就是说，如果它大于或者等于start之后的所有元素的数量)，那么start之后数组的所有元素都会被删除。
如果 deleteCount 是 0 或者负数，则不移除元素。这种情况下，至少应添加一个新元素。
item1, item2, ... -- 可选。要添加进数组的元素,从start 位置开始。如果不指定，则 splice() 将只删除数组元素。

返回值：由被删除的元素组成的一个数组。如果只删除了一个元素，则返回只包含一个元素的数组。如果没有删除元素，则返回空数组。

//*************删除
var myFish = ['angel', 'clown', 'drum', 'mandarin', 'sturgeon'];
var removed = myFish.splice(3, 1);
// myFish: ["angel", "clown", "drum", "sturgeon"]
// removed: ["mandarin"]

var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
var removed = myFish.splice(2);
// myFish: ["angel", "clown"]
// removed: ["mandarin", "sturgeon"]

//*************添加
var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
var removed = myFish.splice(2, 0, 'drum', 'guitar');
// myFish: ["angel", "clown", "drum", "guitar", "mandarin", "sturgeon"]
// removed: []

//*************替换
var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
var removed = myFish.splice(2, 1, 'drum', );
// myFish: ["angel", "clown", "drum", "sturgeon"]
// removed: ["mandarin"]

29. reduce()

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

语法：arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])

reducer 函数接收4个参数:

• Accumulator (acc) (累计器) -- 累计回调的返回值; 它是上一次调用回调时返回的累积值，或initialValue（见于下方）。
• Current Value (cur) (当前值)
• Current Index (idx) (当前索引) -- 数组中正在处理的当前元素的索引。 如果提供了initialValue，则起始索引号为0，否则为1。
• Source Array (src) (源数组) -- 调用reduce()的数组
  reducer 函数的返回值分配给累计器，该返回值在数组的每个迭代中被记住，并最后成为最终的单个结果值。
  回调函数第一次执行时，accumulator 和currentValue的取值有两种情况：如果调用reduce()时提供了initialValue，accumulator取值为initialValue，currentValue取数组中的第一个值；如果没有提供 initialValue，那么accumulator取数组中的第一个值，currentValue取数组中的第二个值。
  注意：如果没有提供initialValue，reduce 会从索引1的地方开始执行 callback 方法，跳过第一个索引。如果提供initialValue，从索引0开始。

const arr = [13, 2, 23, 4];
const val = arr.reduce((acc, curVal, i) => {
  console.log(acc); // 13 13 23
  console.log(curVal); // 2 23 4
  console.log(i); // 1 2 3
  return Math.max(acc,curVal);
});
console.log(val); // 23 

30. toString()

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

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