An in-depth explanation of Iterator and for-of loops in JavaScript_Basic knowledge

How to traverse the elements of an array? 20 years ago, when JavaScript came along, you might have done this:

for (var index = 0; index < myArray.length; index++) {
 console.log(myArray[index]);
}
 
for (var index = 0; index < myArray.length; index++) {
 console.log(myArray[index]);
}

Since ES5, you can use the built-in forEach method:

JavaScript
myArray.forEach(function (value) {
 console.log(value);
});
 
myArray.forEach(function (value) {
 console.log(value);
});

The code is more streamlined, but there is a small disadvantage: you cannot use the break statement to jump out of the loop, nor can you use the return statement to return from the closure function.

It would be much more convenient if there was a for- syntax to traverse the array.

So, how about using for-in?

for (var index in myArray) { // 实际代码中不要这么做
 console.log(myArray[index]);
}

 
for (var index in myArray) { // 实际代码中不要这么做
 console.log(myArray[index]);
}

This is not good because:

The index variable in the above code will be strings such as "0", "1", "3", etc., rather than numeric types. If you use the index of a string to participate in some operations ("2" 1 == "21"), the results may not be as expected.
Not only the elements of the array itself will be traversed, but also the additional (expando) elements added by the user will be traversed. For example, if an array has such an attribute myArray.name, then index="name will appear in a certain loop. " situation. Moreover, even properties on the array prototype chain may be traversed.
The most incredible thing is that in some cases, the above code will traverse the array elements in any order.

To put it simply, for-in is designed to traverse objects containing key-value pairs, and is not so friendly to arrays.
Powerful for-of loop

Remember what I mentioned last time, ES6 will not affect the normal operation of existing JS code. Thousands of web applications already rely on the for-in feature, and even rely on for-in for characteristics of arrays, so no one has ever proposed "improving" the existing for-in syntax to fix the above problems. The only way ES6 solves this problem is to introduce a new loop traversal syntax.

This is the new syntax:

for (var value of myArray) {
 console.log(value);
}
 
for (var value of myArray) {
 console.log(value);
}

By introducing the for-in syntax above, this syntax doesn’t look all that impressive. We will introduce the wonders of for-of in detail later, now you only need to know:

• This is the simplest and most direct way to traverse an array
• Avoids all the pitfalls of for–in syntax
• Unlike forEach(), it supports break, continue and return statements.

for–in is used to iterate over the properties of an object.

for-of is used to iterate over data — just like elements in an array.

However, this is not all the features of for-of, there are more exciting parts below.
Other collections that support for-of

for-of is not only designed for arrays, but can also be used for array-like objects, such as NodeList, a collection of DOM objects.

can also be used to traverse a string, which treats the string as a collection of Unicode characters:

It also works with Map and Set objects.

Maybe you have never heard of Map and Set objects, because they are new objects in ES6, and there will be separate articles to introduce them in detail later. If you've used these two objects in other languages, it's much simpler.

For example, you can use a Set object to deduplicate array elements:

JavaScript
// make a set from an array of words
var uniqueWords = new Set(words);
 
// make a set from an array of words
var uniqueWords = new Set(words);

After getting a Set object, you will most likely traverse the object. This is very simple:

for (var word of uniqueWords) {
 console.log(word);
}
 
for (var word of uniqueWords) {
 console.log(word);
}

Map objects are composed of key-value pairs, and the traversal method is slightly different. You need to use two independent variables to receive the key and value respectively:

for (var [key, value] of phoneBookMap) {
 console.log(key + "'s phone number is: " + value);
}
 
for (var [key, value] of phoneBookMap) {
 console.log(key + "'s phone number is: " + value);
}

So far, you already know: JS already supports some collection objects, and will support more in the future. The for-of syntax is designed for these collection objects.

for-of cannot be used directly to traverse the properties of an object. If you want to traverse the properties of an object, you can use the for-in statement (for-in is used for this), or use the following method:

// dump an object's own enumerable properties to the console
for (var key of Object.keys(someObject)) {
 console.log(key + ": " + someObject[key]);
}

 
// dump an object's own enumerable properties to the console
for (var key of Object.keys(someObject)) {
 console.log(key + ": " + someObject[key]);
}

内部原理

    “好的艺术家复制，伟大的艺术家偷窃。” — 巴勃罗·毕加索

被添加到 ES6 中的那些新特性并不是无章可循，大多数特性都已经被使用在其他语言中，而且事实也证明这些特性很有用。

就拿 for-of 语句来说，在 C++、JAVA、C# 和 Python 中都存在类似的循环语句，并且用于遍历这门语言和其标准库中的各种数据结构。

与其他语言中的 for 和 foreach 语句一样，for-of 要求被遍历的对象实现特定的方法。所有的 Array、Map 和 Set 对象都有一个共性，那就是他们都实现了一个迭代器（iterator）方法。

那么，只要你愿意，对其他任何对象你都可以实现一个迭代器方法。

这就像你可以为一个对象实现一个 myObject.toString（） 方法，来告知 JS 引擎如何将一个对象转换为字符串；你也可以为任何对象实现一个 myObject[Symbol.iterator]() 方法，来告知 JS 引擎如何去遍历该对象。

例如，如果你正在使用 jQuery，并且非常喜欢用它的 each() 方法，现在你想使所有的 jQuery 对象都支持 for-of 语句，你可以这样做：

