JavaScript - myArray.forEach 与 for 循环的细微差别

Question

我见过很多建议使用的问题:

for (var i = 0; i < myArray.length; i++){ /* ... */ }

代替:

for (var i in myArray){ /* ... */ }

对于数组，由于不一致的迭代(see here)。

---

但是，我似乎找不到任何似乎更喜欢面向对象循环的东西:

myArray.forEach(function(item, index){ /* ... */ });

这对我来说似乎更直观。

对于我当前的项目，IE8 兼容性很重要，我正在考虑使用 Mozilla's polyfill ，但是我不是 100% 确定这将如何工作。

• 标准的 for 循环(上面的第一个例子)和现代浏览器的 Array.prototype.forEach 实现之间有什么区别吗？
• 现代浏览器实现与上面链接的 Mozilla 实现(特别是 IE8)之间有什么区别吗？
• 性能不是什么大问题，只是迭代属性的一致性。

Answer 1

for 循环和forEach 方法之间最本质的区别在于，对于前者，您可以break 退出循环.您可以通过简单地从传递给 forEach 的函数返回来模拟 continue，但是没有办法完全停止循环。

除此之外，两者有效地实现了相同的功能。由于变量提升，另一个细微差别涉及 for 循环中索引(以及所有包含变量)的范围。

// 'i' is scoped to the containing function
for (var i = 0; i < arr.length; i++) { ... }

// 'i' is scoped to the internal function
arr.forEach(function (el, i) { ... });

但是，我发现 forEach 更具表现力 — 它表示您要遍历数组的每个元素的意图，并且它为您提供对元素的引用，而不仅仅是索引。总的来说，这主要取决于个人喜好，但如果您可以使用 forEach，我会推荐使用它。

---

这两个版本之间还有一些实质性差异，特别是在性能方面。事实上，简单的 for 循环比 forEach 方法执行得更好，如 this jsperf test 所示。 .

是否需要这样的性能由您决定，在大多数情况下，我更喜欢表现力而不是速度。这种速度差异可能是由于在稀疏数组上运行时基本循环和方法之间的语义差异很小，如 this answer 中所述。 .

如果您不需要 forEach 的行为和/或您需要提前跳出循环，您可以使用 Lo-Dash 的 _.each作为替代方案，它也可以跨浏览器工作。如果您使用的是 jQuery，它还会提供类似的 $.each ，只需注意在每个变体中传递给回调函数的参数的差异。

(至于 forEach polyfill，如果您选择走那条路，它应该可以在较旧的浏览器中正常工作。)