ES6深度解析：Generators

介紹ES6 Generators

什麼是Generators（生成器函數）？讓咱們先來看看一個例子。

function* quips(name) {
  yield "hello " + name + "!";
  yield "i hope you are enjoying the blog posts";
  if (name.startsWith("X")) {
    yield "it's cool how your name starts with X, " + name;
  }
  yield "see you later!";
}

這是一隻會說話的貓的一些代碼，多是當今互聯網上最重要的一種應用。它看起來有點像一個函數，對嗎？這被稱爲生成器-函數，它與函數有不少共同之處。但你立刻就能看到兩個不一樣之處。

• 普通函數以function開頭，生成器函數以function*開頭
• 在生成器函數中，yield是一個關鍵字，語法看起來像return。不一樣的是，函數（甚至是生成器函數）只能返回一次，而生成器函數能夠「yield」任何次數。yield表達式暫停了生成器的執行，同時它能夠在之後再次恢復。

Generators能夠作什麼

當你調用生成器-函數quips()時會發生什麼？

> var iter = quips("jorendorff");
  [object Generator]
> iter.next()
  { value: "hello jorendorff!", done: false }
> iter.next()
  { value: "i hope you are enjoying the blog posts", done: false }
> iter.next()
  { value: "see you later!", done: false }
> iter.next()
  { value: undefined, done: true }

你可能已經很是習慣於普通函數和它們的行爲方式。當你調用它們時，它們會當即開始運行，並一直運行到返回或拋出異常。全部這些對任何JS程序員來講都是次日性。調用一個生成器看起來也是同樣的：quips("jorendorff")。

可是當你調用一個生成器時，它尚未開始運行。相反，它返回一個暫停的Generator對象iter（在上面的例子中調用）。你能夠把這個Generator對象看做是一個函數調用，在調用前被凍結。具體來講，它被凍結在生成器函數的頂端，就在運行其第一行代碼以前。每次你調用Generator對象的方法.next()時，函數調用都會自我解凍，並運行到下一個yield表達式爲止。這就是爲何咱們每次調用上面的iter.next()方法，都會獲得一個不一樣的字符串值。這些都是由函數quips()中產生的值。在最後一次iter.next()調用中，咱們終於到達了生成器-函數的終點，因此結果的字段是 。到達一個函數的終點就像返回同樣，這就是爲何結果的字段是 { value: undefined, done: true }

如今多是一個好時機，回到會說話的貓的演示頁面，真正地玩一玩代碼。試着把yield放在一個循環裏面。會發生什麼？從技術上講，每次Generator執行yield時，它的堆棧--局部變量、參數、臨時值以及當前在Generator主體中的執行位置--都會從堆棧中刪除。然而，Generator對象會保留對這個堆棧框架的引用（或副本），以便之後.next()調用能夠從新激活它並繼續執行。

值得指出的是，Generator不是線程。在有線程的語言中，多段代碼能夠同時運行，一般會致使競賽條件、非肯定性和甜蜜的性能。Generator則徹底不是這樣的。當一個Generator運行時，它與調用者在同一個線程中運行。執行的順序是順序的、肯定的，而不是併發的。與系統線程不一樣，Generator只在其函數體中標明的yield點上暫停運行。

好了。咱們知道Generator是什麼。咱們已經看到了一個Generator的運行，暫停本身，而後恢復執行。如今有個大問題。這種奇怪的能力怎麼可能有用？

Generators就是迭代器（Generators are iterators）

ES6迭代器不只僅是一個單一的內置類。它們是該語言的一個擴展點。你能夠經過實現兩個方法[Symbol.iterator]()和next()來建立你本身的迭代器。可是實現一個接口至少要作一點工做。讓咱們看看迭代器的實如今實踐中是什麼樣的。做爲一個例子，讓咱們作一個簡單的迭代器range for (;;)，它只是從一個數字到另外一個數字進行計數，就像一個老式的C循環同樣。

// This should "ding" three times
for (var value of range(0, 3)) {
  alert("Ding! at floor #" + value);
}

這裏有一個解決方案，使用ES6類class。

class RangeIterator {
  constructor(start, stop) {
    this.value = start;
    this.stop = stop;
  }

  [Symbol.iterator]() { return this; }

  next() {
    var value = this.value;
    if (value < this.stop) {
      this.value++;
      return {done: false, value: value};
    } else {
      return {done: true, value: undefined};
    }
  }
}

// Return a new iterator that counts up from 'start' to 'stop'.
function range(start, stop) {
  return new RangeIterator(start, stop);
}

代碼示例

這就是在Java或Swift中實現迭代器的狀況。這並不壞。但也不徹底是微不足道的。這段代碼裏有什麼錯誤嗎？這可很差說。它看起來徹底不像咱們在這裏試圖模仿的原始循環：for (;;)，迭代器協議迫使咱們拆除了循環。在這一點上，你可能對迭代器感到有點冷淡。它們可能很好用，但彷佛很難實現。

你可能不會想建議咱們在JS語言中引入一個瘋狂的、使人費解的新控制流結構，只是爲了使迭代器更容易構建。但既然咱們有生成器Generator，咱們能在這裏使用它們嗎？讓咱們試試吧。

function* range(start, stop) {
  for (var i = start; i < stop; i++)
    yield i;
}

