作者 | Max力出奇跡

來源 | https://www.cnblogs.com/welody/p/14980736.html

介紹ES6 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!";}

這是一只會說話的貓的一些代碼，可能是當今互聯(lián)網(wǎng)上最重要的一種應用。它看起來有點像一個函數(shù)，對嗎？這被稱為生成器-函數(shù)，它與函數(shù)有很多共同之處。但你馬上就能看到兩個不同之處。

普通函數(shù)以function開頭，生成器函數(shù)以function*開頭。

在生成器函數(shù)中，yield是一個關鍵字，語法看起來像return。不同的是，函數(shù)（甚至是生成器函數(shù)）只能返回一次，而生成器函數(shù)可以“yield”任何次數(shù)。yield表達式暫停了生成器的執(zhí)行，同時它可以在以后再次恢復。

Generators可以做什么

當你調用生成器-函數(shù)quips()時會發(fā)生什么？

> 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 }

你可能已經(jīng)非常習慣于普通函數(shù)和它們的行為方式。當你調用它們時，它們會立即開始運行，并一直運行到返回或拋出異常。

所有這些對任何js程序員來說都是第二天性。

調用一個生成器看起來也是一樣的：quips("jorendorff")。但是當你調用一個生成器時，它還沒有開始運行。

相反，它返回一個暫停的Generator對象iter（就是在上面的例子中叫做iter的對象）。

你可以把這個Generator對象看作是一個函數(shù)調用，在調用前被凍結。

具體來說，它被凍結在生成器函數(shù)的頂端，就在運行其第一行代碼之前。每次你調用Generator對象的方法.next()時，函數(shù)調用都會自我解凍，并運行到下一個yield表達式為止。

這就是為什么我們每次調用上面的iter.next()方法，都會得到一個不同的字符串值。這些都是由函數(shù)quips()中的yield表達式產(chǎn)生的值。

在最后一次iter.next()調用中，我們終于到達了生成器-函數(shù)的終點，所以結果中.done字段的值是true。到達生成器函數(shù)的終點就像普通函數(shù)返回undefined一樣，這就是為什么結果的value字段值是undefined。

現(xiàn)在可能是一個好時機，回到會說話的貓的演示頁面，真正地玩一玩代碼。試著把yield放在一個循環(huán)里面。會發(fā)生什么？從技術上講，每次Generator執(zhí)行yield時，它的堆棧--局部變量、參數(shù)、臨時值以及當前在Generator主體中的執(zhí)行位置--都會從堆棧中刪除。

然而，Generator對象會保留對這個堆棧框架的引用（或副本），以便以后.next()調用可以重新激活它并繼續(xù)執(zhí)行。

值得指出的是，Generator不是線程。在有線程的語言中，多段代碼可以同時運行，通常會導致競賽條件、非確定性和甜蜜的性能。Generator則完全不是這樣的。

當一個Generator運行時，它與調用者在同一個線程中運行。執(zhí)行的順序是順序的、確定的，而不是并發(fā)的。與系統(tǒng)線程不同，Generator只在其函數(shù)體中標明的yield點上暫停運行。

好了。我們知道Generator是什么。我們已經(jīng)看到了一個Generator的運行，暫停自己，然后恢復執(zhí)行?，F(xiàn)在有個大問題。

這種奇怪的能力怎么可能有用？

Generators就是迭代器（Generators are iterators）

ES6迭代器不僅僅是一個單一的內置類。它們是該語言的一個擴展點。你可以通過實現(xiàn)兩個方法Symbol.iterator和next()來創(chuàng)建你自己的迭代器。

但是實現(xiàn)一個接口至少要做一點工作。讓我們看看迭代器的實現(xiàn)在實踐中是什么樣的。

作為一個例子，讓我們做一個簡單的迭代器range，它只是從一個數(shù)字到另一個數(shù)字進行計數(shù)，就像一個老式的C循環(huán)for 一樣。

// This should "ding" three timesfor (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中實現(xiàn)迭代器的情況。這并不壞。但也不完全是微不足道的。這段代碼里有什么錯誤嗎？這可不好說。

它看起來完全不像我們在這里試圖模仿的原始循環(huán)：for ，迭代器協(xié)議迫使我們拆除了循環(huán)。在這一點上，你可能對迭代器感到有點冷淡。

它們可能很好用，但似乎很難實現(xiàn)。

你可能不會想建議我們在js語言中引入一個瘋狂的、令人費解的新控制流結構，只是為了使迭代器更容易構建。

