这一节我们一起整理一下数组的遍历，目前来说遍历数组的方式非常多，首先我们来列举一下有哪些：
- for
- for-in
- for-of
- forEach
- map
- some
- every
- filter
- find
- findIndex
- reduce
- reduceRight
- keys
- entries
有些我们之前就认识，有些也是我最近学到的
按照惯例，我们需要先定义一个被测试的数组：
let arr = Array.of(1, 'str', false, []);
// 注意这句，我目的是让索引值为4的那一项为空值
arr[5] = {};
// 所以我们得到的数组结构为
[1, 'str', false, [], , {}]
我们正式开始：
for
for (let i = 0, len = arr.length; i < len; i++) {
console.log(i, arr[i])
}
打印的结果为：
0 -> 1
1 -> 'str'
2 -> false
3 -> []
4 -> undefined
5 -> Object {}
根据结果我们分析为：
- 索引值
i为Number类型 - 遍历过程中如果遇到空值，依然会执行，返回undefined
for-in
for (let i in arr) {
console.log(i, arr[i])
}
打印的结果为：
'0' -> 1
'1' -> 'str'
'2' -> false
'3' -> []
'5' -> Object {}
大体上和for循环比较类似，但还是有所区别的
- 索引值
i为String类型（这点我也不是很懂为什么...） - 遍历过程中如果遇到空值，则会跳过
for-of
for (let i of arr) {
console.log(i)
}
打印的结果为：
1
'str'
false
[]
undefined
Object {}
- 与前两个不同的是，该循环的
i是被遍历数组的键值 - 遍历过程中如果遇到空值，依然会执行，返回undefined
forEach
arr.forEach((value, index, arr) => {
console.log(value)
})
打印的结果为：
1
'str'
false
[]
Object {}
- 首先，forEach无返回值，所以回调函数也不需要return
- 回调函数的参数分别为当前的值(value), 索引值(index), 被遍历的数组(arr)
- 遍历过程中如果遇到空值，跳过
map
let result = arr.map((value, index, arr) => {
console.log(value)
return value
})
打印的结果为：
1
'str'
false
[]
Object {}
- map函数会根据回调函数中return的值（为新数组的值）得到一个新的数组
- 回调函数的参数分别为当前的值(value), 索引值(index), 被遍历的数组(arr)
- 遍历过程中如果遇到空值，跳过
所以如果需要根据原数组的值得到一个相关联的新数组时，比较适合使用map
例：
let newarr = [1, 2, 3].map(value => value * 2)
以上代码可以得到这样一个数组：
[2, 4, 6] // newarr
some
some用于检测数组中的某一项是否符合条件
let result = arr.some((value, index, arr) => {
return typeof value == 'string'
})
根据被测试的这个数组，我们得到的结果是：
true // result
因为索引值为1的那一项确实为String类型
- 返回Boolean类型的值
- 回调函数的参数分别为当前的值(value), 索引值(index), 被遍历的数组(arr)
- 回调函数需要返回
true或者false - 遍历过程中如果某个回调函数返回
true时，停止遍历，result得到true - 如果直到遍历结束所有回调函数均返回
false，那么result便为false - 遍历过程中如果遇到空值，跳过
every
every与some相反，用于检测数组中的每一项是均否符合条件
let result = arr.every((value, index, arr) => {
return typeof value == 'string'
})
很显然，根据被测试的这个数组，我们得到的结果是：
false // result
看懂some之后every其实也就明白是做什么的了
- 返回Boolean类型的值
- 回调函数的参数分别为当前的值(value), 索引值(index), 被遍历的数组(arr)
- 回调函数需要返回
true或者false - 遍历过程中如果某个回调函数返回
false时，停止遍历，result得到false - 如果直到遍历结束所有回调函数均返回
true，那么result便为true - 遍历过程中如果遇到空值，跳过
filter
let result = arr.filter((value, index, arr) => {
return typeof value == 'object'
})
打印的结果为：
[Array[0], Object {}] // result
- filter会根据回调函数中return的值（Boolean值）得到一个新的数组
- 回调函数需要返回一个Boolean值，为
true时，filter的结果数组中将会得到该值，为false时跳过 - 回调函数的参数分别为当前的值(value), 索引值(index), 被遍历的数组(arr)
- 遍历过程中如果遇到空值，跳过
说下filter与map的区别：
- 第一点当然是回调函数返回值的不同，filter的回调函数返回布尔值，map的回调函数是将新数组所需要的值返回出来，所以filter只能选择要或者不要，而map可以给值做相应的调整，比如数组
[1, 2, 3]我要得到一个新数组[2, 4, 6]时，使用map会很方便的做到。 - 第二点是filter可以舍弃掉值，即比如数组
[1, 2, 3]我们可以做到得到一个内容[2, 3]的数组，只要在回调函数中return value > 1即可，而map做不到，正常情况下被操作的数组与得到的新数组的length相等，不过length这里在有数组中有空值的情况下会不等，因为filter会跳过空值，所以本例子中被测试数组的length为6，而filter即使回调函数全部返回true，得到的新数组的length也为5。
find
find顾名思义是要找什么东西，所以不难想象find的返回值是被遍历数组中的某一项，我们来试试从测试数组中找String类型的值：
let result = arr.find((value, index, arr) => {
return typeof value == 'string'
})
打印的结果为：
'str' // result
有一点要注意的是，他只能从头开始找到最先找到的那个，并非全部找出来
所以以下这种情况下只会找到1：
let res = [1, 2, 3, 4, 5].find(val => val < 9) // res -> 1
- find会根据回调函数中return的值（Boolean值）得到
return true的那个键值 - 当回调函数返回
true之后，停止遍历，所以只会得到一个结果 - 回调函数的参数分别为当前的值(value), 索引值(index), 被遍历的数组(arr)
- 遍历过程中如果遇到空值，依然会执行，返回undefined
findIndex
看完find之后，我相信findIndex也就明白了，用法是几乎一样
let result = arr.findIndex((value, index, arr) => {
return typeof value == 'string'
})
因为'str'的索引值为1，所以打印的结果为：
1 // result
- findIndex会根据回调函数中return的值（Boolean值）得到
return true的那个键值的索引值 - 当回调函数返回
true之后，停止遍历，所以只会得到一个结果 - 回调函数的参数分别为当前的值(value), 索引值(index), 被遍历的数组(arr)
- 遍历过程中如果遇到空值，依然会执行，返回undefined
reduce
reduce比较有意思，我们先看测试代码再做分析：
let arr2 = [1.2, 3.3, 5.4, 3.2, 5.3, 4.1, 4.9];
let result = arr2.reduce((prev, next) => {
let p = Math.abs(prev - 5), n = Math.abs(next - 5)
return p < n ? prev : next
})
这段代码的意思是这样的：
从arr2中找到最接近5的那个值回调函数接收2个值
第一次遍历时传递的是索引值为0和1的两个值，本例子中实为1.2与3.3，然后回调函数中实为返回了3.3这个值
第二次遍历，注意，传递的值变成了前一次遍历return的值与下一个索引值相关的值，既3.3与索引值为2的5.4，然后我判断下来说5.4更接近5，所以返回了5之后的遍历以此类推，直到结束
所以result最终结果为：
4.9 // result
还有个reduceRight方法我就不写了，我测试下来和reduce区别仅在于reduceRight是从数组最末位倒序执行
keys
数组的实例方法，返回一个数组的遍历器：
for (let i of arr.keys()) {
console.log(i)
}
打印结果为：
0
1
2
3
4
5
- 可以用for of取到数组的索引
- 遍历过程中如果遇到空值，会执行
- 和for循环表现一致
entries
同样也是数组的实例方法，返回一个数组的遍历器：
for (let i of arr.entries()) {
console.log(i)
}
打印结果为：
[0, 1]
[1, 'str']
[2, false]
[3, Array [0]]
[4, undefined]
[5, Object {}]
- 可以用for of取到数组的索引和键值
- 循环得到的结果是Array类型，[0]为索引，[1]为键值
- 遍历过程中如果遇到空值，会执行，键值为undefined
当然你要是喜欢，可以用解构赋值的方式：
for (let [index, value] of arr.entries()) {
console.log(index, value)
}
关于数组的解构赋值这里就不多说了...
有一点要提的是，关于空值的处理，实在是没什么规律可以找，有些处理方式是跳过，有些则是返回undefined，所以保险起见，还是尽量别在数组中出现空值的情况
好了，以上学习资料仅供参考，如果有坑请以各大官方资料为准...
