阅读 213

JavaScript的几种遍历方法

在对数组或对象进行遍历时,我们经常会使用这些方法:forfor-infor-offorEachmap等。这些方法之间有什么区别和联系呢?让我们来研究一下。

以下面的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遍历的是数组元素值。
  • 对数组操作用mapforEach写起来比较方便,需要对数组每一项操作返回一个新数组的时候,用map比较简单。

参考资料

文章分类
前端
文章标签