数组是 JS 中广泛使用的数据结构。数组对象提供了大量有用的方法，如array. forEach()、array.map()等来操作数组。 在实战中，我经常对数组可能的操作和相应采用哪个更好的方法不知所措，所以本文就列出 15 种常用数据方法，重温加强记忆一下。
1. 数组的遍历
1.1 for...of循环
for...of 循环遍历数组项，比如遍历一个颜色列表：
let color = ['red','orange','yellow','green','blue'];
for(let i of color){
console.log(i);
}
// 'red'
// 'orange'
// 'yellow'
// 'green'
// 'blue'
可以用 break 语句停止遍历
1.2 for循环
for...in使用递增的索引变量遍历数组项
let color = ['red','orange','yellow','green','blue'];
for(let i = 0; i < color.length; i++){
console.log(color[i]);
}
// 'red'
// 'orange'
// 'yellow'
// 'green'
// 'blue'
此方法同样可以用 break 语句停止遍历，需要注意的是for循环和for...in循环的区别，for...in循环会遍历数组所有可枚举属性，包括原型，所以不要用for..in遍历数组，这也是for...in与for...of的区别之一。
1.3 Array.forEach()循环
forEach循环通过在每个数组项上调用callback函数进行遍历，callback函数的参数依次为当前项、当前项的索引、当前遍历的数组：
let color = ['red','orange','yellow'];
color.forEach((item,index,arr)=>{
console.log(item, index);
});
// 'red' 0
// 'orange' 1
// 'yellow' 2
forEach循环无法中断
2. 数组的映射
2.1 Array.map()方法
Array.map()方法通过在数组每个项上调用callback的结果产生一个新数组，callback函数的参数依次为当前项、当前项的索引、当前遍历的数组，如下将数组值乘以2：
let arr = [2,4,5];
let arr2 = arr.map((item,value)=>{
return item *2;
});
// arr2 => [4,8,10]
array.map()创建一个新的映射数组，而不改变原始数组。
2.2 Array.from()方法
Array.from()方法通过在每个数组项上使用callback 调用结果来创建一个新数组。
let arr = [2,4,5];
let arr2 = Array.from(arr,(item)=>{
return item*2
});
// arr2 => [4,8,10]
1.Array.from()创建一个新的映射数组，而不改变原始数组。
2.Array.from()更适合从类似数组的对象进行映射
3. 数组的简化
3.1 Array.reduce()方法
Array.reduce()通过callback函数将数组简化为一个值，在每次遍历中的callback使用用参数调用的:累加器，当前项，索引和数组本身且应该返回累加器，如数组求和：
let arr = [2,4,5];
let sum = arr.reduce((accumulator, number)=>{
console.log(accumulator, number)
return accumulator + number
},0)
// sum => 11
4. 数组的连接
4.1 array.concat()方法
将一个或多个数组连接到原数组，如下
let arr = ['jack','ace'];
let arr2 = ['taro','seven'];
let arr3 = arr.concat(arr2);
// arr3 => ['jack','ace','taro','seven']
concat()创建一个新的数组，而不改变原来的数组
array.concat接受多个要连接的数组。
4.2 展开操作符
展开操作符...用于将数组转换成以逗号分隔的参数序列：
console.log(...[1,2,5,6]);
// 1,2,5,6
可以用展开操作符和数组字面量连接数组：
[...[13,5,7],...[65,174]];
// [13,5,7,65,174]
5. 获取数组片段
5.1 array.slice() 方法
array.slice方法返回一个数组片段，该方法从fromIndex开始，到toIndex结束（不包括），fromIndex默认为0，toIndex默认为array.length。
let names = ['zoffy','seven','taro'];
let newNames = names.slice(1,2);
// newNames => ['seven']
array.slice()创建一个新数组，而不改变原始数组。
6. 数组的拷贝
6.1 展开操作符
拷贝数组的一种简单方法是使用展开运算符：const clone = [... array]，如下所示，拷贝 colors 数组：
let colors = ['white', 'black', 'gray'];
let clone = [...colors];
clone; // => ['white', 'black', 'gray']
colors === clone; // => false
[...array]创建一个浅拷贝。
6.2 array.concat()方法
[].concat(array)是另一种拷贝数组的方法。
const colors = ['white', 'black', 'gray'];
const clone = [].concat(colors);
clone; // => ['white', 'black', 'gray']
colors === clone; // => false
[].concat(array)创建一个浅拷贝。
6.3 array.slice() 方法
array.slice()是另一种拷贝数组的方法。
const colors = ['white', 'black', 'gray'];
const clone = colors.slice();
clone; // => ['white', 'black', 'gray']
colors === clone; // => false
colors.slice() 创建一个浅拷贝。
7. 查找数组
7.1 array.includes() 方法
array.includes()返回一个布尔值，array是否包含itemToSearch。可选参数fromIndex，默认为0，表示开始搜索的索引。如下所示：判断2和99是否存在于一组数字中：
const numbers = [1, 2, 3, 4, 5];
numbers.includes(2); // => true
numbers.includes(99); // => false
7.2 array.find() 方法
array.find(predicate) 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。
如下，找出数组中第一个偶数：
const numbers = [1, 2, 3, 4, 5];
function isEven(number) {
return number % 2 === 0;
}
const evenNumber = numbers.find(isEven);
evenNumber; // => 2
7.3 array.indexOf() 方法
array.indexOf() 返回array中第一个出现的itemToSearch的索引。默认为0的可选参数fromIndex表示开始搜索的索引。
const names = ["小智", "前端小智", "老王", "小三"]
const index = names.indexOf('前端小智')
index // 1
如果找不到该项，则
array.indexOf(itemToSearch)返回-1
array.findIndex(predicate)是使用predicate函数查找索引的替代方法。
8. 查询数组
8.1 array.every() 方法
如果遍历的每个项都通过回调函数的检查则返回true否则返回false：
let list = [2,6,4,12];
let res = list.every((item)=>{
return item%2 === 0;
});
// res => true
8.2 array.some() 方法
如果每个项只要一个通过回调函数检查，则返回true。
let list = [1,3,4,13];
let res = list.every((item)=>{
return item%2 === 0;
});
// res=> true;
9. 数组的过滤
9.1 array.filter() 方法
array.filter方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。
let list = [1,2,4,5,8,10];
let res = list.filter(item=>{
return item%2 === 0;
});
// res => [2,4,8,10]
10. 数组的插入
10.1 array.push方法
将一个或多个项添加到数组的尾部，并返回数组的长度：
let list = [1,2,3];
let len = list.push(4,5);
// len => 5
// list => [1,2,3,4,5]
该方法会改变原数组
10.2 array.unshift方法
将一个或多个项添加到数组头部：
let list = [3,2,1];
let len = list.unshift(5,4);
// len => 5
// list =>
该方法会改变原数组；
插入顺序为从从右到左，即先在头部插入4，在插入5
11. 删除数组元素
11.1 array.pop方法
从数组中删除最后一个元素，并返回改元素：
let list = [1,2,3];
let res = list.pop();
// list => [1,2]
// res => 3
该方法会改变原数组
11.2 array.shift方法
从数组中删除第一个元素，然后返回该元素。
let list = [1,2,3];
let res = list.shift();
// list => [2,3]
// res => 1
该方法会改变原数组
11.3 array.splice 方法
从数组中删除元素，并加入新的元素：
let list = [1,2,3,4,5,6];
let res1 = list.splice(2,4);
// 从索引2处开始，删除4个元素
// list => [1,2]
// res1 => [3,4,5,6]
let res2 = list.splice(1,1,'8');
// list => [1,8]
该方法会改变原数组
12. 清空数组
12.1 array.length属性
array.length是保存数组长度的属性。 除此之外，array.length是可写的。
如果写一个小于当前长度的array.length = newLength，多余的元素从数组中移除：
let list = [1,2,3];
list.length = 0
12.2 array.splice方法
如果第二个参数被省略，那么array.splice()将删除从第一个参数索引处开始的数组的所有元素。咱们使用它来删除数组中的所有元素：
let list = [1,2,3];
list.splice(0);
// list => []
13. 填充数组
13.1 array.fill方法
改方法接受三个参数，分别为填充值，填充起始位置，填充结束位置前一位（不包括本身）：
let list = [1,2,3,4];
list.fill(0,0,2);
// list => [0,0,3,4]
list.fill(5);
// list => [5,5,5,5]
array.fill会改变原数组
13.2 Array.from方法
let list = [1,2,3];
let res = Array.from(list,(item)=>{
return 0
});
// res => [0,0,0]
14. 数组的扁平化
14.1 array.flat方法
array.flat([depth])方法通过递归扁平属于数组的项直到一定深度来创建新数组。depth可选参数默认为1：
let list = [1,[2,3],4,[5,6,7]];
let res = list.flat();
// res => [1,2,3,4,5,6,7]
array.flat()创建一个新数组，而不会改变原始数组。
15. 数组的排序
15.1 array.sort方法
array.sort([compare])方法对数组的元素进行排序。
如果没有指明
compare，那么元素会按照转换为的字符串的诸个字符的Unicode位点进行排序。
可选参数compare(a, b)是一个自定义排序顺的回调函数。如果比较compare(a, b)返回的结果：
- 如果
a小于b，则a会排在b的前面，此时需要返回一个负数； - 如果
a大于b，则a会排在b的后面，此时需要返回一个正数； - 如果
a等于b，a和b的相对位置不变。
let list = [4,2,1,7,5];
list.sort((a,b)=>{
return a - b
})
// list => [1,2,4,5,7]
array.sort()会改变原数组。
