[TOC]
1. 数组的遍历
1.1 for..of 循环
for(const item of items) 循环遍历数组项，如下所示遍历colors列表：
var colors = ['blue', 'green', 'white'];
for (const color of colors) {
console.log(color);
}
// 'blue'
// 'green'
// 'white'
可以随时使用break语句停止遍历。
1.2 for 循环
for( let i ; i < array.length ; i++){} 循环使用递增的索引变量遍历数组项。 for通常需要在每个循环中递增index变量
var colors = ['blue', 'green', 'white'];
for (let i = 0; i < colors.length ; i++) {
console.log(colors[i]);
}
// 'blue'
// 'green'
// 'white'
可以随时使用break语句停止遍历。
1.3 array.forEach() 方法
通过在每个数组项上调用callback函数来遍历数组项。 在每次遍历中，都使用以下参数调用 callback(item [, index [, array]])： 当前遍历项，当前遍历索引和数组本身。
var colors = ['blue', 'green', 'white'];
colors.forEach((value, index) => {
console.log(value, index);
});
// 'blue', 0
// 'green', 1
// 'white', 2
不能中断array.forEach()迭代。
2. 数组的映射
2.1 Array.map(callback)方法
通过在每个数组项上使用callback调用结果来创建一个新数组。 在每个遍历中的 **callback(item[, index[, array]]) **使用参数调用:当前项、索引和数组本身，并应该返回新项。 如下所示对每个数组元素都++1：
var nums = [0, 2, 4];
var newNums = numbers.map(
(num) => {
return num + 1;
}
);
console.log(newNums); // [1, 3, 5]
array.map()创建一个新的映射数组，而不改变原始数组。
2.2 Array.from(arrayLike[, callback])方法
通过在每个数组项上使用callback 调用结果来创建一个新数组。 在每个遍历中 **callback(item[, index[, array]]) **使用参数调用:当前项、索引和数组本身并且应该返回新项。 如下所示对每个数组元素都++1：
var nums = [0, 2, 4];
var newNums = Array.from(nums,
(num) => {
return num + 1;
}
);
console.log(newNums); // [1, 3, 5]
Array.from()创建一个新的映射数组，而不改变原始数组。 Array.from()更适合从类似数组的对象进行映射。
3. 数据的简化
3.1 Array.reduce() 方法
array.reduce(callback[, initialValue]) 通过调用callback 函数来将数组简化为一个值。 在每次遍历中的 callback( back, item[, index[, array]]) 使用用参数调用的:累加器，当前项，索引和数组本身且应该返回累加器。 示例，对数字数组求和：
var nums = [2, 0, 4];
var sum = nums.reduce((back, num) => {
return back + num;
}, 0);
console.log(sum); // 6
第一步，将 back 初始化为0。然后，对每个累加数字和的数组项调用callback函数。
如果没有使用 initialValue 来设置初始值，则默认使用数组的第一个元素作为初始值。
4. 数据的连接
4.1 array.concat() 方法
**array.concat(array1[, array2, ...]) **将一个或多个数组连接到原始数组。如下所示，连接两个数组：
var arr1 = ['1', '2'];
var arr2 = ['3', '4'];
var newArr = arr1.concat(arr2);
console.log(newArr); // ["1", "2", "3", "4"]
concat()创建一个新的数组，而不改变原来的数组 array.concat(array1 [，array2，...]) 接受多个要连接的数组。
4.2 展开操作符号
咱们将展开操作符与数组字面量一起使用来连接数组: [...array1, ...array2]。
var arr1 = ['1', '2'];
var arr2 = ['3', '4'];
var newArr = [...arr1, ...arr2];
console.log(newArr); // ["1", "2", "3", "4"]
[...arr1, ...arr2, ...arrN]：咱们可以使用展开运算符连接所需数量的数组。
5. 获取数组的片段
5.1 array.slice() 方法
array.slice([fromIndex [，toIndex]])返回数组的一个片段，该片段从fromIndex开始，以toIndex结尾（不包括toIndex本身）。
fromIndex可选参数默认为0，toIndex可选参数默认为array.length。
var arr = ['1', '2', '3', '4'];
var newArr1 = arr.slice(0, 2)
var newArr2 = arr.splice(2)
console.log(newArr1); // ["1", "2"]
console.log(newArr2); // ["3", "4"]
array.slice() 创建一个新数组，而不改变原始数组。
6. 数组的拷贝
6.1 展开操作符
拷贝数组的一种简单方法是使用展开运算符：const clone = [... array]，如下所示，拷贝 colors 数组：
var colors = ['white', 'black', 'gray'];
var clone = [...colors];
console.log(clone); // ['white', 'black', 'gray']
console.log(colors === clone); // false
[...array] 创建一个浅拷贝。
6.2 array.concat()方法
**[].concat(array)**是另一种拷贝数组的方法。
var colors = ['white', 'black', 'gray'];
var clone = [].concat(colors);
console.log(clone); // ['white', 'black', 'gray']
console.log(colors === clone); // false
[].concat(array) 创建一个浅拷贝。
6.3 array.slice() 方法
**array.slice()**是另一种拷贝数组的方法。
var colors = ['white', 'black', 'gray'];
var clone = colors.slice();
console.log(clone); // ['white', 'black', 'gray']
console.log(colors === clone); // false
colors.slice() 创建一个浅拷贝。
7. 查找数组
7.1 array.includes()
方法**array.includes( itemToSearch [，fromIndex ])**返回一个布尔值，array 是否包含itemToSearch。
可选参数fromIndex，默认为0，表示开始搜索的索引。如下所示：判断2和99是否存在于一组数字中：
var nums = [1, 2, 3, 4, 5];
nums.includes(2); // => true
nums.includes(99); // => false
7.2 array.find()
方法array.find(callback) 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。
var nums = [1, 2, 3, 4, 5];
var res1 = nums.find( value => value > 3);
console.log(res1); // 4
var res2 = nums.find( value => value > 5);
console.log(res2); // undefined
7.3 array.findIndex()
方法array.findIndex(callback) 方法返回数组中满足提供的测试函数的第一个元素的值索引。否则返回 -1 。
var nums = [1, 2, 3, 4, 5];
var res1 = nums.findIndex( value => value > 3);
console.log(res1); // 3
var res2 = nums.findIndex( value => value > 5);
console.log(res2); // -1
7.4 array.indexOf()
方法**array.indexOf ( searchItem[, sindex]) **返回array中第一个出现的searchItem的索引。默认为0的可选参数sindex表示开始搜索的索引。
var nums = ["1", "2", "3", "4"];
var index = nums.indexOf('2');
console.log(index); // 1
如果找不到该项，则array.indexOf(itemToSearch)返回-1; array.findIndex(predicate)是使用predicate函数查找索引的替代方法。
8. 查询数组
8.1 array.every() 方法
如果每个项都通过callback检查，则array.every(callback)返回true。 在每个遍历callback( item [, index [, array ]])上，用参数调用callback函数:当前遍历项、索引和数组本身。 如下所示，确定数组是否只包含偶数：
var nums1 = [0, 2, 4, 6];
var nums2 = [0, 1, 4, 6];
var res1 = nums1.every( num => num % 2 === 0 );
console.log(res1); // true
var res2 = nums2.every( num => num % 2 === 0 );
console.log(res2); // false
8.2 array.some() 方法
如果每个项只要一个通过callback检查，则array.every(callback)返回true。 在每个遍历callback( item [, index [, array ]])上，用参数调用callback函数:当前遍历项、索引和数组本身。 如下所示：确定数组是否至少包含一个偶数：
var nums1 = [1, 5, 7, 10];
var nums2 = [1, 3, 3, 3];
var res1 = nums1.some( num => num % 2 === 0 );
console.log(res1); // true
var res2 = nums2.some( num => num % 2 === 0 );
console.log(res2); // false
9. 数组的过滤
9.1 array.filter()
方法array.filter(callback)方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。 在每个遍历callback( item [, index [, array ]])上，用参数调用callback函数:当前遍历项、索引和数组本身。 如下所示：将一个数组过滤为仅包含偶数：
var nums = [1, 5, 7, 10];
var res = nums.filter( num => num % 2 === 0 );
console.log(res); // [10]
array.filter() 创建一个新数组，而不改变原始数组。
10. 数组的插入
10.1 array.push()
方法array.push( item1 [...，itemN ]) 方法将一个或多个项追加到数组的末尾，并返回新的长度。
如下所示，在nums数组的末尾添加 7
var nums = [1, 2, 3, 4];
nums.push(7);
console.log(nums); // [ 1, 2, 3, 4, 7 ]
array.push() 会改变原数组 array.push(item1, item2, ..., itemN) 可以添加多个元素。
10.2 array.unshift()
方法array.unshift( item1 [..., itemN ])方法将一个或多个项追加到数组的开头，返回数组的新长度
如下所示，在nums数组的开头添加 7
var nums = [1, 2, 3, 4];
nums.unshift(7);
console.log(nums); // [ 7, 1, 2, 3, 4 ]
array.unshift() 会改变原数组 array.unshift(item1, item2, ..., itemN) 可以添加多个元素。
10.3 展开操作符
可以通过组合展开操作符和数组字面量以不可变的方式在数组中插入项。 在数组末尾追加一个项:
var nums1 = [1, 2];
var nums2 = [...nums1, 7];
console.log(nums2); // [ 1, 2, 7 ]
在数组的开头追加一个项:
var nums1 = [1, 2];
var nums2 = [7, ...nums1];
console.log(nums2); // [ 7, 1, 2 ]
在任何索引处插入元素：
var nums1 = [6, 8];
var nums2 = [ ...nums1.slice(0, 1), 7, ...nums1.slice(1) ];
console.log(nums2); // [ 6, 7, 8 ]
11. 删除数组元素
11.1 array.pop() 方法
array.pop()方法从数组中删除最后一个元素，然后返回该元素。如下所示，删除colors数组的最后一个元素：
var nums1 = [1, 2, 3];
var nums2 = nums1.pop();
console.log(nums1); // [ 1, 2 ]
console.log(nums2); // 3
array.pop() 会改变原数组。
11.2 array.shift() 方法
array.shift()方法从数组中删除第一个元素，然后返回该元素。
var nums1 = [1, 2, 3];
var nums2 = nums1.shift();
console.log(nums1); // [ 2, 3 ]
console.log(nums2); // 1
array.shift() 会改变原数组。 array.shift() 具有O(n)复杂度。
11.3 array.splice() 方法
**array.splice( sindex [, count[, item1 [, item2 [, ...]]]])**从数组中删除元素，并插入新的元素。sindex开始索引，count删除长度，item插入元素 例如，咱们从索引1处删除2个元素：
var nums = [1, 2, 3, 4];
nums.splice(1, 2);
console.log(nums); // [ 1, 4 ]
array.splice() 可以插入新元素，而不是插入已删除的元素。 咱们可以替换索引1处开始的的2个元素，然后插入一个新的元素 7 ：
var nums = [1, 2, 3, 4];
nums.splice(1, 2, 7);
console.log(nums); // [ 1, 7, 4 ]
array.splice() 会改变原数组。
11.4 展开操作符号
可以通过组合展开操作符和数据字面量以不可变的方式从数组中删除项。
var nums1 = [10, 20, 30, 40];
var nums2 = [ ...nums1.slice(0, 1), ...nums1.slice(3) ]
console.log(nums2); // [ 10, 40 ]
12. 清空数组
12.1 array.length属性
array.length是保存数组长度的属性。 除此之外，array.length是可写的。 如果咱们写一个小于当前长度的array.length = newLength，多余的元素从数组中移除。 如下所示：使用array.length = 0删除数组中的所有项目：
var nums = [1, 2, 3, 4];
nums.length = 0;
console.log(nums); // []
12.2 array.splice() 方法
array.splice(fromIndex[, removeCount[, item1[, item2[, ...]]]])从数组中删除元素，并插入新的元素。 如果removeCount参数被省略，那么array.splice()将删除从fromIndex开始的数组的所有元素。咱们使用它来删除数组中的所有元素：
var nums = [1, 2, 3, 4];
nums.splice(0);
console.log(nums); // []
13. 填充数组
13.1 array.fill() 方法
**array.fill( value [, sindex[, eindex]])**用从sindex到eindex的值填充数组(不包括eindex本身)。sindex可选参数默认为0,eindex可选参数默认为array.length。 例如，使用用零值填充数组：
var nums = [1, 2, 3, 4];
nums.fill(0);
console.log(nums); // [0, 0, 0, 0]
不仅如此，还可以使用**Array( length ).fill ( value)**来初始化特定长度和初始值的数组。
var nums = Array(4).fill(0);
console.log(nums); // [ 0, 0, 0, 0 ]
array.fill() 会改变原数组。
13.2 Array.from() 函数
Array.from() 有助于初始化带有对象的特定长度的数组：
var objs = Array.from(Array(4), () => {
return {};
});
console.log(objs); // [ {}, {}, {}, {} ]
14. 数组的扁平化
14.1 array.flat()方法
**array.flat([depth])**方法通过递归扁平属于数组的项直到一定深度来创建新数组。 depth可选参数默认为1：
var arrs = [0, [1, 2, 3], [4, 5, 6]];
var flatArr = arrs.flat();
console.log(flatArr); // [ 0, 1, 2, 3, 4, 5, 6 ]
array.flat() 创建一个新数组，而不会改变原始数组。
15. 数组的排序
15.1 array.sort() 方法
array.sort([callback])方法对数组的元素进行排序。 可选参数callback(a, b)是一个自定义排序顺的回调函数。如果比较callback(a, b)返回的结果： 如果 a小于b，在排序后的数组中a应该出现在b之前，就返回一个小于0的值。 如果a等于b，就返回0。 如果a大于b，就返回一个大于0的值。 如下所示，对数组 numbers 时行排序
var nums = [4, 3, 1, 2];
nums.sort();
console.log(nums); // [ 1, 2, 3, 4 ]
numbers.sort() 以升序对数字进行排序。 使用比较函数，让偶数排在奇数前面：
var nums = [4, 3, 1, 2];
nums.sort((n1, n2)=>{
if (n1 % 2 === 0 && n2 % 2 !== 0) {
return -1;
}
if (n1 % 2 !== 0 && n2 % 2 === 0) {
return 1;
}
return 0;
});
console.log(nums); // [ 4, 2, 3, 1 ]
array.sort() 会改变原数组。
结语
1.该文章内容参考一些大佬的文章，MDN等文档，咱只是整理了下想用的时候好用些；
2.如果我的笔记有更新也会更新文章，大家要是有什么想法欢迎来找我；
