ES6 迭代器簡述
Iterator
Iterator 是 ES6 引入的一種遍歷機制，迭代器有兩個核心概念：
- 迭代器是一個統一的介面，它的作用是使各種資料結構可被便捷地訪問，它是通過一個鍵為Symbol.iterator 的方法來實現。
- 迭代器是用於遍歷資料結構元素的指標（如資料庫中的遊標）。
迭代過程
迭代的過程如下：
- 通過 Symbol.iterator 建立一個迭代器，指向當前資料結構的起始位置
- 隨後通過 next 方法進行向下迭代指向下一個位置， next 方法會返回當前位置的物件，物件包含了 value 和 done 兩個屬性， value 是當前屬性的值， done 用於判斷是否遍歷結束
- 當 done 為 true 時則遍歷結束
下面通過一個簡單的例子進行說明：
const items = [\"zero\", \"one\", \"two\"];
const it = items[Symbol.iterator]();
it.next();
// {value: \"zero\", done: false}
it.next();
// {value: \"one\", done: false}
it.next();
// {value: \"two\", done: false}
it.next();
// {value: undefined, done: true}上面的例子，首先建立一個數組，然後通過 Symbol.iterator 方法建立一個迭代器，之後不斷地呼叫 next 方法對陣列內部項進行訪問，當屬性 done 為 true 時訪問結束。
迭代器是協議（使用它們的規則）的一部分，用於迭代。該協議的一個關鍵特性就是它是順序的：迭代器一次返回一個值。這意味著如果可迭代資料結構是非線性的（例如樹），迭代將會使其線性化。
可迭代的資料結構
以下是可迭代的值:
- Array
- String
- Map
- Set
- Dom元素（正在進行中）
我們將使用 for...of 迴圈（參見下文的 for...of 迴圈）對資料結構進行迭代。
Array
陣列 ( Array ) 和型別陣列 ( TypedArray ) 他們是可迭代的。
for (let item of [\"zero\", \"one\", \"two\"]) { console.log(item); } // zero // one // two
String
字串是可迭代的，但他們遍歷的是 Unicode 碼，每個碼可能包含一個到兩個的 Javascript 字元。
for (const c of \'z\\uD83D\\uDC0A\') {
console.log(c);
}
// z
// \\uD83D\\uDC0AMap
Map 主要是迭代它們的 entries ，每個 entry 都會被編碼為 [key, value] 的項， entries 是以確定的形式進行迭代，其順序是與新增的順序相同。
const map = new Map();
map.set(0, \"zero\");
map.set(1, \"one\");
for (let item of map) {
console.log(item);
}
// [0, \"zero\"]
// [1, \"one\"]注意： WeakMaps 不可迭代
Set
Set 是對其元素進行迭代，迭代的順序與其新增的順序相同
const set = new Set();
set.add(\"zero\");
set.add(\"one\");
for (let item of set) {
console.log(item);
}
// zero
// one注意： WeakSets 不可迭代
arguments
arguments 目前在 ES6 中使用越來越少，但也是可遍歷的
function args() {
for (let item of arguments) {
console.log(item);
}
}
args(\"zero\", \"one\");
// zero
// one普通物件不可迭代
普通物件是由 object 建立的，不可迭代：
// TypeError
for (let item of {}) {
console.log(item);
}
// Uncaught TypeError: {} is not iterablefor...of迴圈
for...of 是 ES6 新引入的迴圈，用於替代 for..in 和 forEach() ，並且支援新的迭代協議。它可用於迭代常規的資料型別，如 Array 、 String 、 Map 和 Set 等等。
迭代常規資料型別
Array
const nums = [\"zero\", \"one\", \"two\"];
for (let num of nums) {
console.log(num);
}
// zero
// one
// two
const typedArray1 = new Int8Array(6);
typedArray1[0] = 10;
typedArray1[1] = 11;
for (let item of typedArray1) {
console.log(item);
}
// 10
// 11
// 0
// 0
// 0
// 0String
const str = \"zero\";
for (let item of str) {
console.log(item);
}
// z
// e
// r
// oMap
let myMap = new Map();
myMap.set(0, \"zero\");
myMap.set(1, \"one\");
myMap.set(2, \"two\");
// 遍歷 key 和 value
for (let [key, value] of myMap) {
console.log(key + \" = \" + value);
}
for (let [key, value] of myMap.entries()) {
console.log(key + \" = \" + value);
}
// 只遍歷 key
for (let key of myMap.keys()) {
console.log(key);
}
// 只遍歷 value
for (let value of myMap.values()) {
console.log(value);
}Set
let mySet = new Set();
mySet.add(\"zero\");
mySet.add(\"one\");
mySet.add(\"two\");
// 遍歷整個 set
for (let item of mySet) {
console.log(item);
}
// 只遍歷 key 值
for (let key of mySet.keys()) {
console.log(key);
}
// 只遍歷 value
for (let value of mySet.values()) {
console.log(value);
}
// 遍歷 key 和 value ，兩者會相等
for (let [key, value] of mySet.entries()) {
console.log(key + \" = \" + value);
}可迭代的資料結構
of 運算元必須是可迭代，這意味著如果是普通物件則無法進行迭代。如果資料結構類似於陣列的形式，則可以藉助 Array.from() 方法進行轉換迭代。
const arrayLink = {
length: 2,
0: \"zero\",
1: \"one\"
}
// 報 TypeError 異常
for (let item of arrayLink) {
console.log(item);
}
// 正常執行
for (let item of Array.from(arrayLink)) {
console.log(item);
}
// output:
// zero
// one let 、const 和 var 用於 for..of
如果使用 let 和 const ，每次迭代將會建立一個新的儲存空間，這可以保證作用域在迭代的內部。
const nums = [\"zero\", \"one\", \"two\"];
for (const num of nums) {
console.log(num);
}
// 報 ReferenceError
console.log(num);從上面的例子我們看到，最後一句會報異常，原因 num 的作用域只在迴圈體內部，外部無效。使用 var 則不會出現上述情況，因為 var 會作用於全域性，迭代將不會每次都建立一個新的儲存空間。
const nums = [\"zero\", \"one\", \"two\"];
forv (var num of nums) {
console.log(num);
}
console.log(num);
// output: two~
~
~本文完，感謝閱讀！
~
學習有趣的知識，結識有趣的朋友，塑造有趣的靈魂！
我是〖程式設計三昧〗的作者 隱逸王，我的公眾號是『程式設計三昧』，歡迎關注，希望大家多多指教！
你來，懷揣期望，我有墨香相迎！ 你歸，無論得失，唯以餘韻相贈！
知識與技能並重，內力和外功兼修，理論和實踐兩手都要抓、兩手都要硬！