介紹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（就是在上面的例子中叫做iter的物件），你可以把這個Generator物件看作是一個函式呼叫，在呼叫前被凍結，具體來說，它被凍結在生成器函式的頂端，就在運行其第一行代碼之前，每次你呼叫Generator物件的方法.next()時，函式呼叫都會自我解凍，并運行到下一個yield運算式為止，這就是為什么我們每次呼叫上面的iter.next()方法，都會得到一個不同的字串值，這些都是由函式quips()中的yield運算式產生的值，在最后一次iter.next()呼叫中，我們終于到達了生成器-函式的終點，所以結果中.done欄位的值是true，到達生成器函式的終點就像普通函式回傳undefined一樣，這就是為什么結果的value欄位值是undefined，
現在可能是一個好時機，回到會說話的貓的演示頁面，真正地玩一玩代碼，試著把yield放在一個回圈里面，會發生什么？從技術上講，每次Generator執行yield時，它的堆疊--區域變數、引數、臨時值以及當前在Generator主體中的執行位置--都會從堆疊中洗掉，然而，Generator物件會保留對這個堆疊框架的參考（或副本），以便以后.next()呼叫可以重新激活它并繼續執行，
值得指出的是，Generator不是執行緒，在有執行緒的語言中，多段代碼可以同時運行，通常會導致競賽條件、非確定性和甜蜜的性能，Generator則完全不是這樣的，當一個Generator運行時，它與呼叫者在同一個執行緒中運行，執行的順序是順序的、確定的，而不是并發的，與系統執行緒不同，Generator只在其函式體中標明的yield點上暫停運行，
好了，我們知道Generator是什么，我們已經看到了一個Generator的運行，暫停自己，然后恢復執行，現在有個大問題，這種奇怪的能力怎么可能有用？
Generators就是迭代器（Generators are iterators）
ES6迭代器不僅僅是一個單一的內置類，它們是該語言的一個擴展點，你可以通過實作兩個方法Symbol.iterator和next()來創建你自己的迭代器，但是實作一個介面至少要做一點作業，讓我們看看迭代器的實作在實踐中是什么樣的，作為一個例子，讓我們做一個簡單的迭代器range，它只是從一個數字到另一個數字進行計數，就像一個老式的C回圈for (;??一樣，
// 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 = https://www.cnblogs.com/welody/p/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函式來遍歷this，在遍歷時產生（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的議程，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/288989.html
標籤：JavaScript