最近，為了更好地理解Redux Sagas的工作原理，我重學了JavaScript generators的知識，我把從網路上收集到的各種知識點濃縮到一篇文章裡，我希望這篇文章既通俗易懂，又足夠嚴謹，可以作為初學者的generators使用指南。
簡介
JavaScript在ES6時引進了生成器。生成器函數與常規函數類似，除了可以暫停和恢復它們這一點以外。生成器也與迭代器密切相關，因為生成器物件就是迭代器。
在JavaScript中，函數呼叫後通常不能暫停或停止。 (是的，非同步函數在等待await語句時暫停，但是非同步函數在ES7時才引入。此外，非同步函數是建立在生成器之上的。)一個普通函數只有在返回或拋出錯誤時才會結束。
function foo() {
console.log('Starting');
const x = 42;
console.log(x);
console.log('Stop me if you can');
console.log('But you cannot');
}
相反，生成器允許我們在任意斷點處暫停執行，並從同一斷點恢復執行。
生成器與迭代器
來自MDN：
在JavaScript中，迭代器是一個對象，它定義一個序列，並在終止時可能會傳回一個回傳值。 >更具體地說，迭代器是透過使用next() 方法實現Iterator protocol >的任何一個對象，該方法返回具有兩個屬性的對象： value，這是序列中的next 值；和done， 如果已經迭代到序列中的最後一個值，則它為true 。如果 value 和 done 一起存在，則它是迭代器的回傳值。
因此，迭代器的本質就是:
- 定義序列的物件
- #有一個
next()方法… - 傳回一個具有兩個屬性的物件：value和done
是否需要生成器來建立迭代器？不。事實上，我們已經可以使用閉包pre-ES6創建一個無限的斐波那契數列，如下例所示:
var fibonacci = {
next: (function () {
var pre = 0, cur = 1;
return function () {
tmp = pre;
pre = cur;
cur += tmp;
return cur;
};
})()
};
fibonacci.next(); // 1
fibonacci.next(); // 2
fibonacci.next(); // 3
fibonacci.next(); // 5
fibonacci.next(); // 8
關於生成器的好處，我將再次引用MDN：
雖然自訂迭代器是一個有用的工具，但是由於需要明確地維護它們的內部狀態，創建它們需要我們仔細地編程。生成器函數提供了一個強大的替代方法:它們允許我們透過編寫一個執行不是連續的函數來定義迭代演算法。
換句話說，使用生成器建立迭代器更簡單(不需要閉包！)，這意味著出錯的可能性更小。
生成器和迭代器之間的關係就是生成器函數回傳的生成器物件是迭代器。
語法
生成器函數使用function *語法創建，並使用yield關鍵字暫停。
最初呼叫生成器函數並不執行它的任何程式碼;相反，它會傳回一個生成器物件。該值透過呼叫生成器的next()方法來使用，該方法執行程式碼，直到遇到yield關鍵字，然後暫停，直到再次呼叫next()。
function * makeGen() {
yield 'Hello';
yield 'World';
}
const g = makeGen(); // g is a generator
g.next(); // { value: 'Hello', done: false }
g.next(); // { value: 'World', done: false }
g.next(); // { value: undefined, done: true }
在上面的最後一個語句之後重複呼叫g.next()只會回傳（或更準確地說，產生）相同的回傳物件：{ value: undefined, done: true }。
yield暫停執行
大家可能會注意到上面的程式碼片段有一些特別之處。第二個next()呼叫產生一個對象，該對象的屬性為done: false，而不是done: true。
既然我們正在生成器函數中執行最後一條語句，那麼done屬性不應該是true嗎？並不是的。當遇到yield語句時，它後面的值(在本例中是「World」)被生成，執行暫停。因此，第二個next()呼叫暫停在第二個yield語句上，因此執行還沒有完成—只有在第二個yield語句之後執行重新開始時，執行才算完成（即done: true），並且不再運行程式碼。
我們可以將next()呼叫看作是告訴程式運行到下一個yield語句(假設它存在)、產生一個值並暫停。程式在復原執行之前不會知道yield語句之後沒有任何內容，並且只能透過另一個next()呼叫復原執行。
yield和return
在上面的範例中，我們使用yield將值傳遞給生成器外部。我們也可以使用return（就像在普通函數中一樣）；但是，使用return可以終止執行並設定done: true。
function * makeGen() {
yield 'Hello';
return 'Bye';
yield 'World';
}
const g = makeGen(); // g is a generator
g.next(); // { value: 'Hello', done: false }
g.next(); // { value: 'Bye', done: true }
g.next(); // { value: undefined, done: true }
因為執行不會在return語句上暫停，而且根據定義，在return語句之後不能執行任何程式碼，所以done被設定為true。
yield：next方法的參數
到目前為止，我們一直在使用yield傳遞產生器外部的值(並暫停其執行)。
然而，yield實際上是雙向的，並且允許我們將值傳遞到生成器函數中。
function * makeGen() {
const foo = yield 'Hello world';
console.log(foo);
}
const g = makeGen();
g.next(1); // { value: 'Hello world', done: false }
g.next(2); // logs 2, yields { value: undefined, done: true }
等一下。不应该是"1"打印到控制台,但是控制台打印的是"2"？起初，我发现这部分在概念上与直觉相反，因为我预期的赋值foo = 1。毕竟，我们将“1”传递到next()方法调用中，从而生成Hello world，对吗?
但事实并非如此。传递给第一个next(...)调用的值将被丢弃。除了这似乎是ES6规范之外，实际上没有其他原因.从语义上讲，第一个next方法用来启动遍历器对象，所以不用带有参数。
我喜欢这样对程序的执行进行合理化:
- 在第一个next()调用时，它将一直运行，直到遇到yield 'Hello world'，在此基础上生成{ value: 'Hello world', done: false }和暂停。就是这么回事。正如大家所看到的，传递给第一个next()调用的任何值都是不会被使用的(因此被丢弃)。
- 当再次调用next(...)时，执行将恢复。在这种情况下，执行需要为常量foo分配一些值(由yield语句决定)。因此，我们对next(2)的第二次调用赋值foo=2。程序不会在这里停止—它会一直运行，直到遇到下一个yield或return语句。在本例中，没有更多的yield，因此它记录2并返回undefined的done: true。在生成器使用异步因为yield是一个双向通道，允许信息在两个方向上流动，所以它允许我们以非常酷的方式使用生成器。到目前为止，我们主要使用yield在生成器之外传递值。但是我们也可以利用yield的双向特性以同步方式编写异步函数。
使用上面的概念，我们可以创建一个类似于同步代码但实际上执行异步函数的基本函数:
function request(url) {
fetch(url).then(res => {
it.next(res); // Resume iterator execution
});
}
function * main() {
const rawResponse = yield request('https://some-url.com');
const returnValue = synchronouslyProcess(rawResponse);
console.log(returnValue);
}
const it = main();
it.next(); // Remember, the first next() call doesn't accept input
这是它的工作原理。首先，我们声明一个request函数和main生成器函数。接下来，通过调用main()创建一个迭代器it。然后，我们从调用it.next()开始。
在第一行的function * main()，在yield request('https://some-url.com')之后执行暂停。request()隐式地返回undefined，因此我们实际上生成了undefined值，但这并不重要—我们没有使用该值。
当request()函数中的fetch()调用完成时，it.next(res)将会被调用并完成下列两件事：
it继续执行;和
it将res传递给生成器函数，该函数被分配给rawResponse
最后，main()的其余部分将同步完成。
这是一个非常基础的设置，应该与promise有一些相似之处。有关yield和异步性的更详细介绍，请参阅此文。
生成器是一次性
我们不能重复使用生成器，但可以从生成器函数创建新的生成器。
function * makeGen() {
yield 42;
}
const g1 = makeGen();
const g2 = makeGen();
g1.next(); // { value: 42, done: false }
g1.next(); // { value: undefined, done: true }
g1.next(); // No way to reset this!
g2.next(); // { value: 42, done: false }
...
const g3 = makeGen(); // Create a new generator
g3.next(); // { value: 42, done: false }
无限序列
迭代器表示序列，有点像数组。所以，我们应该能够将所有迭代器表示为数组，对吧?
然而，并不是的。数组在创建时需要立即分配，而迭代器是延迟使用的。数组是迫切需要的，因为创建一个包含n个元素的数组需要首先创建/计算所有n个元素，以便将它们存储在数组中。相反，迭代器是惰性的，因为序列中的下一个值只有在使用时才会创建/计算。
因此，表示无限序列的数组在物理上是不可能的（我们需要无限内存来存储无限项！），而迭代器可以轻松地表示（而不是存储）该序列。
让我们创建一个从1到正无穷数的无穷序列。与数组不同，这并不需要无限内存，因为序列中的每个值只有在使用时才会懒散地计算出来。
function * makeInfiniteSequence() {
var curr = 1;
while (true) {
yield curr;
curr += 1;
}
}
const is = makeInfiniteSequence();
is.next(); { value: 1, done: false }
is.next(); { value: 2, done: false }
is.next(); { value: 3, done: false }
... // It will never end
有趣的事实:这类似于Python生成器表达式vs列表理解。虽然这两个表达式在功能上是相同的，但是生成器表达式提供了内存优势，因为值的计算是延迟的，而列表理解则是立即计算值并创建整个列表。
推荐学习：《javascript基础教程》