在迭代数组时，应该使用 for-of 还是 forEach？

另外，这是一个风格问题还是一个功能性问题？这是个人喜好的问题，还是一个更好的问题？我试图理解的目的为-的。

通常我会用,

let iterable = [10, 20, 30];


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

但是我看到这个新语法是可用的。

let iterable = [10, 20, 30];
    

for (let value of iterable) {
console.log(value);
}

能否提供一个最佳用例的例子，说明什么时候应该使用它？

42980 次浏览
小开

This is a very interesting question which has been discussed in many other sites. I'll post the basics of what I have read.

ForEach exclusively belong to the royal family of Arrays. The forEach method was introduced with lineage to the prototypal inheritance of Array object! Needless to say, the forEach clause works only with those data structure which are Arrays. The method basically iterates over the elements of the array and executes a callback function [basically some executable function/ fun activity].

The for-of loop is adequately new to the JS world and packs in super-powers! Voilaaaaaaa! The for-of loop creates a loop iterating over iterable member objects. The list is an extensive one such as

  • Array
  • Map
  • Set
  • String
  • TypedArray
  • Other W3C classes

You need to know that this bad-ass boy emerged with the birth of ES6 in 2015. So, it offers plenty of flexibility in usage

Performance

In performance, for...of is faster than forEach. Results can be found here

forEach is 24% slower than for...of

Update

There are several other iterable classes in the W3C specification, like FileList, as I mentioned above. And in recent drafts of W3C (around when ES6 was released), collections like HTMLCollection and NodeList now implement forEach() as well, not just Array anymore. By @Patrick Roberts

Source Links:

小开

I recommend to always use for … of in ES6.

  • It works on any iterable
  • It supports all kinds of control flow in the loop body, like continue, break, return, yield and await.

Also I personally find it more readable, but that comes down to preference. Some people think forEach is a more functional style, but that's wrong - it has no result value and is all about doing side effects, so an imperative-looking loop fits that purpose better.

Performance is not a concern, in modern engines all loop styles are equivalent.


提交答案