JavaScript的几种遍历方法

在对数组或对象进行遍历时，我们经常会使用这些方法:for、for-in、for-of、forEach、map等。这些方法之间有什么区别和联系呢？让我们来研究一下。

以下面的arr数组和obj对象为例：

let arr = ['A','B','C']
let obj = {b: 'BOLL',k:'KDJ',m:'MACD'}
复制代码

`for`

for是js中最简单，直接的一种用法，写起来有点麻烦，具体怎么用就不必多说了吧，如下：

for(let i=0;i<arr.length;i++){
    console.log(arr[i])
}
/*
  A
  B
  C
*/
复制代码

`for-in`

for-in 用于遍历对象的属性（对数组的索引或者对象的属性进行循环操作），会遍历数组所有的可枚举属性，包括原型，如下：

for(let a in arr){
    console.log(a)]
}
/*
  0
  1
  2
*/
for(let o in obj){
    console.log(o, obj[o])
}
/*
  b BOLL
  k KDJ
  m MACD
*/
//注意 for in 也会循环原型链中的属性
Array.prototype.a = 123
for(let a in arr){
    console.log(a)
}
/*
  0
  1
  2
  a
*/
复制代码

从上述例子我们可以发现，for-in 更适用于遍历对象。要注意的是，for-in 遍历属性的顺序并不确定，即输出的结果顺序与属性在对象中的顺序无关，也与属性的字母顺序无关，与其他任何顺序都无关。

`for-of`

for-of 遍历的是数组元素值，而且 for-of 遍历的只是数组内的元素，不包括原型属性和索引。

Array.prototype.a = 123
    
for (let value of arr) {
  console.log(value)
}
/*
  A
  B
  C
*/

//如果想遍历对象的属性，可以用内建的Object.keys()方法
for(let key of Object.keys(obj)){
    console.log(key, obj[key])
}
/*
 b BOLL
 k KDJ
 m MACD
*/
复制代码

`forEach`

forEach() 是方法对数组的每个元素执行一次提供的函数，没有返回值。循环无法中途跳出，break 命令或 return 命令都不能奏效。

let arr2 = [1, 2, 3, 5, 9]
arr2.forEach(item => {
  if(item % 2 === 0) {
    return
  }
  console.log('item', item)
})
/*
  item 1
  item 3
  item 5
  item 9
*/
复制代码

`map`

map 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值，map 方法不改变原数组。

let arr3 = ['A','B','C','D'];
let mapArr = arr3.map(item => {
  return item + '1'
})
console.log(mapArr)
/*
 ['A1', 'B1', 'C1', 'D1']
*/
复制代码

小结

对象的遍历用for-in比较方便，用其他的也不是不行，就是麻烦一点，需要用到内建的Object.keys()方法。
数组的遍历用for-in遍历的是数组的索引（即键名），而for-of遍历的是数组元素值。
对数组操作用map和forEach写起来比较方便，需要对数组每一项操作返回一个新数组的时候，用map比较简单。

JavaScript的几种遍历方法

for

for-in

for-of

forEach

map

小结

参考资料

`for`

`for-in`

`for-of`

`forEach`

`map`