es5和es6新增数组迭代方法：
- forEach
- map
- forEach
- filter
- some
- every
- reduce / reduceRight
- find / findIndex
forEach
对数组中每个元素运行一次提供的函数
函数接收三个参数：
el 当前循环到的元素
index 当前循环元素的下标
arr 数组本身
后两个参数可选，没有返回值
const arr = [1, 2, 3]
arr.forEach((el, index, arr) => {
console.log(`${el}, ${index},`, arr)
})
// 输出
// 1, 0, [ 1, 2, 3, 4, 5 ]
// 2, 1, [ 1, 2, 3, 4, 5 ]
// 3, 2, [ 1, 2, 3, 4, 5 ]
map
该方法将原数组按照一定的规则（即提供的回调函数）映射为一个新数组
返回一个新数组，不改变原数组的值
const arr = [1, 2, 3]
const newArr = arr.map((el, index, arr) => {
return el * 2
})
console.log(newArr) // [ 2, 4, 6 ]
// 如果没有返回值将会返回undefined
const newArr = arr.map((el, index, arr) => {
// return el * 2
})
console.log(newArr) // [ undefined, undefined, undefined ]
filter
一般用过滤数组
对数组每一项进行运算，返回运算结果为true的元素
返回一个新数组，不改变原数组的值
const arr = [1, 2, 3, 4, 5]
const newArr = arr.filter((el, index, arr) => {
return el > 2
})
console.log(newArr) // [ 3, 4, 5 ]
some
返回boolean值
如果数组中有一项符合条件，就返回true否则返回false
const arr = [1, 2, 3, 4, 5]
const result = arr.some((el, index, arr) => {
return el > 2
})
console.log(result) // true
every
与some相反，需要数组中所有项都符合条件才返回true否则返回false
const arr = [1, 2, 3, 4, 5]
const result = arr.every((el, index, arr) => {
return el > 2
})
console.log(result) // false
reduce / reduceRight
reduce / reduceRight比上面的方法复杂一点，其语法如下
array.reduce(callback,[initialValue])
callback接收四个参数
-
accumulator上一次调用回调返回的值，或者是提供的初始值（initialValue） -
currentValue数组中正在处理的元素 -
currentIndex数组中正在处理的元素索引，如果提供了initialValue ，从0开始；否则从1开始。 -
array数组对象本身
reduce / reduceRight 方法中，第二个参数（initialValue）是可选的；
我们先看一个例子：
const arr = [1, 2, 3, 4]
const result = arr.reduce((a, b) => {
return a + b
})
console.log(result) // 10
接下来分析reduce是如何运行的：
const arr = [1, 2, 3, 4]
const result = arr.reduce((accumulator, currentValue, currentIndex, array) => {
console.log(accumulator, currentValue, currentIndex, array)
return accumulator + currentValue
})
console.log(result)
// output
// 1 2 1 [ 1, 2, 3, 4 ]
// 3 3 2 [ 1, 2, 3, 4 ]
// 6 4 3 [ 1, 2, 3, 4 ]
// 10
通过log看出callback被调用了三次，每次调用的参数和返回值如下：
| callback | accumulator | currentValue | currentIndex | array | return |
|---|---|---|---|---|---|
| 第一次调用 | 1 | 2 | 1 | [ 1, 2, 3, 4 ] | 1 |
| 第二次调用 | 3 | 3 | 2 | [ 1, 2, 3, 4 ] | 6 |
| 第三次调用 | 6 | 4 | 3 | [ 1, 2, 3, 4 ] | 10 |
上面的是没有传入第二个参数initialValue的情况，接下来给第二个参数传入10
const arr = [1, 2, 3, 4]
const result = arr.reduce((accumulator, currentValue, currentIndex, array) => {
console.log(accumulator, currentValue, currentIndex, array)
return accumulator + currentValue
}, 10)
console.log(result)
// output
// 10 1 0 [ 1, 2, 3, 4 ]
// 11 2 1 [ 1, 2, 3, 4 ]
// 13 3 2 [ 1, 2, 3, 4 ]
// 16 4 3 [ 1, 2, 3, 4 ]
// 20
通过log看出callback被调用了四次，每次调用的参数和返回值如下：
| callback | accumulator | currentValue | currentIndex | array | return |
|---|---|---|---|---|---|
| 第一次调用 | 10 | 1 | 0 | [ 1, 2, 3, 4 ] | 11 |
| 第二次调用 | 11 | 2 | 1 | [ 1, 2, 3, 4 ] | 13 |
| 第三次调用 | 13 | 3 | 2 | [ 1, 2, 3, 4 ] | 15 |
| 第三次调用 | 16 | 4 | 3 | [ 1, 2, 3, 4 ] | 20 |
从上面的表格可以看到currentIndex从0开始，accumulator的初始值为传入的第二参数
reduceRight与reduce类似，不同之处在于它是从最后一个值开始计算的。
const arr = [1, 2, 3, 4]
const result = arr.reduceRight((accumulator, currentValue, currentIndex, array) => {
console.log(accumulator, currentValue, currentIndex, array)
return accumulator + currentValue
})
console.log(result)
// output
// 4 3 2 [ 1, 2, 3, 4 ]
// 7 2 1 [ 1, 2, 3, 4 ]
// 9 1 0 [ 1, 2, 3, 4 ]
// 10
find / findIndex
find方法用于找出第一个符合条件的数组成员，饭后返回该成员
const arr = [1, 2, 3, 4, 5]
const result = arr.find((el, index, arr) => {
return el > 3
})
console.log(result) // 4
findIndex用法同find，不过findIndex返回第一个符合条件成员的下标
const arr = [1, 2, 3, 4, 5]
const index = arr.findIndex((el, index, arr) => {
return el > 3
})
console.log(index) // 4
