当我们已经拥有forEach时，为什么我们需要在ES2015中使用新的循环结构？

I understand the concept that we always want to avoid the imperative way of loops when we use loop iteration variable var i=0; i<length; i++ as it is very verbose and imperative way of doing things and provides us the index of items even when we don't need them. .forEach() method on array seems to be solving this by exposing val (and index only when needed) in a declarative approach:

我理解当我们使用循环迭代变量var i = 0时,我们总是希望避免循环的命令方式的概念; I <长度; i ++因为它是非常冗长和必要的做事方式,即使我们不需要它们也能为我们提供项目索引。数组上的.foreach()方法似乎是通过在声明方法中暴露val(和仅在需要时索引)来解决这个问题:< p>

var arr = [1, 2, 3, 4];
arr.forEach(function (val) {
  // Use val
});

I was going through ES6 constructs and have seen the new for-of loop construct. My questions after trying out is:

我正在浏览ES6结构并看到了新的for-of循环结构。我尝试后的问题是:

Why would we need a new construct when we already had 2 defined in the language? What functionality does it achieve which is not possible through the above 2 loop constructs?

当我们已经在语言中定义了2时,为什么我们需要一个新的构造?它实现了哪些功能,这是通过上述2个循环结构无法实现的?

3 个解决方案

#1

Why would we need a new construct when we already had 2 defined in the language? What functionality does it achieve which is not possible through the above 2 loop constructs?

当我们已经在语言中定义了2时,为什么我们需要一个新的构造?它实现了哪些功能,这是通过上述2个循环结构无法实现的?

You could make that argument for many new features in ES2015. Arrow functions, let, rest parameters, destructuring, etc. are more or less just syntactic sugar for things you can already do in JS. Tools like Babel, which convert ES2015 to ES5, prove that.

您可以为ES2015中的许多新功能制作该参数。箭头函数,让,休息参数,解构等等或多或少只是你已经可以用JS做的事情的语法糖。像Babel这样将ES2015转换为ES5的工具证明了这一点。

So, what's the point of syntactic sugar? To reduce boilerplate code and letting the engineer focus on what the code should do, rather than how it should do it.

那么,语法糖的重点是什么?减少样板代码并让工程师专注于代码应该做什么,而不是应该如何做。

As already noted, for...of works on any iterable (anything that implements a [Symbol.iterator] method that returns an iterator), not just arrays. Arrays simply are iterables as well.

正如已经指出的那样,对于任何可迭代的函数(实现返回迭代器的[Symbol.iterator]方法的任何东西),不仅仅是数组。数组也是可迭代的。

for...of doesn't really introduce anything that couldn't be done with existing syntax (afaik). You can consume an iterator with a while loop.

for ... of并没有真正介绍任何用现有语法无法完成的事情(afaik)。您可以使用while循环来使用迭代器。

for (var foo of bar) {
  // ...
}

would be equivalent to

相当于

var it = bar[Symbol.iterator](), next;
while ((next = it.next()).done !== false) {
  var foo = next.value;
  // ...
}

However, that isn't really easier to understand (or write). If we assume that iterables are supposed to become more popular / common, having better support to consume iterators seems reasonable.

然而,这并不是更容易理解(或写)。如果我们假设iterables应该变得更流行/普遍,那么更好地支持使用迭代器似乎是合理的。

#2

forEach exists on the Array.prototype but Arrays are not the only types that we iterate over. ES6 introduces many others and for...of provides a consistent way to implement a iterating behaviour for your custom types as well.

forEach存在于Array.prototype上,但Arrays不是我们迭代的唯一类型。 ES6引入了许多其他的,并为...提供了一种一致的方法来实现自定义类型的迭代行为。

#3

-1

The reason is more about convenience rather than addition any new feature. I wrote about this in my Notes repo in Github. I'll paraphrase it directly here:

原因更多的是方便而不是添加任何新功能。我在Github的Notes回购中写过这个。我在这里直接解释它:

Prior to ES5, for loops are written like this:

在ES5之前,for循环是这样编写的:

for (var i = 0; i < arr.length; i++) {
    // Do something
}

In ES5, we can write it like this:

在ES5中,我们可以这样写:

arr.forEach(function(elem) {
    // Do something
});

The advantage of former is that we can break out of loops in the middle. The advantage of latter is conciseness. ES6 combines both of them and introduces new syntax called for-of:

前者的优点是我们可以在中间摆脱循环。后者的优点是简洁。 ES6结合了它们并引入了一个名为for-of的新语法:

for (let elem of arr) {
    // Do something
}

#1