Question

我理解当我们使用循环迭代变量var i=0; i<length; i++时，我们总是希望避免循环的命令方式的概念，因为它是非常详细和命令式的做事方式，并为我们提供项目索引，即使我们不需要它们。数组上的.forEach()方法似乎是通过在声明方法中公开val（以及仅在需要时使用index）来解决这个问题：

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

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

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

Answer 1

forEach上存在

Array.prototype，但是数组不是我们迭代的唯一类型。 ES6引入了许多其他内容，for...of提供了一种一致的方法来实现自定义类型的迭代行为。

Answer 2

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

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

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

如前所述，for...of适用于任何 iterable （任何实现返回迭代器的[Symbol.iterator]方法），而不仅仅是数组。数组也只是可迭代的。

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

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

等同于

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

但是，这并不容易理解（或写作）。如果我们假设iterables应该变得更受欢迎/普遍，那么更好地支持使用迭代器似乎是合理的。

Answer 3

原因更多的是方便而不是添加任何新功能。我在Github的Notes回购中写过这篇文章。我会直接在这里解释一下：

在ES5之前，for循环的编写方式如下：

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

在ES5中，我们可以这样写：

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

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

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

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

3 个答案: