当面对一个数组的时候，我们经常需要对它进行遍历，从而让我们能够方便地对立面的每个元素进行操作
在开始正式内容之前，先来看看数组可以通过哪些方式进行遍历：
首先会想到 for 循环，通过声明一个变量作为下标能够方便地对所有元素进行操作。说到循环，那么其他的循环，比如 when 当然也是没问题的
通过下标的迭代，我们还可以使用递归来进行遍历
当我们着眼于 Array 本身时，我们会发现，在其原型链上为我们提供的forEach和map方法也能够对数组进行遍历
那么下面，我们就来对上面说的几种方法中的三种：for forEach map进行一下剖析
基本使用
const arr = [0,1,2,3,4,5,6,7,8,9]
// for 循环
// 括号中第一个表达式 i 为迭代变量，第二个表达式为循环条件，第三个表达式更新迭代变量
for(let i = 0; i < arr; i ++) {...}
// forEach 遍历
// 必须传入一个回调函数作为第一个参数，该回调函数接受多个参数，第一个参数为当前数组遍历到的元素
arr.forEach(item => {...})
// map 遍历
// 必须传入一个回调函数作为第一个参数，该回调函数接受多个参数，第一个参数为当前数组遍历到的元素
arr.map(item => {...})
从上面的代码中，会发现，除了for循环以外，另外两种遍历似乎长得差不多，那是不是这两者可以通用呢？他们之间有没有差别呢？下面开始剖析
三种遍历方式的异同
for 循环
for 循环的遍历方式与另外两者的差别是最大的，通过代码块来执行循环，在代码块中，需要通过迭代变量来获取当前遍历的元素，如arr[i]
看上去通过迭代变量获取元素没有另外两种方式（能够直接获取）方便，但是在某些情况下，我们却不得不使用 for 循环：当在循环满足特定条件时跳出循环体，或跳出本次循环直接进行下一次循环
for(let i = 0; i < arr; i ++) {
// 当迭代变量 i == 3 时，跳过此次循环直接进入下一次
if (i == 3) continue
console.log(arr[i])
// 当 i > 7 时，跳出循环
if (i > 7) break
}
// 控制台打印
0
1
2
4
5
6
7
另外两种遍历方式，由于是通过回调函数的方式对遍历到的元素进行操作，即使在回调函数中 return ，也仅能够跳出当前的回调函数，无法阻止遍历本身的暂停
arr.forEach(item => {
console.log(item)
if (item > 3) return
})
// 控制台打印
0
1
2
3
4 // 遍历并没有在大于 3 时结束
5
6
7
8
9
forEach 遍历
forEach 的 api 并不像上面写的这样简单
�arr.forEach(callback, context)
forEach 接受两个参数，第一个参数就是上文我们提到的回调函数，这个回调函数等会再说，先看第二个可选参数 context
context 的意思是上下文，在这里就是指当前函数执行时的 this 指向的值，具体可以参考以前的这篇文章：
由于匿名函数的 this 指向始终为 window 对象，然而某些情况下，我们需要改变 this 的指向，此时这个参数的作用就凸显出来了
再回头看第一个参数，传入的这个回调函数可以接受三个参数，其中第一个参数是当前遍历到的元素，第二个元素是当前元素的索引，第三个元素为当前遍历的数组，所以 forEach 完整的 api 如下：
arr.forEach((currentValue, index, currentArray) => {...}[, context])
map 遍历
map 的使用与 forEach 几乎一致，唯一的区别是：map 会创建一个新的数组，而这个数组的元素是回调函数的返回值，所以我们可以用一个变量接收 map 的返回值
const mapArray1 = arr.map(item => item + 1)
console.log(mapArray1)
// 控制台打印
[1,2,3,4,5,6,7,8,9,10]
const mapArray2 = arr.map(item => {item + 1})
console.log(mapArray2)
// 控制台打印
[undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined]
上面的代码中，mapArray1 是将回调函数的返回值item + 1作为了数组中的元素，而 mapArray2 由于回调函数没有返回值，所以创建了一个每项元素都为undefined的数组
新建了一个 QQ 群，希望小伙伴们能够通过这个群交流自己关于前端方面的见解，有任何工作上的难题也都欢迎一起讨论。群号是 587881575，欢迎各位的加入哦！
扫码关注前端周记公众号
网友评论