ES6新增的数组方法整理总结分享

1、迭代遍历方法

1.1 forEach() 

array.forEach(function(value, [index], [arr]))

传入一个函数，函数参数依次为 value、index、arr

• value：数组当前项的值（必填）
• index：数组当前项的索引（可选）
• arr：数组对象本身（可选，一般不选）

 let arr = [1, 2, 3, 4]
 var sum = 0
 arr.forEach(function(value, index) {
     sum += value
 })
 console.log(sum);  // 10

 1.2 map()

map() 和 forEach() 的区别就是 map() 会返回一个新数组

 let arr = [1, 2, 3, 4]
 var newArr = arr.map(function(value, index) {
     return value * 2
 })
 console.log(newArr); // [ 2, 4, 6, 8 ]

1.3 filter()

filter() 方法主要用于筛选数组，会创建一个新的数组

 array.filter(function(value, [index], [arr]))

新方法中的元素是通过指定数组中符合条件的所有元素

• value：数组当前的值
• index ：数组当前的索引
• arr：数组对象本身（一般省略不写）

 let arr = [1, 2, 3, 4]
 var newArr = arr.filter(function(value, index) {
     return value % 2 == 0
 })
 console.log(newArr); // [ 2, 4]

 1.4 some()

some() 方法用于检测数组中的元素是否满足指定条件，通俗一点 查找数组中是否有满足条件的元素

 array.some(function(value, [index], [arr]) {})

注意：

• 返回值是布尔值，如果查找到满足条件的，返回true；否则返回false
• 找打第一个满足条件的元素之后，终止循环，不再查找

 let arr = [1, 2, 3, 4]
 var newArr = arr.some(function(value, index) {
     return value % 2 == 0
 })
 console.log(newArr); // true

1.5 every()

类似some()，但是需要全部满足才会返回true

 let arr = [1, 2, 3, 4]
 var newArr = arr.every(function(value, index) {
     return value % 2 == 0
 })
 console.log(newArr); // false

总结：

• filter()：返回满足条件的元素，生成一个新数组
• some()：查找是否有满足条件的元素，有则返回true；没有则返回 false
• every()：检查是否所有元素均满足条件，是则返回true；否则返回false

2、实例方法 

2.1 find()

用于找出第一个满足条件的成员，如果找到了就返回该成员，否则返回undefined

语法：

 arr.find(function(value, key) {});

栗子：

 let arr = [1, 2, 3, 4]
 // 只获取第一个符合条件的对象
 var value = arr.find(function(value, index) {
     return value % 2 == 0
 })
 console.log(value); // 2

2.2 findIndex()

findIndex() 用于找出第一个符合条件的数组成员的位置，如果没有找到返回-1

语法与find() 一样

 let arr = [1, 2, 3, 4]
 var index = arr.findIndex(function(value, index) {
     return value % 2 == 0
 })
 console.log(index); // 1

 let arr = [1, 2, 3, 4, 2]
 console.log(arr.includes(2, 2)); // true

2.3 reduce()

reduce()：对数组中的每个元素进行累加，返回一个新的值，可以传入初始值

 arr.reduce(function(tmp, value, [index]) {},  [startValue])

• tmp：上一次的累加值，初始值为外部传进去的初始值 startValue，若没传默认是数组第一个值
• value：数组元素；若累加值tmp为数组第一个值，则value为从数组第二个值开始
• index：数组索引（可选）
• startValue：外部传入的初始值（可选）

 let arr = [1, 2, 3, 4]
 let result = arr.reduce(function(tmp, value, index) {
     // 返回数组元素的和 tmp的初始值为10
     return tmp + value
 }, 10)
 console.log(result);  // 20

不传初始值

 let arr = [1, 2, 3, 4]
 let result = arr.reduce(function(tmp, value, index) {
     // tmp的初始值为数组第一个值 1，之后就是累加
     console.log(tmp);  // 1 3 6
     // index 和 value 从数组第二个值开始
     console.log(index + ':' + value);  // 1:2 2:3 3:4
     return tmp + value
 })
 console.log(result); // 20

reduce() 更像是递归函数，我们来看一下计算数组平均值

 let arr = [1, 2, 3, 4]
 let result = arr.reduce(function(tmp, value, index) {
     // 当不是最后一个数的时候，进行元素累加
     if (index != arr.length - 1) {
         return tmp + value
             // 进行最后一个元素累加的时候
     } else {
         // 此时value为4
         return (tmp + value) / arr.length
     }
 })
 ​
 console.log(result); // 2.5

2.4 fill()

fill() 静态填充数组，即用一个元素填充数组，被填充的数组元素都是一样的

 arr.fill(value, startIndex, [endStart]);

1. value ：要填充的值
2. startIndex：开始填充的数组位置（必选）
3. endIndex：结束填充的数组位置（不包括该位置， 可选）

 let arr = [1, 2, 3, 4]
 arr.fill('张三', 1, 3)
 console.log(arr);  // [ 1, '张三', '张三', 4 ]

2.5 includes()

表示某个数组是否包含给定的值，返回布尔值

 arr.includes(value, [startIndex]);

1. arr ：表示数组
2. value：表示要判断的元素
3. startIndex：开始查找的元素位置（可选）

  let arr = [1, 2, 3, 4, 2]
  // 从索引值为2的地方开始查找
  console.log(arr.includes(2, 2)); // true

2.6 copyWithin()

copyWithin() 复制数组中的一系列元素到该数组的某个起始位置

注意：复制的一系列元素会代替数组原位置的元素，数组的长度依旧是不变的

 arr.copyWithin(index, startIndex, [endIndex])

1. index：要粘贴到数组的某个位置
2. startIndex：复制数组元素的起始位置
3. endStart：结束数组的元素位置（不包括该位置，可选）

 let arr1 = [1, 2, 30, 40, 50];
 // 从第3个开始复制
 arr1.copyWithin(0, 2);
 console.log(arr1); // [30, 40, 50, 40, 50]

 3、静态方法

3.1 Array.of()

根据传入的参数创建数组

 let arr = Array.of(1, 2, 3, 4)
 console.log(); // [ 1, 2, 3, 4 ]
 ​
 // 可用于复制数组
 let arr = [1, 2, 3, 4]
 let newArr = Array.of(...arr)
 console.log(newArr);

3.2 Array.from()

将伪数组或可遍历对象转换为真正的数组

 Array.from(arrLike, [function]);

1. arrLike：接收伪数组或可遍历对象
2. [function]：接收一个参数，对元素进行处理后再放入数组中（可选）

 // 将字符串转换为数组
 let arr = Array.from('zxc')
 console.log(arr); // [ 'z', 'x', 'c' ]

---

将字符串转换为数组有两种方法：

1. 字符串.split(分隔符)
2. Array.from(字符串)

通过function对元素进行处理

 let arr = [1, 2, 3, 4]
 let newArr = Array.from(arr, function(item) {
     return item * 2
 })
 console.log(newArr); // [ 2, 4, 6, 8 ]

Array.from(arr) 其实是一种浅拷贝