聊一聊前端遍历数组的几种方法

前端几种遍历方法

1 forEach方法遍历数组

(1) 不会改变原数组

const arr = ['a','b','c']

arr.forEach( item => {
    item += 1
    console.log(item)
} )
console.log(arr)
//a1
//b1
//c1
//['a','b','c']

(2) 遍历范围在遍历前就确定了

如果以存在的值 发生改变，则传递给回调函数的值是遍历到某一项时的值，已删除的值不会被遍历到

let arr = [1, 2, 3, 4, 5];
arr.forEach((item, index, arr) => {
  if (index == 1) {
    arr.shift()
  }
  console.log(item)
});
// 1
// 2
// 4
// 5

(3) 无法跳出循环

let arr = [1, 2, 3, 4, 5];
arr.forEach((item, index, arr) => {
  if (index == 1) {
    return
  }
  console.log(item)
});
//  1 2 3 4 5

(4) 不操作未初始化的值（稀疏数组）

let arr = [1, 2, , 3];
arr.forEach((item, index) => {
  if (index == 1) {
    arr.shift()
  }
  console.log(index, item)
});
// 0 1
// 1 2
// 2 3

2 普通for循环

可以使用 break 跳出该循环

for (let i = 0; i < 9; i++) {
  console.log(i)
  if(i == 2){
    return // /break
  }
}
// 0
// 1
// 2

3 for...of

(1)不会改变原数组

(2)可使用 break / return 终止循环

4 for...of 和 for...in

for..in 一般用于遍历对象

var arr = ['a', 'b', 'c', 'd'];
arr.name = 'zs'

for (let a in arr) {
  console.log(a); // 0 1 2 3 name
}

for (let a of arr) {
  console.log(a); // a b c d
}

由此可见，for...in循环读取key（键名），for...of 循环读取value（键值）

for...of 调用的是遍历器接口（详情），数组的遍历器接口值返回具有数字索引的属性

最后

浅谈，文笔有限，有更好的方式方法欢迎大家评论区留言讨论。