Penjelasan mendalam mengenai Iterator dan for-of-gelung dalam pengetahuan JavaScript_Basic

Bagaimana untuk melintasi elemen tatasusunan? 20 tahun yang lalu, apabila JavaScript disertakan, anda mungkin telah melakukan ini:

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

Sejak ES5, anda boleh menggunakan kaedah terbina dalam untukSetiap:

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

Kod ini lebih diselaraskan, tetapi terdapat kelemahan kecil: anda tidak boleh menggunakan pernyataan putus untuk melompat keluar dari gelung, dan anda juga tidak boleh menggunakan pernyataan pulangan untuk kembali daripada fungsi penutupan.

Adalah lebih mudah jika terdapat sintaks untuk untuk melintasi tatasusunan.

Jadi, bagaimana pula dengan menggunakan for-in?

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

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

Ini tidak bagus kerana:

Pembolehubah indeks dalam kod di atas akan menjadi rentetan seperti "0", "1", "3", dll., bukannya jenis angka. Jika anda menggunakan indeks rentetan untuk mengambil bahagian dalam beberapa operasi ("2" 1 == "21"), hasilnya mungkin tidak seperti yang diharapkan.
Bukan sahaja elemen tatasusunan itu sendiri akan dilalui, tetapi elemen tambahan (expando) yang ditambahkan oleh pengguna akan dilalui Contohnya, jika tatasusunan mempunyai atribut myArray.name, maka index="name akan muncul dalam situasi gelung tertentu. Selain itu, malah sifat pada rantaian prototaip tatasusunan boleh dilalui.
Perkara yang paling luar biasa ialah dalam beberapa kes, kod di atas akan merentasi elemen tatasusunan dalam sebarang susunan.

Ringkasnya, for-in direka untuk melintasi objek yang mengandungi pasangan nilai kunci dan tidak begitu mesra kepada tatasusunan.
untuk gelung yang berkuasa

Ingat perkara yang saya nyatakan pada kali lepas, ES6 tidak akan menjejaskan operasi biasa kod JS sedia ada Beribu-ribu aplikasi web sudah bergantung pada ciri untuk-masuk, malah bergantung pada untuk-masuk untuk ciri tatasusunan, jadi tiada siapa. pernah mencadangkan "memperbaiki" sintaks for-in sedia ada untuk menyelesaikan masalah di atas. Satu-satunya cara ES6 menyelesaikan masalah ini ialah dengan memperkenalkan sintaks traversal gelung baharu.

Ini ialah sintaks baharu:

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

Dengan memperkenalkan sintaks untuk masuk di atas, sintaks ini tidak kelihatan begitu mengagumkan. Kami akan memperkenalkan keajaiban for-of secara terperinci kemudian, kini anda hanya perlu tahu:

• Ini adalah cara paling mudah dan paling langsung untuk melintasi tatasusunan
• Mengelakkan semua perangkap sintaks for–in
• Tidak seperti forEach(), ia menyokong penyataan break, continue dan return.

for–in digunakan untuk mengulangi sifat objek.

for-of digunakan untuk mengulangi data — sama seperti elemen dalam tatasusunan.

Walau bagaimanapun, ini bukan semua ciri for-of, terdapat bahagian yang lebih menarik di bawah.
Koleksi lain yang menyokong untuk

for-of bukan sahaja direka untuk tatasusunan, tetapi juga boleh digunakan untuk objek seperti tatasusunan, seperti NodeList, koleksi objek DOM.

juga boleh digunakan untuk melintasi rentetan, yang menganggap rentetan itu sebagai koleksi aksara Unikod:

Ia juga berfungsi dengan objek Peta dan Tetapkan.

Mungkin anda tidak pernah mendengar tentang objek Peta dan Set, kerana ia adalah objek baharu dalam ES6, dan akan ada artikel berasingan untuk memperkenalkannya secara terperinci kemudian. Jika anda telah menggunakan kedua-dua objek ini dalam bahasa lain, ia lebih mudah.

Sebagai contoh, anda boleh menggunakan objek Set untuk menyahduplikasi elemen tatasusunan:

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

Selepas mendapat objek Set, kemungkinan besar anda akan melintasi objek Ini sangat mudah:

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

Objek peta terdiri daripada pasangan nilai kunci, dan kaedah traversal sedikit berbeza Anda perlu menggunakan dua pembolehubah bebas untuk menerima kunci dan nilai masing-masing:

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

Setakat ini, anda sudah tahu: JS sudah menyokong beberapa objek koleksi dan akan menyokong lebih banyak lagi pada masa hadapan. Sintaks for-of direka untuk objek koleksi ini.

for-of tidak boleh digunakan secara langsung untuk melintasi sifat objek Jika anda ingin melintasi sifat objek, anda boleh menggunakan pernyataan for-in (untuk-dalam digunakan untuk ini), atau gunakan kaedah berikut:

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