遍历数组的几种方法比较

一、比较

1.for原始写法

const arr = ['a', 'b', 'c', 'd'];
for (let i = 0; i < arr.length; i++) {
  console.log(`${i}:${arr[i]}`);
}
//0:a 1:b 2:c 3:d

特点：写法较繁琐
2.forEach

arr.forEach(function (item, index, self) {
  console.log(`${index}:${item}`);
})
//0:a 1:b 2:c 3:d

特点：无法中途跳出循环，break或return都不行
3.for...in

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

特点：遍历的是数组的键名，且会遍历原型链上的键，有时候遍历顺序不可确定，主要是为遍历对象设计
4.for...of

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

特点：写法简洁，无for...in遍历的缺点，可以中途退出(return/break/continue)

二、应用

1.边遍历边删除

for (let i = 0; i < arr.length; i++) {
  let item = arr[i];
  if (item == 'b') {
    arr.splice(i, 1);
  }
  console.log(`${i}: ${item}`);
}
// 0:a 1:b 2:d

删除时需改变下标，否则会漏掉一个，因为一旦执行splice方法，则会实时改变数组本身，所以需手动移动下标(i--)，只有原始for循环可实现，for...in、forEach等都不能手动改变下标。

for (let i = 0; i < arr.length; i++) {
  let item = arr[i];
  if (item == 'b') {
    arr.splice(i, 1);
    i--;
  }
  console.log(`${i}: ${item}`);
}
// 0:a 0:b 1:c 2:d

参考：《阮一峰 es6入门》