es6 中的generator函數控制流程

時間 2019-12-12

標籤 es6 generator 函數控制流程欄目 JavaScript 简体版

原文原文鏈接

Generator函數跟普通函數的寫法有很是大的區別：javascript

一是，function關鍵字與函數名之間有一個星號；
二是，函數體內部使用yield語句，定義不一樣的內部狀態（yield在英語裏的意思就是「產出」）。html

最簡單的Generator函數以下：java

function* g() { yield 'a'; yield 'b'; yield 'c'; return 'ending'; } g(); // 返回一個對象

g函數呢，有四個階段，分別是'a','b','c','ending'。jquery

Generator 函數神奇之一：g()並不執行g函數

g()並不會執行g函數，返回的也不是函數運行結果，而是一個指向內部狀態的指針對象，也就是迭代器對象（Iterator Object）。ajax

Generator 函數神奇之二：分段執行

先看以下代碼：編程

function* g() { yield 'a'; yield 'b'; yield 'c'; return 'ending'; } var gen = g(); gen.next(); // 返回Object {value: "a", done: false}

gen.next()返回一個很是很是簡單的對象{value: "a", done: false}，'a'就是g函數執行到第一個yield語句以後獲得的值，false表示g函數尚未執行完，只是在這暫停。數組

若是再寫一行代碼，仍是gen.next();，這時候返回的就是{value: "b", done: false}，說明g函數運行到了第二個yield語句，返回的是該yield語句的返回值'b'。返回以後依然是暫停。promise

再寫一行gen.next();返回{value: "c", done: false}，再寫一行gen.next();，返回{value: "ending", done: true}，這樣，整個g函數就運行完畢了。安全

提問：若是再寫一行gen.next();呢？
答：返回{value: undefined, done: true}，這樣沒意義。服務器

提問：若是g函數沒有return語句呢？
答：那麼第三次.next()以後就返回{value: undefined, done: true}，這個第三次的next()惟一意義就是證實g函數所有執行完了。

提問：若是g函數的return語句後面依然有yield呢？
答：js的老規定：return語句標誌着該函數全部有效語句結束，return下方還有多少語句都是無效，白寫。

提問：若是g函數沒有yield和return語句呢？
答：第一次調用next就返回{value: undefined, done: true}，以後也是{value: undefined, done: true}。

提問：若是隻有return語句呢？
答：第一次調用就返回{value: xxx, done: true}，其中xxx是return語句的返回值。以後永遠是{value: undefined, done: true}。

提問：下面代碼會有什麼結果？

function* g() { var o = 1; yield o++; yield o++; yield o++; } var gen = g(); console.log(gen.next()); // 1 var xxx = g(); console.log(gen.next()); // 2 console.log(xxx.next()); // 1 console.log(gen.next()); // 3

答：見上面註釋。每一個迭代器之間互不干擾，做用域獨立。

繼續提問：若是第二個yield o++;改爲yield;會怎樣？
答：那麼指針指向這個yield的時候，返回{value: undefined, done: false}。

繼續提問：若是第二個yield o++;改爲o++;yield;會怎樣？
答：那麼指針指向這個yield的時候，返回{value: undefined, done: false}，由於返回的永遠是yield後面的那個表達式的值。

因此如今能夠看出，每次調用next方法，內部指針就從函數頭部或上一次停下來的地方開始執行，直到遇到下一個yield語句（或return語句）爲止。換言之，Generator函數是分段執行的，yield語句是暫停執行的標記，而next方法能夠恢復執行。

總之，每調用一次Generator函數，就返回一個迭代器對象，表明Generator函數的內部指針。之後，每次調用迭代器對象的next方法，就會返回一個有着value和done兩個屬性的對象。value屬性表示當前的內部狀態的值，是yield語句後面那個表達式的值；done屬性是一個布爾值，表示是否遍歷結束。

因此能夠看出，Generator 函數的特色就是：

一、分段執行，能夠暫停
二、能夠控制階段和每一個階段的返回值
三、能夠知道是否執行到結尾

yield語句

