在数组上循环：for vs. for-in vs. .forEach() vs. for-of这篇博文比较了四种在数组上

这篇博文比较了四种在数组上进行循环的方法。

for 循环

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

for-in 循环

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

阵列方法.forEach():

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

for-of 循环

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

for-of 通常是最好的选择。我们将看到原因。

`for` 循环 [ES1]

JavaScript中的普通for 循环是很古老的。它在ECMAScript 1中已经存在了。这个for 循环记录了arr 的每个元素的索引和值：

const arr = ['a', 'b', 'c'];
arr.prop = 'property value';

for (let index=0; index < arr.length; index++) {
  const elem = arr[index];
  console.log(index, elem);
}

// Output:
// 0, 'a'
// 1, 'b'
// 2, 'c'

这个循环的优点和缺点是什么？

它的用途很广，但可惜的是，当我们只想在一个数组上进行循环时，它也很啰嗦。
如果我们不想从第一个数组元素开始循环，它还是很有用的。其他的循环机制都不能让我们这样做。

`for-in` 循环 [ES1]

for-in 循环和for 循环一样古老--它也已经存在于ECMAScript 1中。这个for-in 循环记录了arr 的键：

const arr = ['a', 'b', 'c'];
arr.prop = 'property value';

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

// Output:
// '0'
// '1'
// '2'
// 'prop'

for-in 不是一个在数组上循环的好选：

它访问的是属性键，而不是值。
作为属性键，数组元素的索引是字符串，而不是数字（关于数组元素如何工作的更多信息）。
它访问所有可枚举的属性键（包括自己的和继承的），而不仅仅是数组元素的属性。

for-in 访问继承的属性确实有一个用例。循环访问一个对象的所有可枚举属性。但即使在这里，我也更喜欢手动迭代原型链，因为你有更多的控制权。

阵列方法`.forEach()` [ES5]

鉴于for 和for-in 都不太适合在数组上循环，ECMAScript 5中引入了一个辅助方法：Array.prototype.forEach()：

const arr = ['a', 'b', 'c'];
arr.prop = 'property value';

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

// Output:
// 'a', 0
// 'b', 1
// 'c', 2

这个方法真的很方便。它可以让我们访问数组元素和数组元素的索引，而不需要我们做很多事情。箭头函数（ES6中引入）使这个方法在语法上更加优雅。

.forEach() 的主要缺点是：

你不能在这种循环的 "主体 "中使用await 。
你不能提前离开一个.forEach() 循环。在for 循环中，我们可以使用break 。

从`.forEach()` 打破--一种变通方法

如果你想使用像.forEach() 这样的循环并提前离开，有一个变通的办法：.some() 也是在所有Array元素上循环，如果它的回调返回一个真值就停止：

const arr = ['red', 'green', 'blue'];
arr.some((elem, index) => {
  if (index >= 2) {
    return true; // break from loop
  }
  console.log(elem);
  // This callback implicitly returns `undefined`, which
  // is a falsy value. Therefore, looping continues.
});

// Output:
// 'red'
// 'green'

可以说，这是对.some() 的滥用，我不确定理解这段代码有多容易（与for-of 和break 相比）。

`for-of` 循环 [ES6]

for-of 循环是在ECMAScript 6中加入到JavaScript中的：

const arr = ['a', 'b', 'c'];
arr.prop = 'property value';

for (const elem of arr) {
  console.log(elem);
}
// Output:
// 'a'
// 'b'
// 'c'

for-of 对于在数组上的循环非常有效。

它在数组元素上进行迭代。
我们可以使用await 。
- 而且它很容易迁移到 for-await-of如果你需要的话。
我们可以使用break 和continue - 即使是外部作用域。

`for-of` 和可迭代对象

for-of 的另一个好处是，我们不仅可以在数组上循环，还可以在任何可迭代对象上循环--例如，在地图上：

const myMap = new Map()
  .set(false, 'no')
  .set(true, 'yes')
;
for (const [key, value] of myMap) {
  console.log(key, value);
}

// Output:
// false, 'no'
// true, 'yes'

遍历myMap ，产生[key, value]对，我们对其进行解构，以直接访问每对的组件。

`for-of` 和数组索引

Array方法.keys() ，返回一个数组索引的可迭代对象：

const arr = ['chocolate', 'vanilla', 'strawberry'];

for (const index of arr.keys()) {
  console.log(index);
}
// Output:
// 0
// 1
// 2

`for-of` 和一个数组的条目（[索引，值]对）

数组方法.entries() 返回一个关于[索引，值]对的可迭代数据。如果我们使用for-of 和destructuring这个方法，我们可以方便地访问索引和值：

const arr = ['chocolate', 'vanilla', 'strawberry'];

for (const [index, value] of arr.entries()) {
  console.log(index, value);
}
// Output:
// 0, 'chocolate'
// 1, 'vanilla'
// 2, 'strawberry'

结论

正如我们所看到的，for-of 循环在可用性方面胜过for 、for-in 和.forEach() 。

这四种循环机制之间的任何性能差异通常都不重要。如果有的话，你可能在做一些计算量很大的事情，切换到WebAssembly可能会有意义。

在数组上循环：for vs. for-in vs. .forEach() vs. for-of

for 循环 [ES1]

for-in 循环 [ES1]

阵列方法.forEach() [ES5]

从.forEach() 打破--一种变通方法

for-of 循环 [ES6]

for-of 和可迭代对象

for-of 和数组索引

for-of 和一个数组的条目（[索引，值]对）

结论