JavaScript 教程：深入理解 Generator 生成器-CSDN博客

JavaScript 教程：深入理解 Generator 生成器

zh.javascript.info 现代 JavaScript 教程（The Modern JavaScript Tutorial），以最新的 ECMAScript 规范为基准，通过简单但足够详细的内容，为你讲解从基础到高阶的 JavaScript 相关知识。项目地址: https://gitcode.com/gh_mirrors/zh/zh.javascript.info

什么是 Generator？

在 JavaScript 中，Generator（生成器）是一种特殊的函数，它可以暂停执行并在稍后恢复执行。与普通函数不同，Generator 可以按需生成一系列值，而不是一次性返回所有结果。

Generator 的基本概念

常规函数通常遵循"运行到完成"的模式：一旦开始执行就会一直运行到结束，返回一个值（或 undefined）。而 Generator 函数可以中途暂停，并在需要时继续执行，这使得它们非常适合处理需要逐步生成数据的场景。

创建 Generator 函数

Generator 函数使用特殊的语法定义：

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

关键点：

使用 function* 声明（星号可以紧挨 function 关键字或函数名）
函数体内使用 yield 关键字来暂停执行并返回一个值

Generator 的工作原理

当调用 Generator 函数时，它不会立即执行函数体，而是返回一个 Generator 对象：

const generator = myGenerator();

这个 Generator 对象有一个核心方法 next()，用于控制执行流程：

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 }

每次调用 next() 方法，Generator 会执行到下一个 yield 表达式，返回一个包含两个属性的对象：

value: 当前 yield 的值
done: 表示 Generator 是否已执行完毕

Generator 的可迭代性

Generator 对象是可迭代的，这意味着我们可以使用 for...of 循环来遍历它生成的所有值：

for (const value of myGenerator()) {
  console.log(value); // 依次输出 1, 2, 3
}

需要注意的是，for...of 循环会忽略 return 语句返回的值，只会遍历 yield 生成的值。

Generator 的高级用法

双向通信

Generator 的一个强大特性是可以通过 yield 和 next() 实现双向通信：

function* twoWayGenerator() {
  const name = yield "What's your name?";
  const age = yield `Hello ${name}, how old are you?`;
  return `${name} is ${age} years old`;
}

const gen = twoWayGenerator();
console.log(gen.next().value); // "What's your name?"
console.log(gen.next("Alice").value); // "Hello Alice, how old are you?"
console.log(gen.next(30).value); // "Alice is 30 years old"

错误处理

可以通过 generator.throw() 方法向 Generator 内部抛出错误：

function* errorHandlingGenerator() {
  try {
    const result = yield "Try something";
    console.log(result);
  } catch (err) {
    console.log("Caught error:", err);
  }
}

const gen = errorHandlingGenerator();
gen.next(); // 启动 Generator
gen.throw(new Error("Something went wrong")); // 抛出错误

Generator 组合

使用 yield* 语法可以实现 Generator 的组合，即在一个 Generator 中调用另一个 Generator：

function* sequence(start, end) {
  for (let i = start; i <= end; i++) yield i;
}

function* combinedGenerator() {
  yield* sequence(1, 3);
  yield* sequence(10, 12);
}

console.log([...combinedGenerator()]); // [1, 2, 3, 10, 11, 12]

实际应用场景

惰性求值：只在需要时才计算值，节省内存
无限序列：可以表示无限的数据流（如斐波那契数列）
异步编程：虽然现在多用 async/await，但 Generator 曾是处理异步的重要工具
状态管理：可以用于实现复杂的控制流程

总结

Generator 是 JavaScript 中一个强大但常被忽视的特性。它们提供了一种全新的函数执行模式，能够暂停和恢复执行，并通过 yield 实现双向通信。虽然在实际开发中可能不如其他特性常用，但在处理特定问题时（如大型数据集的惰性处理、复杂的状态机等），Generator 能提供优雅的解决方案。

理解 Generator 的工作原理不仅有助于我们更好地掌握 JavaScript 语言特性，也为学习更高级的异步编程概念（如 Async Generator）打下了坚实基础。

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考