JavaScript Generator（JavaScript生成器）|极客笔记

JavaScript Generator（JavaScript生成器）

1. 什么是Generator（生成器）

JavaScript Generator（生成器）是ES6引入的一种新的迭代器（Iterator）类型。它可以生成多个值序列，每个值可以用来实现惰性计算（Lazy Evaluation）。

Generator的定义方式是在函数的关键字function后面加上一个星号*，并使用关键字yield来指定每个生成的值。

下面是一个简单的Generator函数的示例：

function* numberGenerator() {
  yield 1;
  yield 2;
  yield 3;
}

const generator = numberGenerator();
console.log(generator.next()); // { value: 1, done: false }
console.log(generator.next()); // { value: 2, done: false }
console.log(generator.next()); // { value: 3, done: false }
console.log(generator.next()); // { value: undefined, done: true }

在上面的示例中，我们定义了一个名为numberGenerator的Generator函数，它会生成三个数字：1、2、3。我们通过调用numberGenerator()来创建一个Generator对象，并使用next()方法来获取生成的值。

2. Generator与Iterator的关系

Generator实际上是Iterator的一种特殊形式。在ES6中，所有的Generator对象也都是Iterator对象。Iterator对象具有两个关键的方法：next()和return()。

next()方法用于获取生成的值，它返回一个包含value和done属性的对象。value表示生成的值，done表示Generator是否完成生成。
return()方法用于终止Generator的执行，将done属性设置为true。

通过Generator函数创建的Generator对象，可以像Iterator一样使用。

下面是一个使用Iterator的示例：

const numberIterator = {
  [Symbol.iterator]: function* () {
    yield 1;
    yield 2;
    yield 3;
  }
};

for (let number of numberIterator) {
  console.log(number);
}
// 输出：
// 1
// 2
// 3

在上面的示例中，我们使用了[Symbol.iterator]来定义一个生成器函数function*()作为Iterator对象的迭代器方法。然后我们使用for...of循环遍历Iterator对象，并打印生成的值。

3. Generator的特性

3.1 暂停和恢复

Generator的一个重要特性是它可以在生成每个值时进行暂停和恢复。通过使用yield关键字，我们可以在Generator函数的执行过程中暂停函数并返回一个值。

下面是一个简单的Generator函数示例：

function* helloGenerator() {
  console.log("开始执行");
  yield "Hello";
  console.log("继续执行");
  yield "World";
  console.log("执行完成");
}

const generator = helloGenerator();

console.log(generator.next().value); // 输出：开始执行, Hello
console.log(generator.next().value); // 输出：继续执行, World
console.log(generator.next().value); // 输出：执行完成, undefined

在上面的示例中，当我们调用generator.next().value时，Generator函数会从上次暂停的地方继续执行，并返回下一个生成的值。直到Generator函数执行完成，done属性为true，此时通过next()方法将返回一个包含undefined的对象。

3.2 传递参数

通过调用next()方法，我们可以向Generator函数传递参数。参数会被传递给上一次暂停的yield表达式。

下面是一个接收参数的Generator函数示例：

function* addGenerator() {
  let result = yield "请输入第一个数：";
  let num1 = Number(result);
  result = yield "请输入第二个数：";
  let num2 = Number(result);
  yield "两个数的和为：" + (num1 + num2);
}

const generator = addGenerator();

console.log(generator.next().value);  // 输出："请输入第一个数："
console.log(generator.next(3).value); // 输出："请输入第二个数："
console.log(generator.next(5).value); // 输出："两个数的和为：8"

在上面的示例中，我们通过调用generator.next().value来启动Generator函数，并通过传递参数给next()方法来与Generator函数进行交互。

3.3 Return语句

Generator函数可以使用return语句来终止迭代并返回一个指定的值。当调用Generator对象的return()方法时，Generator函数会被强制执行终止。

下面是一个使用return()终止Generator函数的示例：

function* numberGenerator() {
  yield 1;
  yield 2;
  yield 3;
}

const generator = numberGenerator();

console.log(generator.next());           // 输出："1"
console.log(generator.return("结束了")); // 输出："{ value: '结束了', done: true }"
console.log(generator.next());           // 输出："{ value: undefined, done: true }"

在上面的示例中，我们在调用return()方法时传递了一个字符串作为返回值，并通过调用next()方法来检查Generator函数是否已经终止。

4. Generator应用场景

4.1 惰性计算

生成器非常适用于实现惰性计算。在惰性计算中，只有在真正需要的时候才会进行计算。生成器可以逐步生成计算结果，只生成需要的部分，从而节省了计算资源和内存消耗。

下面是一个使用生成器实现斐波那契数列的示例：

function* fibonacciGenerator() {
  let previous = 0;
  let current = 1;
  while (true) {
    yield current;
    [previous, current] = [current, previous + current];
  }
}

const generator = fibonacciGenerator();

for (let i = 0; i < 10; i++) {
  console.log(generator.next().value);
}
// 输出：
// 1
// 1
// 2
// 3
// 5
// 8
// 13
// 21
// 34
// 55

在上面的示例中，我们使用了一个无限循环的while(true)来生成斐波那契数列，每次调用next()方法时，生成器会计算并返回下一个斐波那契数。

4.2 异步编程

生成器还可以用于编写更简洁、易读的异步代码。通过使用Generator和协程（Coroutine）的结合，我们可以以同步的方式编写异步代码。

下面是一个使用生成器控制异步流程的示例：

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("Data fetched");
    }, 2000);
  });
}

function* asyncFlow() {
  try {
    const data = yield fetchData();
    console.log(data); // 输出："Data fetched"
    const processedData = yield process(data);
    console.log(processedData);
  } catch (error) {
    console.log(error);
  }
}

function process(data) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("Data processed");
    }, 2000);
  });
}

function run(generator) {
  const iterator = generator();

  function iterate({ value, done }) {
    if (done) return;
    if (value instanceof Promise) {
      value.then((data) => {
        iterate(iterator.next(data));
      }).catch((error) => {
        iterate(iterator.throw(error));
      });
    } else {
      iterate(iterator.next(value));
    }
  }

  iterate(iterator.next());
}

run(asyncFlow);

在上面的示例中，我们定义了一个异步流程的生成器asyncFlow。在asyncFlow中，我们使用yield关键字来等待异步操作完成。

通过使用Promise，我们可以将异步操作包装成返回Promise的函数。在run函数中，我们使用递归的方式迭代生成器的执行过程，每次调用next()方法时传递给前一个yield表达式的值。

在这个示例中，我们首先调用fetchData函数来模拟异步获取数据。当fetchData函数返回结果后，生成器会继续执行并将结果赋值给data变量。然后，我们调用process函数来处理数据。最终，我们通过console.log输出处理后的数据。

通过使用生成器和Promise，我们可以以同步的方式编写异步代码，使代码更容易理解和维护。