js遍历数组forEach,map,filter,some,ev

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