Une explication approfondie des boucles Iterator et for-of dans les connaissances JavaScript_Basic

Comment parcourir les éléments d'un tableau ? Il y a 20 ans, lorsque JavaScript est apparu, vous auriez pu faire ceci :

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

Depuis ES5, vous pouvez utiliser la méthode forEach intégrée :

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

Le code est plus simple, mais il y a un petit inconvénient : vous ne pouvez pas utiliser l'instruction break pour sortir de la boucle, ni l'instruction return pour revenir de la fonction de fermeture.

Ce serait beaucoup plus pratique s'il y avait une syntaxe for- pour parcourir le tableau.

Alors, que diriez-vous d'utiliser le for-in ?

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

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

Ce n'est pas bien parce que :

La variable d'index dans le code ci-dessus sera constituée de chaînes telles que "0", "1", "3", etc., plutôt que de types numériques. Si vous utilisez l'index d'une chaîne pour participer à certaines opérations ("2" 1 == "21"), les résultats risquent de ne pas être ceux attendus.
Non seulement les éléments du tableau lui-même seront parcourus, mais également les éléments supplémentaires (expando) ajoutés par l'utilisateur. Par exemple, si un tableau a un tel attribut myArray.name, alors index="name apparaîtra dans. une certaine boucle. De plus, même les propriétés de la chaîne de prototypes de tableau peuvent être traversées.
Le plus incroyable est que dans certains cas, le code ci-dessus parcourra les éléments du tableau dans n'importe quel ordre.

Pour faire simple, for-in est conçu pour parcourir des objets contenant des paires clé-valeur et n'est pas aussi convivial pour les tableaux.
Puissante boucle for-of

Rappelez-vous ce que j'ai mentionné la dernière fois, ES6 n'affectera pas le fonctionnement normal du code JS existant. Des milliers d'applications Web s'appuient déjà sur la fonctionnalité for-in, et s'appuient même sur for-in pour les caractéristiques des tableaux, donc personne. a déjà proposé "d'améliorer" la syntaxe for-in existante pour résoudre les problèmes ci-dessus. La seule façon dont ES6 résout ce problème est d’introduire une nouvelle syntaxe de parcours de boucle.

Voici la nouvelle syntaxe :

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

En introduisant la syntaxe for-in ci-dessus, cette syntaxe n'a pas l'air si impressionnante. Nous présenterons les merveilles de for-of en détail plus tard, il ne vous reste plus qu'à savoir :

• C'est le moyen le plus simple et le plus direct de parcourir un tableau
• Évite tous les pièges de la syntaxe for–in
• Contrairement à forEach(), il prend en charge les instructions break, continue et return.

for–in est utilisé pour parcourir les propriétés d'un objet.

for-of est utilisé pour parcourir les données, tout comme les éléments d'un tableau.

Cependant, ce ne sont pas toutes les fonctionnalités de for-of, il y a des parties plus intéressantes ci-dessous.
Autres collections prenant en charge for-of

for-of n'est pas seulement conçu pour les tableaux, mais peut également être utilisé pour des objets de type tableau, tels que NodeList, une collection d'objets DOM.

peut également être utilisé pour parcourir une chaîne, qui traite la chaîne comme une collection de caractères Unicode :

Cela fonctionne également avec les objets Map et Set.

Peut-être n'avez-vous jamais entendu parler des objets Map et Set, car ce sont de nouveaux objets dans ES6, et il y aura des articles séparés pour les présenter en détail plus tard. Si vous avez utilisé ces deux objets dans d’autres langages, c’est beaucoup plus simple.

Par exemple, vous pouvez utiliser un objet Set pour dédupliquer les éléments du tableau :

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);

Après avoir obtenu un objet Set, vous traverserez très probablement l'objet. C'est très simple :

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

Les objets Map sont composés de paires clé-valeur et la méthode de parcours est légèrement différente. Vous devez utiliser deux variables indépendantes pour recevoir respectivement la clé et la valeur :

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);
}

Jusqu'à présent, vous le savez déjà : JS prend déjà en charge certains objets de collection, et en prendra davantage en charge à l'avenir. La syntaxe for-of est conçue pour ces objets de collection.

for-of ne peut pas être utilisé directement pour parcourir les propriétés d'un objet, si vous souhaitez parcourir les propriétés d'un objet, vous pouvez utiliser l'instruction for-in (for-in est utilisé pour cela), ou utiliser l'instruction for-of. méthode suivante :

// 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}