但既然我們有生成器Generator，我們能在這里使用它們嗎？讓我們試試吧。

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

上面的4行range()代碼可以直接替代以前的23行實現(xiàn)，包括整個類RangeIterator。

就是因為Generator是迭代器，所以這一切才是可能的。

所有的生成器都有一個內置的next()和Symbol.iterator的實現(xiàn)。你只需寫出循環(huán)的行為。

在沒有Generator的情況下實現(xiàn)迭代器，就像被迫完全用被動語態(tài)來寫一封長郵件。

當簡單地說出你的意思不是一個選項時，你最終說的東西可能會變得相當復雜。"我的意思是，我的意思是，我必須在不使用循環(huán)語法的情況下描述一個循環(huán)的功能，所以RangeIterator又長又奇怪。而Generator就是答案。

我們還可以如何利用生成器作為迭代器的能力呢？

讓任何對象都可以迭代。只需寫一個Generator函數(shù)來遍歷this，在遍歷時產(chǎn)生（yield）每個值。

然后把這個生成器函數(shù)設置為this對象的[Symbol.iterator]方法。

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

//將一維數(shù)組'圖標'切分成長度為'rowLength'的數(shù)組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);  }}

執(zhí)行時唯一區(qū)別是，它不是一次性計算所有的結果并返回一個數(shù)組，而是返回一個迭代器，然后根據(jù)需要逐個計算結果。

異常大小的結果。你不可能建立一個無限的數(shù)組。但是你可以返回一個Generator，生成一個無盡的序列，每個調用者可以從其中提取他們需要的任何數(shù)量的值。

重構復雜的循環(huán)。你有一個巨大的丑陋的函數(shù)嗎？你想把它分解成兩個更簡單的部分嗎？Generator是添加到你的重構工具箱中的一把新刀。

當你面對一個復雜的循環(huán)時，你可以把代碼中產(chǎn)生數(shù)據(jù)的部分分解出來，把它變成一個單獨的生成器-函數(shù)。

然后將循環(huán)改為：for (var data of myNewGenerator(args))

處理可迭代數(shù)據(jù)的工具。ES6并沒有提供一個擴展庫，用于過濾、映射，以及一般情況下對任意的可迭代數(shù)據(jù)集進行任意的處理。

但是Generator對于構建你所需要的工具來說是非常棒的，只需要幾行代碼。

例如，假設你需要一個新的在DOM NodeLists上遍歷的方法，而不僅僅是Arrays。

小菜一碟：創(chuàng)建Array.prototype.filter

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

那么Generator是否有用呢？當然，它們是實現(xiàn)自定義迭代器的一種驚人的簡單方法，而且迭代器是整個ES6的數(shù)據(jù)和循環(huán)的新標準。

但這并不是Generator的全部功能。這甚至可能不是它們所做的最重要的事情。

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

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

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

也許你已經(jīng)在自己的代碼中看到了這樣的東西。異步API通常需要一個回調，這意味著每次你做什么都要寫一個額外的匿名函數(shù)。

因此，如果你有一點代碼做三件事，而不是三行代碼，你就會看到三個縮進層次的代碼。

下面是我寫的一些更多的JS代碼。

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

異步API有錯誤處理慣例，而不是異常。不同的API有不同的約定。在大多數(shù)API中，默認情況下，錯誤會被默默地放棄。

在一些API中，即使是普通的成功完成也是默認放棄的。

直到現(xiàn)在，這些問題都是我們?yōu)楫惒骄幊谈冻龅拇鷥r。我們已經(jīng)接受了這樣的事實：異步代碼看起來并不像相應的同步代碼那樣漂亮和簡單。

Generator提供了新的希望：我們不必再寫那樣丑陋的代碼。

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

// 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();  });}

主要的區(qū)別是，異步版本必須在調用異步函數(shù)的每個地方添加關鍵字yield。在該版本中添加像語句if或try/catch塊這樣的代碼，就像在普通的同步版本中添加它一樣。

與其他編寫異步代碼的方式相比，這感覺不像是在學習一種全新的語言。

因此，Generator為一種新的異步編程模型指明了方向，它似乎更適合人類的大腦。這項工作正在進行中。在其他方面，更好的語法可能會有幫助。

一項關于異步函數(shù)的建議，建立在Promises和Generators的基礎上，并從C#的類似功能中獲得靈感，已被提上ES7的議程。

學習更多技能

請點擊下方公眾號