代碼示例

上面的4行range()代碼能夠直接替代之前的23行實現，包括整個類RangeIterator。就是由於Generator是迭代器，因此這一切纔是可能的。全部的生成器都有一個內置的next()和[Symbol.iterator]()的實現。 你只需寫出循環的行爲。

在沒有Generator的狀況下實現迭代器，就像被迫徹底用被動語態來寫一封長郵件。當簡單地說出你的意思不是一個選項時，你最終說的東西可能會變得至關複雜。"個人意思是，個人意思是，我必須在不使用循環語法的狀況下描述一個循環的功能，因此RangeIterator又長又奇怪。而Generator就是答案。

咱們還能夠如何利用生成器做爲迭代器的能力呢？

• 讓任何對象均可以迭代。只需寫一個Generator函數來遍歷，在遍歷時產生（yield）每一個值。而後把這個生成器函數安裝爲this對象的[Symbol.iterator]方法。

• 簡化建數組函數。假設你有一個函數，每次調用都會返回一個數組的結果，就像下面這個函數：

  //將一維數組'圖標'切分紅長度爲'rowLength'的數組
  function splitIntoRows(icons, rowLength) {
  var rows = [];
  for (var i = 0; i < icons.length; i += rowLength) {
    rows.push(icons.slice(i, i + rowLength));
  }
  return rows;
  }

  使用Generator會讓這種代碼更短一些。

  function* splitIntoRows(icons, rowLength) {
  for (var i = 0; i < icons.length; i += rowLength) {
    yield icons.slice(i, i + rowLength);
  }
  }

  執行時惟一區別是，它不是一次性計算全部的結果並返回一個數組，而是返回一個迭代器，而後根據須要逐個計算結果。

• 異常大小的結果。你不可能創建一個無限的數組。可是你能夠返回一個Generator，生成一個無盡的序列，每一個調用者能夠從其中提取他們須要的任何數量的值。
• 重構複雜的循環。你有一個巨大的醜陋的函數嗎？你想把它分解成兩個更簡單的部分嗎？Generator是添加到你的重構工具箱中的一把新刀。當你面對一個複雜的循環時，你能夠把代碼中產生數據的部分分解出來，把它變成一個單獨的生成器-函數。而後將循環改成：for (var data of myNewGenerator(args))

• 處理可迭代數據的工具。ES6並無提供一個擴展庫，用於過濾、映射，以及通常狀況下對任意的可迭代數據集進行任意的處理。可是Generator對於構建你所須要的工具來講是很是棒的，只須要幾行代碼。例如，假設你須要一個新的在DOM NodeLists上遍歷的方法，而不只僅是Arrays。小菜一碟：建立Array.prototype.filter

  function* filter(test, iterable) {
  for (var item of iterable) {
    if (test(item))
      yield item;
  }
  }

  那麼Generator是否有用呢？固然，它們是實現自定義迭代器的一種驚人的簡單方法，並且迭代器是整個ES6的數據和循環的新標準。但這並非Generator的所有功能。這甚至可能不是它們所作的最重要的事情。

生成器與異步代碼（Generators and asynchronous code）

下面是我前段時間寫的一些JS代碼。

};
        })
      });
    });
  });
});

也許你已經在本身的代碼中看到了這樣的東西。異步API一般須要一個回調，這意味着每次你作什麼都要寫一個額外的匿名函數。所以，若是你有一點代碼作三件事，而不是三行代碼，你就會看到三個縮進層次的代碼。下面是我寫的一些更多的JS代碼。

}).on('close', function () {
  done(undefined, undefined);
}).on('error', function (error) {
  done(error);
});

異步API有錯誤處理慣例，而不是異常。不一樣的API有不一樣的約定。在大多數API中，默認狀況下，錯誤會被默默地放棄。在一些API中，即便是普通的成功完成也是默認放棄的。直到如今，這些問題都是咱們爲異步編程付出的代價。咱們已經接受了這樣的事實：異步代碼看起來並不像相應的同步代碼那樣漂亮和簡單。

Generator提供了新的但願：咱們沒必要再寫那樣醜陋的代碼。

Q.async()是一個實驗性的嘗試，它使用Generators與Promises來產生相似於相應同步代碼的異步代碼。好比說:

// Synchronous code to make some noise.
function makeNoise() {
  shake();
  rattle();
  roll();
}

// Asynchronous code to make some noise.
// Returns a Promise object that becomes resolved
// when we're done making noise.
function makeNoise_async() {
  return Q.async(function* () {
    yield shake_async();
    yield rattle_async();
    yield roll_async();
  });
}

主要的區別是，異步版本必須在調用異步函數的每一個地方添加關鍵字yield。在該版本中添加像語句if或try/catch塊這樣的代碼，就像在普通的同步版本中添加它同樣。與其餘編寫異步代碼的方式相比，這感受不像是在學習一種全新的語言。（延伸閱讀）

所以，Generator爲一種新的異步編程模型指明瞭方向，它彷佛更適合人類的大腦。這項工做正在進行中。在其餘方面，更好的語法可能會有幫助。一項關於異步函數的建議，創建在Promises和Generators的基礎上，並從C#的相似功能中得到靈感，已被提上ES7的議程。