今天给大家介绍一些es6新增的常用数组方法。
1. 映射数组 map()方法
目的：为了操作原数组，但不改变原数组的值
作用：map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值，不会对空数组进行检测
返回值: 新数组，一定和原始数组长度一样，不改变原数组
格式：数组.map(function(item,index,arr) { })
① item 数组的每一项（元素）
② index 数组的每一项下标（索引号）
③ arr 当前元素所在的数组
1.1 实例操作
let arr = [1, 2, 3, 4];
let narr = arr.map(function(item, index, arr) {
console.log(item, index, arr); // 输出内容分别为数组元素，下标，原数组
return item + 10; // 对原数组元素进行加10操作，这样原来的数组元素的值都会加10
})
console.log(narr); // [11, 12, 13, 14] 新数组元素的值比原数组都大10
console.log(arr); // [1, 2, 3, 4] 不改变原数组
注意：
① map()方法里面是是函数，这个函数有3个形参item,index,arr，分别代表数组的每一个元素、对应元素的下标、当前操作的数组。实际运用中可以根据需要使用形参，不需要的可以不写，arr这个参数很少使用，所以基本不写。
② 要使用return 返回操作的结果
2. 过滤数组 filter() 方法
作用：filter() 方法是过滤原数组中的数据，把满足条件的放在新数组中
返回值：新数组，里面是所有原始数组中满足条件的项， 不改变原数组
格式：数组.filter(function(item,index,arr) { })
① item 数组的每一项（元素）
② index 数组的每一项下标（索引号）
③ arr 当前元素所在的数组
2.1 实例操作
let arr = [1, 2, 3, 4, 5];
let filter1 = arr.filter(function(item, index, arr) {
return item > 2; // 返回满足条件的数组元素，并存入新数组
})
console.log(filter1); // [3, 4, 5]
过滤数组filter() 方法和映射map() 方法用法相似，唯一不同的是该方法返回的是满足条件的原数组的元素，并存入新数组，如果没有满足条件的元素，则返回一个空数组。
3. some() 方法 和 every() 方法
3.1 some() 方法
作用：some() 方法 用于检测数组中的元素是否有某些满足指定条件（通过函数提供）
返回值：是一个布尔值
① 有满足条件的，返回true
② 没有满足条件，返回false
格式：数组.every(function(item,index,arr) { })
① item 数组的每一项（元素）
② index 数组的每一项下标（索引号）
③ arr 当前元素所在的数组
3.2 some()方法实例操作
let arr = [1, 2, 3, 4, 5];
let some1 = arr.some(function(a, b, arr) { // a表示数组元素，b表示数组元素下标
return a > 4; // 检测是否有满足大于4的元素，如果有返回true, 没有返回false
})
console.log(some1); // true 因为存在元素5满足条件，所以为true
some()方法的用法和前面两种方法类似，区别在于返回值，这里的返回值是boolean值，存在满足条件的为true，不存在则为false。
3.3 every() 方法
作用：every() 方法 用于检测数组所有元素是否都符号指定条件（通过函数提供）
返回值：是一个布尔值
① 有满足条件的，返回true
② 没有满足条件，返回false
格式：数组.every(function(item,index,arr) { })
① item 数组的每一项（元素）
② index 数组的每一项下标（索引号）
③ arr 当前元素所在的数组
3.4 every() 方法实例操作
let arr = [1, 2, 3, 4, 5];
let every1 = arr.every(function(a, b, arr) { // a表示数组元素，b表示数组元素下标
return a > 4; // 检测是否数组中所有元素都满足大于4，如果是返回true, 不是返回false
})
console.log(every1); // false 因为不是所有元素都满足条件，所以为false
3.5 some()方法 和 every() 方法的区别：
some() 方法用于判断数组中某一个元素，只要存在有元素满足条件即为true;
every() 方法用于判断数组中所有元素，必须所有元素满足条件才为true.
4. fill() 方法
作用：fill() 方法使用指定数据填充数组，并且替换对应的元素（简言之是替换内容）
前提：数组要有length
返回值：填充好的数组（新数组），改变原数组
格式：数组.fill(要填充的数据，开始索引，结束索引);
① 要填充的数据：用什么数据填充数组里面的每一位
② 开始索引：从哪一个下标开始，默认值是0
③ 结束索引：填充到哪一个下标位置结束，默认是到 末尾，包前不包后
4.1 实例操作
let arr = [1, 2, 3, 4, 5];
arr.fill('a', 2, 4);
console.log(arr); // 1，2，a, a, 5 要头不要尾，即从而2开始到4结束，但是4这个元素不被填充替换
let arr1 = [1, 'string', 'null', 'true', null, true];
arr1.fill('b', 3); // 两个参数，则默认填充替换到最后
console.log(arr1); // [1, "string", "null", "b", "b", "b"]
arr1.fill('c', 3, 10); // 结束索引超过数组长度不替换，直接忽略
console.log(arr1); // [1, "string", "null", "c", "c", "c"]
5. copyWithin() 方法
作用：copyWithin() 方法 使用数组里面的内容替换数组里面的内容（简言之是替换内容，但是只能使用自身元素替换）
格式：数组.copyWithin(目标位置，开始索引，结束索引);
① 目标位置：当你替换内容的时候，从哪一个索引位置开始替换
② 开始索引：数组中哪一个索引位置开始当作替换内容，默认值是0
③ 结束索引：数组中哪一个索引位置结束当作替换内容，默认是末尾，包前不包后
5.1 实例操作
let arr = [1, 2, 3, 4, 5];
arr.copyWithin(2, 3, 4); // 表示从索引2开始替换，从索引3开始作为替换内容，直到索引4结束，但是不包括索引4的值，即这里只有4被作为替换内容，替换索引2的值
console.log(arr); // [1, 2, 4, 4, 5]
let arr1 = [1, 'string', 'null', 'true', null, true];
arr1.copyWithin(2); // 只有一个参数时，则表示开始替换的位置，那么替换的内容从下标为0开始依次往后，直到最后一个元素被替换为止
console.log(arr1); // [1, "string", 1, "string", "null", "true"]
注意：替换值有几个，那么被替换的值就有几个，比如上述第一个数组arr中，替换内容只有4，那么就只能替换索引2这一个元素为4；而第二个数组arr1中，默认替换内容为从索引0开始到末尾，而替换位置从索引2开始，那么替换内容的个数大于被替换的值的个数，因此，可以把从索引2开始，后面的值全部替换一遍。
6. find() 方法 和 findIndex() 方法
6.1 find()方法
作用：find() 方法通过测试（函数内判断）查找到数组中第一个满足条件的元素的值
返回值：返回查找到的那个数据，如果找不到则返回undefined
格式：数组.find(function(item,index,arr) { });
① item 数组的每一项（元素）
② index 数组的每一项下标（索引号）
③ arr 当前元素所在的数组
6.2 find()方法实例操作
let arr = [1, 2, 3, 4, 5];
let find = arr.find(function(a, b, c) {
return a <= 5; //这句表示返回满足条件a<=5的元素
})
console.log(find); // 1 但是find()方法只返回满足条件的第一个元素
注意：如果有多个满足条件的元素，只返回满足条件的第一个元素。
6.3 findIndex() 方法
作用：findIndex() 方法通过测试（函数内判断）查找到数组中第一个满足条件元素的下标
返回值：查找到的那个数据的下标，如果找不到返回-1
格式：数组.findIndex(function(item,index,arr) { })
① item 数组的每一项（元素）
② index 数组的每一项下标（索引号）
③ arr 当前元素所在的数组
6.4 findIndex() 方法实例操作
let arr = [1, 2, 3, 4, 5];
let findIndex = arr.findIndex(function(a, b, c) { // a表示数组元素，b表示元素下标，c表示数组
// return a == 0; // 表示找出数组元素为0的元素下标，由于找不到，所以返回-1
return a == 2; // 表示找出数组元素为2的元素下标
})
console.log(findIndex); // 返回下标1
注意：findInde()方法的作用和indexOf()方法类似，都是可以获取到指定条件的第一个元素的下标，如果找不到，则返回-1。但是二者的用法不一样，要注意区分。
7. flat() 方法 和 flatMap() 方法
这两个方法都是用于拍平数组的，所谓拍平数组是原数组里面的元素又是一个数组，即数组嵌套数组，这时使用该方法可以让数组变成一维的，即数组元素不再是数组形式。
7.1 flat() 方法
作用： flat() 方法是拍平数组(就是整理原数组的元素， 然后放在一个新的数组中)
返回值： 拍平以后的数组
语法： 数组.flat(数字)
数字： 表示扁平化多少层， 默认是1， 可以填其他正整数，也可以填Infinity（无穷大）
7.2 flat() 方法实例操作
// arr这个数组里面的元素又是数组，称为二维数组
let arr = [
[1, 2, 3],
['a', 'b'],
[4, 5, 6]
]
// 使用flat()方法可以让arr数组元素不再是数组
let flat1 = arr.flat(); // 不填数字，默认拍一层
console.log(flat1); //[1, 2, 3, "a", "b", 4, 5, Array(2), Array(2)]
let arr1 = [
[1, 2, 3],
['a', 'b'],
[4, 5, [6, 7],
[8, 9] //数组元素中又嵌套数组，即arr1变为了三维数组
]
]
let flat2 = arr1.flat(1); // 数字为1，表示拍1层，由于原始是三维数组，所以无法全拍平
console.log(flat2); // [1, 2, 3, "a", "b", 4, 5, 6]
注意：使用flat()方法要起效果的前提条件是：数组是个多维数组，不然无需拍平。如果是n维数组，要想全拍平，则数字需要填 n-1 ，如果嫌弃计算麻烦，直接填Infinity即可
7.3 flatMap() 方法
作用： flatMap() 方法 ，拍平数组，但只能拍一层，并且一边拍平，一边映射；也可以一边拍平，一边过滤
返回值： 一个新数组
语法： 数组.flatMsp(function(item,index,arr) { })
7.4 flatMap() 方法实例操作
let arr2 = [
[1, 2, 3],
['a', 'b', [22, 33, 'tre']],
[4, 5, 6]
]
let narr = arr2.flatMap(function(a, b, c) {
return a.map(function(a, b, c) { // 一边拍平，一边映射，对值进行映射
return a + 2; // 映射得到的数组比原数组的值大2
})
});
console.log(narr); // [3, 4, 5, "a2", "b2", "22,33,tre2", 6, 7, 8]
注意： flatMap() 方法不仅可以实现拍平（只拍平一层），而且可以同时进行映射数组。
8. reduce() 方法
作用：reduce() 方法 接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。
格式：数组.reduce(function(prev,currentValue,currentIndex,arr) { },初始值)
① prev：表示数组的第一个元素
② currentValue：表示数组的第二个元素
③ currentIndex：表示数组的第二个元素下标
④ arr：表示整个数组
8.1 实例操作
// 使用for循环对数组元素的值进行累加求和
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
let sum = 0;
for (var i = 0; i < arr.length; i++) {
sum += arr[i];
}
console.log(sum); // 45
// 没有初始值
let arr1 = [1, 2, 3, 4, 5, 6, 7, 8, 9];
let sum1 = arr1.reduce(function(a, b, index, arr1) {
return a + b;
})
console.log(sum1); // 45
// 有初始值，相当于在累加之前有个初始值
let sum2 = arr1.reduce(function(a, b) { // 用不上的形参可以省略不写
return a + b;
}, 11)
console.log(sum2); // 56， 相当于初始值+数组元素累加和=11+45=56
通过以上方法的介绍，可以看出新增方法基本上都和函数结合使用，所以对函数的知识点要非常通透，这样再理解这些方法就会轻松许多，方法很多，适合自己的就是最好的，不一定都要记住，只要知道有该方法，明白作用即可。到时需要的时候再去网站上查找具体用法就行。
网址为：MDN Web Docs (mozilla.org)，可以自行查找各种方法的用法。
