聊聊 for of
說起 for of 相信每個寫過 JavaScript 的人都用過 for of ，平時我們用它做什麼呢？大多數情況應該就是遍歷陣列了，當然，更多時候，我們也會用 map() 或者 filer() 來遍歷一個陣列。 但是就像我們標題裡面說的，它跟 Generator 能扯上什麼關係呢？
首先我們想一個問題，為什麼使用 for of 或者 map()/filer() 方法就可以遍歷一個陣列 (或者類陣列物件: Strings , Maps , Sets , arguments ) 呢？ 為什麼不能用他們來遍歷一個物件呢？
你能學到什麼
- 對
for of更深入的理解 iterator到底是何方神聖?- 陣列也是物件，為什麼不能用
for of來遍歷物件呢？ - 如何實現物件的
for of? Generator又是何方神聖？他有什麼用呢？
類陣列物件的玄機
在真正揭開謎底之前，站在 for of 的角度想一下，現在讓你去遍歷一個陣列，你需要知道什麼資訊呢？
- 對應下標的值
- 是否遍歷結束的標誌
帶著這樣的思考，我們列印一個陣列來看看這裡面的玄機：
const numbersArray = [1, 2, 3];
console.dir(numbersArray);
複製程式碼陣列 (或者類陣列物件: Strings , Maps , Sets , arguments ) 的原型中都實現了一個方法 Symbol.iterator，問題來了，那麼這個 Symbol.iterator 又有什麼用呢？ 拿出來試一下就知道了：
let iterator = numbersArray[Symbol.iterator]();
// 我們把這個 Symbol.iterator 列印一下看看裡面到底有些什麼
console.dir(iterator);
複製程式碼這裡有一個 next() 方法對嗎？執行這個 next() 方法：
iterator.next(); // 輸出 {value: 1, done: false}
iterator.next(); // 輸出 {value: 2, done: false}
iterator.next(); // 輸出 {value: 3, done: false}
iterator.next(); // 輸出 {value: undefined, done: true}
複製程式碼請注意，當下標超出時，value: undefined
我們發現這個 iterator.next() 每次都返回了一個物件。這物件包含兩個資訊：當前下標的值，以及遍歷是否結束的標誌。這印證了我們之前思考，有了這兩個資訊，你作為 for of 函式，也能列印出陣列的每一項了不是嗎？
新的問題來了，iterator 到底是何方神聖呢？
iterator(迭代器) & The iterator protocol（迭代協議）
聊到了 iterator 我們不得不先說一下 The iterator protocol（迭代協議）
MDN 上是這麼說的：The iterator protocol 允許 JavaScript 物件去定義或定製它們的迭代行為 ，所以上面出現的 Symbol.iterator 這個方法，就是陣列對於這個協議的實現。那麼按照這個協議，陣列是怎麼實現了一個 iterator 呢？
這一大段看起來比較費勁，簡單來說就像我們上一章節所印證的，它實現的方式是定義了一個 next() 方法，而這個 next() 方法每次被執行都會返回一個物件: {value:xxx/undefined , done: true/false } 其中 value 代表的是當前遍歷到的值，done 代表是否遍歷結束。
本小節回答了我們之前的提問: 為什麼不能用 for of 來遍歷一個物件呢？ 原因很簡單：JavaScript 的物件中沒有實現一個這樣的 iterator 。你可以列印一個物件來看看結果如何：
console.dir({ a: 1, b: 2 });
複製程式碼okay, 到這裡如果就結束的話，那我們瞭解得還不夠深入，於是再問一個問題：
Why is there no built-in object iteration ？ （為什麼在 object 中沒有內建迭代器呢? ）
為什麼在 object 中沒有內建迭代器呢?
對啊，為什麼呢？ 我們在各樣的場景中也需要來遍歷一個物件啊？為什麼沒有內建一個迭代器呢？要回答這個問題，我們得從另外一個角度出發，瞭解一些基本的概念：
我們常常說遍歷物件，但是簡單來說，只會在兩種層級上來對一個 JavaScript 物件進行遍歷：
-
程式的層級 - 什麼意思呢？在程式層級上，我們對一個物件進行迭代，是在迭代展示其結構的物件屬性。 可能還不是很好理解，舉個例子：
Array.prototype.length這個屬性與物件的結構相關，但卻不是它的資料。 -
資料的層級 - 意味著迭代資料結構並提取它的資料。舉個例子：我們在迭代一個陣列的時候，迭代器是對於它的 每一個資料進行迭代，如果
array = [a, b, c, d]那麼迭代器訪問到的是1, 2, 3, 4。
明白了這個緣由，JavaScript 雖然不支援用 for of 來遍歷物件，但是提供了一個 for in 方法來遍歷所有非 Symbol 型別並且是可列舉的屬性。
標準不支援，如果我們就是要用 for-of 來遍歷物件呢？那我們可以任性的實現一個啊：
Object.prototype[Symbol.iterator] = function*() {
for (const [key, value] of Object.entries(this)) {
yield { key, value };
}
};
複製程式碼for (const { key, value } of { a: 1, b: 2, c: 3 }) {
console.log(key, value);
}
複製程式碼不知道你有沒有注意一個細節，在我們任性的實現一個 iterator 的程式碼中，我們用到了一個很奇怪的結構 function*() {} ，這個就是我們接下來要介紹的 Generator
Generators
看到這個名字覺得很厲害哈，但其實很簡單，寫一個 Generator 你只需要在函式名和 function 關鍵字中間加一個 * 號就可以了。至於裡面的 yield 是什麼，後面會說的。
talk is cheap , show me the code ,用一個例子，簡單說一下概念。
我們現在定義了一個這樣的 Generator 叫做 gen
function* gen() {
yield 1;
yield 2;
yield 3;
yield 4;
}
複製程式碼我們只能看到，這裡面有 4 個語句，那列印一下看看唄：
這裡發現了一個熟悉的函式，next() 方法，我們把 gen 例項化一下，執行一下它的 next() 來看看結果：
還是熟悉的味道，那麼到這裡，我們已經知道，Generator 可以例項化出一個 iterator ，並且這個 yield 語句就是用來中斷程式碼的執行的，也就是說，配合 next() 方法，每次只會執行一個 yield 語句。
多說一句，針對 Generator 本身，還有一個有意思的特性，yield 後面可以跟上另一個 Generator 並且他們會按照次序執行：
function* gen() {
yield 1;
yield* gen2();
return;
}
function* gen2() {
yield 4;
yield 5;
}
let iterator = gen();
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
複製程式碼結果很有意思不是嗎？而且 return 會終結整個 Generator ，換句話說：寫在 return 後面的 yield 不會執行。
Generator 有什麼用?
Generator 有什麼用? 聰明的同學可能已經猜到了，是的，它能夠中斷執行程式碼的特性，可以幫助我們來控制非同步程式碼的執行順序：
例如有兩個非同步的函式 A 和 B, 並且 B 的引數是 A 的返回值，也就是說，如果 A 沒有執行結束，我們不能執行 B。
那這時候我們寫一段虛擬碼：
function* effect() {
const { param } = yield A();
const { result } = yield B(param);
console.table(result);
}
複製程式碼這時候我們如果需要得到 result 那麼我們就需要:
const iterator = effect()
iterator.next()
iterator.next()
複製程式碼執行兩次 next() 得到結果，看起來很傻不是嗎？有沒有好的辦法呢？（廢話，肯定有啊）
假設你在每次執行 A() / B() 的請求結束之後，都會自動執行 next() 方法呢？這不就解決了嗎?
這樣的庫早就存在了，建議大家參考 co 的原始碼，當然你也可以通過閱讀 這篇文章 來看看，到底 Generator 是怎麼玩的。
最後
小冊 你不知道的 Chrome 除錯技巧 已經開始預售啦。
歡迎關注公眾號 「前端惡霸」，掃碼關注，會有很多好東西等著你~