1 Javascript数组遍历方法

Javascript中共有以下几种数组遍历方法：

上述四种方法都可以对数组进行遍历，下文简单总结这四种方法的使用以及优缺点。

1.1 for

示例代码：

for (let index=0; index < array.length; index++) {
  const elem = array[index];
}

在Javascript中，for循环遍历数组array中每一个元素的索引和值，其在ECMAScript 1中就已经存在。

当我们不想从第一个数组元素开始遍历，则for循环很有用，其他三个方法很难做到。但是相比其它三个方法，写起来比较复杂。

1.2 for-in

示例代码：

for (const key in array) {
  console.log(key);
}

for-in和for一样，在ECMAScript 1中就已经存在。

但是for-in不是遍历数组的好方法，首先它访问的是key而不是value，而且key是字符串而不是数字。

1.3 forEach

示例代码：

array.forEach((elem, index) => {
  console.log(elem, index);
});

由于for和for-in都不适合遍历数组，在ECMAScript 5引入了.forEach方法，其语法比较优雅，并且可以同时访问数组索引和数组元素。但是其缺点也很明显：

  • 不能在它的循环体中使用 await
  • 不能提前退出 .forEach() 循环。而在 for 循环中可以使用 break

1.4 for-of

示例代码：

for (const elem of array) {
  console.log(elem);
}

在ECMAScript 6开始推出for-of方法，首先其可以遍历数组元素，也可以结合array.entries()方法返回一个可以迭代的[index,value]数据对，然后使用for-of进行遍历，比如

const array = ['a', 'b', 'c'];

for (const [index, elem] of array.entries()) {
  console.log(index, elem);
}

for-of方法除了可以遍历数组之外，还可以用于遍历对象，比如遍历Map，

const temp_map = new Map()
  .set('zhangsan', 19)
  .set('lisi', 20)
;
for (const [key, value] of temp_map) {
  console.log(key, value);
}

2 总结

简单的说，for-of是遍历数组最可靠的方式，该方法比for方法简单，并且没有for-in和forEach那么多的使用限制。除了取数组索引值不方便以及无法从不是首元素进行数组遍历之外，其他方面都是比较简单实用的。

参考链接