遍历数组时应该使用 for-of 还是 forEach？ [复制]答案

【问题标题】：Should one use for-of or forEach when iterating through an array? [duplicate]遍历数组时应该使用 for-of 还是 forEach？ [复制]
【发布时间】：2018-11-23 10:34:52
【问题描述】：

另外，这是一个风格问题还是一个功能问题？这是一个偏好问题还是一个更好的问题？我正在尝试理解 for-of 的目的。

我通常使用，

let iterable = [10, 20, 30];

iterable.forEach((val) => {
   console.log(val);
})

但我发现这种新语法是可用的。

let iterable = [10, 20, 30];
    
for (let value of iterable) {
   console.log(value);
}

能否提供一个 for-of 最佳用例的示例，说明何时应该使用它？

【问题讨论】：

我不会说这完全是基于意见，因为forEach 和for/of 之间肯定存在一些差异。例如，for/of 可用于迭代生成器，而 forEach 则不能。所以这不仅仅是一个偏好问题。
某些可迭代对象没有forEach()，例如FileList。除了不实现 forEach() 的迭代之外，这纯粹是一个偏好问题。

标签： javascript ecmascript-6

【解决方案1】：

这是一个非常有趣的问题，已在许多其他网站上讨论过。我将发布我所阅读的基础知识。

ForEach 完全属于 Arrays 皇室。 forEach 方法是与 Array 对象的原型继承一起引入的！不用说，forEach 子句只适用于那些是数组的数据结构。该方法基本上迭代数组的元素并执行回调函数[基本上是一些可执行函数/有趣的活动]。

for-of 循环对于 JS 世界来说是足够新的，并且包含了超能力！瞧啊啊啊！ for-of 循环创建了一个循环遍历可迭代成员对象的循环。该列表是一个广泛的列表，例如

数组
地图
设置
字符串
类型化数组
其他 W3C 类

你要知道这个坏小子是在 2015 年随着 ES6 的诞生而出现的。所以，它在使用上提供了很大的灵活性

性能

在性能方面，for...of 比 forEach 快。 Results can be found here

forEach 比 for...of 慢 24%

更新

W3C 规范中还有其他几个可迭代的类，比如我上面提到的 FileList。在最近的 W3C 草案中（大约在 ES6 发布时），HTMLCollection 和 NodeList 等集合现在也实现了 forEach()，而不仅仅是 Array。 @Patrick Roberts

来源链接：

【讨论】：

该列表仅提及 ECMAScript 规范中的类。 W3C 规范中还有其他几个可迭代的类，比如FileList，正如我上面提到的。在最近的 W3C 草案中（大约在 ES6 发布时），HTMLCollection 和 NodeList 等集合现在也实现了 forEach()，而不仅仅是 Array。
在最新的 firefox 中，forEach 比 for of 快，但在 chrome 中，for of 更快。
有趣。这似乎取决于浏览器的javascript引擎。 Mozilla 使用 SpiderMonkey，而 Chrome 使用 Chrome v8。可能forEach和for...of的实现方式不同。

【解决方案2】：

我建议在 ES6 中始终使用 for … of。

它适用于任何iterable
它支持循环体中的各种控制流，如continue、break、return、yield和await。

我个人也觉得它更具可读性，但这归结为偏好。一些人认为forEach 是一种更实用的样式，但这是错误的——它没有结果值并且只是为了产生副作用，所以看起来命令式的循环更适合这个目的。

性能不是问题，in modern engines all loop styles are equivalent。

【讨论】：

await 实际上可以在 forEach 循环中使用，我认为它实际上更容易。使用for-of，您必须将整个内容包装在异步函数中。使用forEach，您可以使回调异步：[1,2,3].forEach(async (value) => {await new Promise(resolve=>console.log(value))})
@Forivin That doesn't work，不会等待循环。您的代码相当于只创建了 Promise 而根本不使用 async/await。
嗯，它确实有效，用例只是不同，而且公认不寻常。但实际上会调用 promise 的执行者。
对于不同的用例，你根本不需要await，所以你可以写for (const value of [1,2,3]) { new Promise(resolve => console.log(value)); }