// Since jQuery objects are array-like,
// give them the same iterator method Arrays have
jQuery.prototype[Symbol.iterator] =
 Array.prototype[Symbol.iterator];

 
// Since jQuery objects are array-like,
// give them the same iterator method Arrays have
jQuery.prototype[Symbol.iterator] =
 Array.prototype[Symbol.iterator];

你也许在想，为什么 [Symbol.iterator] 语法看起来如此奇怪？这句话到底是什么意思？问题的关键在于方法名，ES 标准委员会完全可以将该方法命名为 iterator()，但是，现有对象中可能已经存在名为“iterator”的方法，这将导致代码混乱，违背了最大兼容性原则。所以，标准委员会引入了 Symbol，而不仅仅是一个字符串，来作为方法名。

Symbol 也是 ES6 的新特性，后面将会有单独的文章来介绍。现在你只需要知道标准委员会引入全新的 Symbol，比如 Symbol.iterator，是为了不与之前的代码冲突。唯一不足就是语法有点奇怪，但对于这个强大的新特性和完美的后向兼容来说，这个就显得微不足道了。

一个拥有 [Symbol.iterator]() 方法的对象被认为是可遍历的（iterable）。在后面的文章中，我们将看到“可遍历对象”的概念贯穿在整个语言中，不仅在 for-of 语句中，而且在 Map和 Set 的构造函数和析构（Destructuring）函数中，以及新的扩展操作符中，都将涉及到。
迭代器对象

通常我们不会完完全全从头开始去实现一个迭代器（Iterator）对象，下一篇文章将告诉你为什么。但为了完整起见，让我们来看看一个迭代器对象具体是什么样的。（如果你跳过了本节，你将会错失某些技术细节。）

就拿 for-of 语句来说，它首先调用被遍历集合对象的 [Symbol.iterator]() 方法，该方法返回一个迭代器对象，迭代器对象可以是拥有 .next 方法的任何对象；然后，在 for-of 的每次循环中，都将调用该迭代器对象上的 .next 方法。下面是一个最简单的迭代器对象：

var zeroesForeverIterator = {
 [Symbol.iterator]: function () {
 return this;
 },
 next: function () {
 return {done: false, value: 0};
 }
};
 
var zeroesForeverIterator = {
 [Symbol.iterator]: function () {
 return this;
 },
 next: function () {
 return {done: false, value: 0};
 }
};

在上面代码中，每次调用 .next() 方法时都返回了同一个结果，该结果一方面告知 for-of语句循环遍历还没有结束，另一方面告知 for-of 语句本次循环的值为 0。这意味着 for (value of zeroesForeverIterator) {} 是一个死循环。当然，一个典型的迭代器不会如此简单。

ES6 的迭代器通过 .done 和 .value 这两个属性来标识每次的遍历结果，这就是迭代器的设计原理，这与其他语言中的迭代器有所不同。在 Java 中，迭代器对象要分别使用 .hasNext()和 .next() 两个方法。在 Python 中，迭代器对象只有一个 .next() 方法，当没有可遍历的元素时将抛出一个 StopIteration 异常。但从根本上说，这三种设计都返回了相同的信息。

迭代器对象可以还可以选择性地实现 .return() 和 .throw(exc) 这两个方法。如果由于异常或使用 break 和 return 操作符导致循环提早退出，那么迭代器的 .return() 方法将被调用，可以通过实现 .return() 方法来释放迭代器对象所占用的资源，但大多数迭代器都不需要实现这个方法。throw(exc) 更是一个特例：在遍历过程中该方法永远都不会被调用，关于这个方法，我会在下一篇文章详细介绍。

现在我们知道了 for-of 的所有细节，那么我们可以简单地重写该语句。

首先是 for-of 循环体：

for (VAR of ITERABLE) {
 STATEMENTS
}
 
for (VAR of ITERABLE) {
 STATEMENTS
}

这只是一个语义化的实现，使用了一些底层方法和几个临时变量：

var $iterator = ITERABLE[Symbol.iterator]();
var $result = $iterator.next();
while (!$result.done) {
 VAR = $result.value;
 STATEMENTS
 $result = $iterator.next();
}

 
var $iterator = ITERABLE[Symbol.iterator]();
var $result = $iterator.next();
while (!$result.done) {
 VAR = $result.value;
 STATEMENTS
 $result = $iterator.next();
}

上面代码并没有涉及到如何调用 .return() 方法，我们可以添加相应的处理，但我认为这样会影响我们对内部原理的理解。for-of 语句使用起来非常简单，但在其内部有非常多的细节。
兼容性

目前，所有 Firefox 的 Release 版本都已经支持 for-of 语句。Chrome 默认禁用了该语句，你可以在地址栏输入 chrome://flags 进入设置页面，然后勾选其中的 “Experimental JavaScript” 选项。微软的 Spartan 浏览器也支持该语句，但是 IE 不支持。如果你想在 Web 开发中使用该语句，而且需要兼容 IE 和 Safari 浏览器，你可以使用 Babel 或 Google 的 Traceur 这类编译器，来将 ES6 代码转换为 Web 友好的 ES5 代码。

对于服务器端，我们不需要任何编译器 — 可以在 io.js 中直接使用该语句，或者在 NodeJS 启动时使用 --harmony 启动选项。

{done: true}