JavaScript |发电机

与Python生成器一样，JavaScript 也支持生成器函数和生成器对象。
生成器函数：生成器函数的定义与普通函数一样，但每当需要生成值时，它都会使用 yield 关键字而不是 return。 yield 语句暂停函数的执行并将值发送回调用者，但保留足够的状态以使函数能够从中断的地方恢复。恢复后，函数会在最后一次 yield 运行后立即继续执行。
句法 ：

// An example of generator function
function* gen(){
     yield 1;
     yield 2;
     ...
     ...
}

Generator-Object ：生成器函数返回一个生成器对象。通过调用生成器对象的 next 方法或在“for of”循环中使用生成器对象来使用生成器对象（如上面的程序所示）
Generator 对象由生成函数返回，它同时符合可迭代协议和迭代器协议。

javascript

// Generate Function generates three 
// different numbers in three calls
function * fun()
{
    yield 10;
    yield 20;
    yield 30;    
}
  
// Calling the Generate Function
var gen = fun();
document.write(gen.next().value);
document.write("<br>");
document.write(gen.next().value);
document.write("<br>");
document.write(gen.next().value);

javascript

  
var createOwnIterable = {
  *[Symbol.iterator]() {
    yield 'a';
    yield 'b';
    yield 'c';
  }
}
  
for (let value of createOwnIterable) {
  document.write(value);
  document.write("<br>");
}
  
<script></code></pre></div><br><hr><h5 class="code">javascript</h5><div class="hcb_wrap"><pre class="prism undefined-numbers lang-js" data-lang="JavaScript"><code class="replace"><script>
  
function* generator() {
  yield 'a';
  return 'result';
  yield 'b';
}
  
var it = generator();
document.write(JSON.stringify(it.next()));
// {value: "a", done: false}
document.write(JSON.stringify(it.next()));
// {value: "result", done: true}
  

下面是使用简单生成器打印无限系列自然数的示例代码。

javascript

// Generate Function generates an 
// infinite series of Natural Numbers 
function * nextNatural()
{
    var naturalNumber = 1;
  
    // Infinite Generation
    while (true) {
        yield naturalNumber++;
    }
}
  
// Calling the Generate Function
var gen = nextNatural();
  
// Loop to print the first
// 10 Generated number
for (var i = 0; i < 10; i++) {
  
    // Generating Next Number
    document.write(gen.next().value);
  
    // New Line
    document.write("<br>");
}

输出

1
2
3
4
5
6
7
8
9
10

以下是如何从生成器手动返回的示例

javascript

  
var array = ['a', 'b', 'c'];
function* generator(arr) {
  let i = 0;
  while (i < arr.length) {
    yield arr[i++]
  }
}
  
const it = generator(array);
  
// we can do it.return() to finish the generator
  

遇到 yield 和 yield* 语法
yield：暂停生成器执行并返回在 yield 关键字之后写入的表达式的值。
yield*：它遍历操作数并返回每个值，直到 done 为真。

javascript

  
const arr = ['a', 'b', 'c'];
  
function* generator() {
  yield 1;
  yield* arr;
  yield 2;
}
  
for (let value of generator()) {
  document.write(value);
  document.write("<br>");
}
  

输出

1
a
b
c
2

另一种创建可迭代的方法

javascript

  
var createOwnIterable = {
  *[Symbol.iterator]() {
    yield 'a';
    yield 'b';
    yield 'c';
  }
}
  
for (let value of createOwnIterable) {
  document.write(value);
  document.write("<br>");
}
  
<script>
</code></pre></div></div></div><p><strong>输出</strong><br></p><div class="hcb_wrap"><pre class="prism undefined-numbers lang-js" data-lang="JavaScript"><code class="replace">a
b
c</code></pre></div><p><strong>从生成器函数返回</strong><br></p><div class="responsive-tabs"><h2 class="tabtitle">javascript </h2><div class="tabcontent"><div class="hcb_wrap"><pre class="prism undefined-numbers lang-js" data-lang="JavaScript"><code class="replace"><script>
  
function* generator() {
  yield 'a';
  return 'result';
  yield 'b';
}
  
var it = generator();
document.write(JSON.stringify(it.next()));
// {value: "a", done: false}
document.write(JSON.stringify(it.next()));
// {value: "result", done: true}
  

如何从生成器中抛出异常

javascript

  
function* generator() {
  throw new Error('Error Occured');
}
  
const it = generator();
it.next();
// Uncaught Error: Error Occurred
  

从另一个生成器调用生成器

javascript

  
function* firstGenerator() {
  yield 2;
  yield 3;
}
  
function* secondGenerator() {
  yield 1;
  yield* firstGenerator();
  yield 4;
}
  
  
for (let value of secondGenerator()) {
  document.write(value)
  document.write("<br>");
}
  

输出

1
2
3
4

发电机的限制
你不能在生成器的回调中屈服

javascript

  
function* generator() {
  ['a', 'b', 'c'].forEach(value => yield value) // This will give syntax error
}
  

使用异步生成器（用于 api 调用）

javascript

  
const firstPromise = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve(1), 5000)
  })
}
  
const secondPromise = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve(2), 3000)
  })
}
  
async function* generator() {
  const firstPromiseResult = await firstPromise();
  yield firstPromiseResult;
  const secondPromiseResult = await secondPromise();
  yield secondPromiseResult;
}
  
var it = generator();
for await(let value of it){
  document.write(value);
  document.write("<br>");
}
  

输出

(after 5 seconds)
1 
(after 3 seconds)
2

发电机的优点：
当发生惰性求值时，它们具有内存效率，即延迟表达式的求值，直到需要它的值。
用例（生成器）

• 在 redux-saga 中编写生成器
• async-await (用 promise 和 generators 实现)

支持的浏览器：

• 谷歌浏览器 39 及更高版本
• Microsoft Edge 13 及更高版本
• 火狐 26 及以上
• Opera 26 及以上
• Safari 10 及更高版本