ES6 Generator：理解协程并掌握其精髓

2023-10-13 12:55:38

在计算机科学领域，Generator（生成器）是一种特殊的函数，它可以生成一系列的值。与普通函数不同，Generator 函数可以通过 yield 暂停自己的执行，并通过 yield 关键字接受输入和对外输入。在本文中，我们将深入解析 Generator 函数的工作原理和用法，从暂停执行到数据交互，带你全面掌握 Generator，提升编码效率，领略协程的魅力。

Generator 函数的基本语法

Generator 函数的定义与普通函数略有不同，它在函数名前面加一个星号 (*)，表示这是一个 Generator 函数。例如：

function* genFunc() {
  // Generator 函数体
}

调用 Generator 函数时，它不会立即执行，而是返回一个 Generator 对象。Generator 对象是一个迭代器，它具有 next() 方法，用于生成下一个值。

Generator 函数的暂停与恢复

Generator 函数可以通过 yield 关键字暂停自己的执行。当 Generator 函数遇到 yield 关键字时，它会将当前的执行状态保存起来，并返回 yield 后面的值。当 Generator 对象调用 next() 方法时，Generator 函数会从 yield 关键字处恢复执行，并继续执行后面的代码。

例如：

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

const genObj = genFunc();

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

在上面的代码中，genFunc() 是一个 Generator 函数，它会生成一系列的值 1、2、3。当我们调用 genObj.next() 方法时，Generator 函数会从 yield 关键字处恢复执行，并生成下一个值。当 Generator 函数生成所有值后，它会返回 { value: undefined, done: true }，表示 Generator 函数已经执行完毕。

Generator 函数的输入与输出

Generator 函数可以通过 yield 关键字接受输入和对外输入。当 Generator 函数遇到 yield 关键字时，它会将 yield 后面的表达式作为输入，并将输入值保存在 yield 关键字后面变量中。例如：

function* genFunc() {
  const input = yield '请输入一个数字：';
  console.log(`你输入的数字是：${input}`);
}

const genObj = genFunc();

genObj.next(); // { value: '请输入一个数字：', done: false }
genObj.next(10); // { value: undefined, done: true }

在上面的代码中，genFunc() 是一个 Generator 函数，它会接受一个输入值并打印出来。当我们调用 genObj.next() 方法时，Generator 函数会从 yield 关键字处恢复执行，并接受输入值 10。然后，Generator 函数会打印出输入值，并返回 { value: undefined, done: true }，表示 Generator 函数已经执行完毕。

Generator 函数的应用

Generator 函数在 JavaScript 中有着广泛的应用，包括：

遍历数据结构：Generator 函数可以很容易地遍历数据结构，例如数组、链表等。
生成器模式：Generator 函数可以用于实现生成器模式，生成器模式是一种设计模式，它可以将一个复杂的操作分解成一系列的步骤，并通过 Generator 函数逐个执行这些步骤。
异步编程：Generator 函数可以用于实现异步编程，异步编程是一种编程范式，它允许程序在等待 I/O 操作完成时暂停执行。