迭代器對象的next方法的運行邏輯以下。

（1）遇到yield語句，就暫停執行後面的操做，並將緊跟在yield後面的那個表達式的值，做爲返回的對象的value屬性值。

（2）下一次調用next方法時，再繼續往下執行，直到遇到下一個yield語句。

（3）若是沒有再遇到新的yield語句，就一直運行到函數結束，直到return語句爲止，並將return語句後面的表達式的值，做爲返回的對象的value屬性值。

（4）若是該函數沒有return語句，則返回的對象的value屬性值爲undefined。

yield語句與return語句既有類似之處，也有區別。

類似之處在於，都能返回緊跟在語句後面的那個表達式的值。

區別在於每次遇到yield，函數暫停執行，下一次再從該位置繼續向後執行，而return語句不具有位置記憶的功能。一個函數裏面，只能執行一次（或者說一個）return語句，可是能夠執行屢次（或者說多個）yield語句。正常函數只能返回一個值，由於只能執行一次return；Generator函數能夠返回一系列的值，由於能夠有任意多個yield。從另外一個角度看，也能夠說Generator生成了一系列的值，這也就是它的名稱的來歷（在英語中，generator這個詞是「生成器」的意思）。

注意：yield語句只能用於function*的做用域，若是function*的內部還定義了其餘的普通函數，則函數內部不容許使用yield語句。

注意：yield語句若是參與運算，必須用括號括起來。

console.log(3 + yield 4); // 語法錯誤 console.log(3 + (yield 4)); // 打印7

next方法能夠有參數

一句話說，next方法參數的做用，是覆蓋掉上一個yield語句的值。

function* g() { var o = 1; var a = yield o++; console.log('a = ' + a); var b = yield o++; } var gen = g(); console.log(gen.next()); console.log('------'); console.log(gen.next(11));

獲得：

Paste_Image.png

首先說，console.log(gen.next());的做用就是輸出了{value: 1, done: false}，注意var a = yield o++;，因爲賦值運算是先計算等號右邊，而後賦值給左邊，因此目前階段，只運算了yield o++，並無賦值。

而後說，console.log(gen.next(11));的做用，首先是執行gen.next(11)，獲得什麼？首先：把第一個yield o++重置爲11，而後，賦值給a，再而後，console.log('a = ' + a);，打印a = 11，繼續而後，yield o++，獲得2，最後打印出來。

從這咱們看出了端倪：帶參數跟不帶參數的區別是，帶參數的狀況，首先第一步就是將上一個yield語句重置爲參數值，而後再照常執行剩下的語句。總之，區別就是先有一步先重置值，接下來其餘全都同樣。

這個功能有很重要的語法意義，經過next方法的參數，就有辦法在Generator函數開始運行以後，繼續向函數體內部注入值。也就是說，能夠在Generator函數運行的不一樣階段，從外部向內部注入不一樣的值，從而調整函數行爲。

提問：第一個.next()能夠有參數麼？
答：設這樣的參數沒任何意義，由於第一個.next()的前面沒有yield語句。

for...of循環

for...of循環能夠自動遍歷Generator函數時生成的Iterator對象，且此時再也不須要調用next方法。for...of循環的基本語法是：

for (let v of foo()) { console.log(v); }

其中foo()是迭代器對象，能夠把它賦值給變量，而後遍歷這個變量。

function* foo() { yield 1; yield 2; yield 3; yield 4; yield 5; return 6; } let a = foo(); for (let v of a) { console.log(v); } // 1 2 3 4 5

上面代碼使用for...of循環，依次顯示5個yield語句的值。這裏須要注意，一旦next方法的返回對象的done屬性爲true，for...of循環就會停止，且不包含該返回對象，因此上面代碼的return語句返回的6，不包括在for...of循環之中。

下面是一個利用Generator函數和for...of循環，實現斐波那契數列的例子。

斐波那契數列是什麼？它指的是這樣一個數列 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144........
這個數列前兩項是0和1，從第3項開始，每一項都等於前兩項之和。

