block don 以及 params 服務器 計數 計數器 多次 怎麽辦

Generator函數跟普通函數的寫法有非常大的區別：

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

最簡單的Generator函數如下：

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

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

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

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

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‘。返回之後依然是暫停。

再寫一行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 函數的特點就是：

1、分段執行，可以暫停
2、可以控制階段和每個階段的返回值
3、可以知道是否執行到結尾

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方法的區別都有哪些？
答：
1、return終結遍歷，之後的yield語句都失效；next返回本次yield語句的返回值。
2、return沒有參數的時候，返回{ value: undefined, done: true }；next沒有參數的時候返回本次yield語句的返回值。
3、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();

是不是跟Promise寫法的差別更明顯了？ajaxs生成器函數裏面的代碼完全是同步寫法表現。

總之，Generator 函數是比Promise寫法更科學的一種寫法，實踐中應當盡量使用Generator 函數。

作者：microkof
鏈接：https://www.jianshu.com/p/e0778b004596
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯系作者獲得授權並註明出處。

es6 中的generator函數控制流程