JavaScript - myArray.forEach 与 for 循环的细微差别 [英] JavaScript - Nuances of myArray.forEach vs for loop

问题描述

我看到很多问题都建议使用:

I've seen plenty of questions that suggest using:

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

代替:

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

对于数组，由于迭代不一致(参见此处).

for arrays, due to inconsistent iteration (see here).

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

However, I can't seem to find anything that seems to prefer the object oriented loop:

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

这对我来说似乎更直观.

Which seems way more intuitive to me.

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

For my current project, IE8 compatibilty is important, and I'm considering using Mozilla's polyfill, however I'm not 100% sure how this will work.

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

推荐答案

for 循环和 forEach 方法最本质的区别在于，前者，你可以break 跳出循环.您可以通过简单地从传递给 forEach 的函数返回来模拟 continue，但无法完全停止循环.

The most substantive difference between the for loop and the forEach method is that, with the former, you may break out of the loop. You can simulate continue by simply returning from the function passed to forEach, but there is no way to stop looping altogether.

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

Aside from that, the two accomplish effectively the same functionality. Another minor difference involves the scope of the index (and all containing variables) in the for loop, due to variable hoisting.

// '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，我建议您使用它.

However, I find that forEach is much more expressive—it represents your intent to iterate through each element of an array, and it provides you with a reference to the element, not just the index. Overall, it mostly comes down to personal taste, but if you can use forEach, I would recommend using it.

两个版本之间存在一些更实质性的差异，特别是在性能方面.事实上，简单的 for 循环比 forEach 方法的性能要好得多，正如 这个 jsperf 测试.

There are a few more substantial differences between the two versions, specifically regarding performance. In fact, the simple for loop performs considerably better than the forEach method, as demonstrated by this jsperf test.

这种性能是否对您来说是必要的由您决定，在大多数情况下，我更喜欢表现力而不是速度.如this answer.

Whether or not such performance is necessary for you is up to you to decide, and in most cases, I would favor expressiveness over speed. This speed difference is likely due to the minor semantic differences between the basic loop and the method when operating on sparse arrays, as noted in this answer.

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

If you don't need the behavior of forEach and/or you need to break out of the loop early, you can use Lo-Dash's _.each as an alternative, which will also work cross-browser. If you're using jQuery, it also provides a similar $.each, just note the differences in arguments passed to the callback function in each variation.

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

(As for the forEach polyfill, it should work in older browsers without problems, if you choose to go that route.)

这篇关于JavaScript - myArray.forEach 与 for 循环的细微差别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！