function* fibonacci() { let [prev, curr] = [0, 1]; for (;;) { // 這裏請思考：爲何這個循環不設定結束條件？ [prev, curr] = [curr, prev + curr]; yield curr; } } for (let n of fibonacci()) { if (n > 1000) { break; } console.log(n); }

Generator.prototype.throw()

Generator函數返回的迭代器對象，都有一個throw方法，能夠在函數體外拋出錯誤，而後在Generator函數體內捕獲。

既然個人文章是簡單理解Generator函數，因此錯誤捕獲直接跳過。

Generator.prototype.return()

Generator函數返回的迭代器對象，還有一個return方法，能夠返回給定的值，而且終結遍歷Generator函數。

function* gen() { yield 1; yield 2; yield 3; } var g = gen(); console.log(g.next()); // { value: 1, done: false } console.log(g.return('foo')); // { value: "foo", done: true } console.log(g.next()); // {value: undefined, done: true}

就是說，return的參數值覆蓋本次yield語句的返回值，而且提早終結遍歷，即便後面還有yield語句也一概無視。

提問：return方法跟next方法的區別都有哪些？
答：
一、return終結遍歷，以後的yield語句都失效；next返回本次yield語句的返回值。
二、return沒有參數的時候，返回{ value: undefined, done: true }；next沒有參數的時候返回本次yield語句的返回值。
三、return有參數的時候，覆蓋本次yield語句的返回值，也就是說，返回{ value: 參數, done: true }；next有參數的時候，覆蓋上次yield語句的返回值，返回值可能跟參數有關（參數參與計算的話），也可能跟參數無關（參數不參與計算）。

yield*語句

若是你打算在Generater函數內部，調用另外一個Generator函數，默認狀況下是沒有效果的。好比：

function* foo() { yield 'a'; yield 'b'; } function* bar() { yield 'x'; foo(); yield 'y'; } for (let v of bar()){ console.log(v); } // "x" // "y"

可見，並無遍歷出'a'和'b'。那麼若是想在一個Generator函數裏調用另外一個Generator函數，怎麼辦？用yield*語句。好比：

function* bar() { yield 'x'; yield* foo(); yield 'y'; } // 上個函數等同於 function* bar() { yield 'x'; yield 'a'; yield 'b'; yield 'y'; } // 也等同於 function* bar() { yield 'x'; for (let v of foo()) { yield v; } yield 'y'; } for (let v of bar()){ console.log(v); } // "x" // "a" // "b" // "y"

也就是說，咱們約定被調用的Generator函數爲A函數，調用A函數的Generator函數爲B函數。yield*語句的做用，就是遍歷一遍A函數的迭代器對象。A函數（沒有return語句時）是for...of的一種簡寫形式，徹底能夠用for...of替代yield*。反之，因爲B函數的return語句，不會被yield*遍歷，因此須要用var value = yield* iterator的形式獲取return語句的值。

function *foo() { yield 2; yield 3; return "foo"; } function *bar() { yield 1; var v = yield *foo(); console.log( "v: " + v ); yield 4; } var it = bar(); it.next() // {value: 1, done: false} it.next() // {value: 2, done: false} it.next() // {value: 3, done: false} it.next(); // "v: foo" // {value: 4, done: false} it.next() // {value: undefined, done: true}

上面代碼在第四次調用next方法的時候，屏幕上會有輸出，這是由於函數foo的return語句，向函數bar提供了返回值。

提問：若是不寫*會怎樣？
答：yield語句會返回迭代器對象。

提問：若是寫兩遍yield* foo();會獲得什麼？
答：

a
b
a
b

提問：若是yield*語句後面跟着一個數組會怎樣？
答：

function* gen(){ yield* ["a", "b", "c"]; } gen().next() // { value:"a", done:false }

這說明，任何數據結構只要有Iterator接口，就能夠被yield*遍歷。數組有這個接口。

Generator函數到底怎麼用於異步編程？

Generator能夠暫停函數執行，返回任意表達式的值。這種特色使得Generator有多種應用場景。

狀態機

Generator是實現狀態機的最佳結構。好比，下面的clock函數就是一個常規寫法的狀態機。

var ticking = true; var clock = function() { if (ticking) console.log('Tick!'); else console.log('Tock!'); ticking = !ticking; }

上面代碼的clock函數一共有兩種狀態（Tick和Tock），每運行一次，就改變一次狀態。這個函數若是用Generator實現，就是下面這樣。

var clock = function*() { while (true) { console.log('Tick!'); yield; console.log('Tock!'); yield; } };

能夠看到，Generator 函數實現的狀態機不用設初始變量，不用切換狀態，上面的Generator函數實現與ES5實現對比，能夠看到少了用來保存狀態的外部變量ticking，這樣就更簡潔，更安全（狀態不會被非法篡改）、更符合函數式編程的思想，在寫法上也更優雅。Generator之因此能夠不用外部變量保存狀態，是由於它自己就包含了第一個狀態和第二個狀態。

異步操做的同步化寫法

下面這個天然段很是重要！很是重要！很是重要！

Generator函數的暫停執行的效果，意味着能夠把異步操做寫在yield語句裏面，等到調用next方法時再日後執行。這實際上等同於不須要寫回調函數了，由於異步操做的後續操做能夠放在yield語句下面，反正要等到調用next方法時再執行。因此，Generator函數的一個重要實際意義就是用來處理異步操做，改寫回調函數。

舉個例子，好比我在測試服務器的某目錄建了4個文件，分別是'test.html'、'a.html'、'b.html'、'c.html'，後三個文件的文件內容跟文件名相同，如今我編輯'test.html'的代碼，想要先ajax-get相對網址'a.html'，而後再回調裏ajax-get相對網址'b.html'，而後在回調裏ajax-get相對網址'c.html'，常規的寫法是（用上jQuery）：

$.get('a.html',function(dataa) { console.log(dataa); $.get('b.html',function(datab) { console.log(datab); $.get('c.html',function(datac) { console.log(datac); }); }); }); // a.html // b.html // c.html

能夠看到，就算用上jquery，也依然是回調地獄的既視感，對不對？那麼改爲生成器函數寫法是：

function request(url) { $.get(url, function(response){ it.next(response); }); } function* ajaxs() { console.log(yield request('a.html')); console.log(yield request('b.html')); console.log(yield request('c.html')); } var it = ajaxs(); it.next(); // a.html // b.html // c.html

能夠看到，輸出結果也是這樣。咱們分析一下：

首先咱們定義了一個普通的request函數，初步分析它的做用是：接受一個url參數，經過異步操做獲得response，而後把response做爲參數傳給it.next()，執行it.next()。可能你還沒看懂，不要緊，繼續看：

接着咱們定義了一個叫ajaxs的生成器函數，它的代碼挺整齊的。沒看懂也沒關係，先不說它。

最後是兩個語句var it = ajaxs(); it.next();，這兩句最簡單，你固然能看懂，就是定義一個叫it的迭代器對象，而後執行it.next();。

當執行了it.next();以後，開始遍歷ajaxs()對象。ajaxs函數的執行順序在這必須講，由於它是異步代碼表現改寫成同步代碼表現的核心關鍵。記住簡單一句話：只有當yield後面跟的函數先執行完，不管執行體裏面有多少異步回調，都要等全部回調先執行完，纔會執行等號賦值，以及再後面的操做。這也是yield最大的特性。你可能會說，怎麼前面那麼多文字都從沒提過yield竟然這麼牛逼呢？由於前面的例子爲了最簡單化，並無讓yield後面跟函數，而是跟了簡單值，這並不能體現出生成器函數的優點，由於根本哪也沒異步嘛。

還記得我寫的《Promises究竟是個啥？》裏面關於Promise構造函數的超能力嗎？yield的超能力就跟Promise構造函數的超能力差很少：

Promises寫法的本質就是把異步寫法擼成同步寫法。要作這麼酷炫這麼變態的事情，固然須要Promise構造函數有超能力，它的超能力就是傳入Promise構造函數的函數參數會第一優先執行，不管這個函數多麼的繁複，有多少層回調，有多少秒的計數器，通通都會最優先執行，也就是說，咱們只要new了一個Promise()，那麼Promise構造函數的函數參數就是最高優先級執行，一直到new出一個promise對象實例，後面的代碼纔會執行。

想象一下，若是yield沒有這種超能力，那麼，下面a、b、c三行幾乎同時執行，誰先得到響應鬼才知道，這就沒法保證get a得到響應以後纔去get b，get b得到響應以後才get c。

console.log(yield request('a.html')); console.log(yield request('b.html')); console.log(yield request('c.html'));

回到原話題，ajaxs函數執行的第一步是request('a.html')，這是一個異步函數，但不要緊，JS引擎會耐心等它執行完，它執行的第一步是向a.html發請求，回調執行it.next(response)，也就是把response傳遞給it.next()，這就有趣味了，這個next是第幾個next？第二個。由於最初已經執行了一個了。如今有種什麼感受？沒錯，迭代的感受。再複習一下next的參數，.next(response)意味着什麼？意味着覆蓋上一個yield語句的返回值。而後，yield request('a.html')將迭代暫停，然而下一個迭代已經開始了。

最終造成了什麼？在每個階段開始，next(參數)幹了兩件事，第一件事是用參數覆蓋前一個yield語句的值，第二件事是執行本階段的代碼，這樣不斷迭代下去，最終造成了一個next觸發了一串next。這就造成了一個現象：最開始的一個.next()觸發了一連串的request函數的執行，不管啥時候我想要執行這一串異步操做，我都只須要兩行代碼：var it = ajaxs(); it.next();就夠了。夠短吧？

妙不妙？

最後一個問題：怎樣最快最簡單地寫出採用 Generator 函數的同步形式的代碼？

第1步：將全部異步代碼的每一步都封裝成一個普通的、能夠有參數的函數，好比上面的request函數。你可能問，上面例子爲啥三個異步代碼卻只定義了一個request函數？由於request函數能複用的嘛。若是不能複用的話，請老老實實定義三個普通函數，函數內容就是須要執行的異步代碼。

第2步：定義一個生成器函數，把流程寫進去，徹底的同步代碼的寫法。生成器函數能夠有參數。

第三步：定義一個變量，賦值爲迭代器對象。迭代器對象能夠加參數，參數一般將做爲流程所需的初始值。

第四步：變量名.next()。不要給這個next()傳參數，傳了也沒用，由於它找不到上一個yield語句。

上面的例子是最簡單舉例，沒有涉及到下一步借用上一步的執行結果的狀況，若是想讓下一步借用上一步的執行結果的話，其實也簡單，好比，我想把a.html的響應內容當作參數，發給b.html，把b.html的響應內容當作參數，發給c.html，也很簡單，很少說。

而後咱們再對比一下，Promise寫法是怎樣：

new Promise(function(resolve) { $.get('a.html',function(dataa) { console.log(dataa); resolve(); }); }).then(function(resolve) { return new Promise(function(resolve) { $.get('b.html',function(datab) { console.log(datab); resolve(); }); }); }).then(function(resolve) { $.get('c.html',function(datac) { console.log(datac); }); });

Promise的寫法的優勢就是理解起來很簡單，每一步中間用then一連就OK。

Promise的寫法的缺點就是各類promise實例對象跟一連串的then，代碼量大、行數多，滿眼的promise、then、resolve看得頭暈，並且每個then都是一個獨立的做用域，傳遞參數痛苦。

再舉一例，我想在上述每一步異步中間，都間隔3秒。怎麼寫？

function request(url) { $.get(url, function(response){ it.next(response); }); } function sleep(time) { setTimeout(function() { console.log('I\'m awake.'); it.next(); }, time); } function* ajaxs(ur) { console.log(yield request(ur)); yield sleep(3000); console.log(yield request('b.html')); yield sleep(3000); console.log(yield request('c.html')); } var it = ajaxs('a.html'); it.next();