当前位置：首页 > news >正文

JavaScript 生成器函数核心用法与实践详解

news 2026/5/29 5:27:10

生成器函数（Generator Function）是 JavaScript 中一个非常独特且强大的特性，你可以把它理解为一个可以“暂停”和“继续”的函数。

为了让你更容易理解，我们可以做一个形象的对比：

普通函数：像坐过山车。一旦启动，就必须一口气跑完全程，中间无法暂停，直到返回最终结果。
生成器函数：像看Netflix/视频。你可以随时点击“暂停”，去喝杯水（执行其他代码），然后再点击“播放”，从刚才暂停的地方继续看，剧情（变量状态）完全保留。

1. 基础语法：两个新面孔

要掌握生成器，你只需要记住两个特殊的符号：

function*：注意那个星号*，它告诉 JavaScript：“这是一个生成器函数，不是普通函数”。
yield：这是生成器的灵魂。它的意思是“产出”或“暂停”。当代码执行到yield时，函数会暂停执行，并把yield后面的值交出去。

2. 代码实战：它是如何工作的？

让我们看一个最简单的例子，看看它是如何一步步执行的：

// 1. 定义生成器函数 function* myGenerator() { console.log("开始执行"); yield "第一次暂停"; // 遇到 yield，暂停，返回这个值 console.log("继续执行"); yield "第二次暂停"; // 再次遇到 yield，再次暂停 console.log("执行结束"); return "最终结果"; } // 2. 调用生成器函数 // 注意：这里调用并不会立即执行函数体！ const gen = myGenerator(); // 3. 使用 .next() 方法控制执行 console.log(gen.next()); // 输出: "开始执行" // 返回: { value: "第一次暂停", done: false } console.log(gen.next()); // 输出: "继续执行" // 返回: { value: "第二次暂停", done: false } console.log(gen.next()); // 输出: "执行结束" // 返回: { value: "最终结果", done: true }

核心机制解析：

返回对象：当你调用myGenerator()时，它返回了一个生成器对象（迭代器）。这个对象手里握着函数的“遥控器”。
next()方法：这是遥控器上的“播放/下一步”按钮。每次调用next()，函数就会执行到下一个yield处暂停。
返回值结构：每次next()都会返回一个对象，包含两个属性：
- value：yield后面跟着的值（或者是return的值）。
- done：布尔值。false表示还没演完，true表示函数彻底执行完毕。

3. 进阶玩法：双向通信

这是生成器最神奇的地方。普通函数只能单向返回结果，但生成器可以**“有去有回”**。你可以通过next(数据)把数据传回给生成器内部。

规则：next(参数)传入的参数，会变成上一个yield表达式的返回值。

function* talkGenerator() { // 1. 这里的变量 name 会接收外部传入的数据 // 注意：第一次 next() 的参数会被忽略，通常只用来启动 const name = yield "请问你叫什么名字？"; yield `你好，${name}！很高兴见到你。`; } const chat = talkGenerator(); // 第一步：启动生成器，获取第一个问题 console.log(chat.next().value); // 输出: "请问你叫什么名字？" // 第二步：把名字传回去 // "小明" 会赋值给上面的 name 变量 console.log(chat.next("小明").value); // 输出: "你好，小明！很高兴见到你。"

4. 为什么要用它？（实际场景）

你可能会问：“我为什么要写这么复杂的函数？” 生成器主要有三个核心用途：

惰性求值（省内存）

如果你需要生成一个包含 100 万个数字的数组，普通函数会一次性算出所有数字放入内存，导致内存爆炸。生成器可以**“用一个算一个”**。

function* infiniteNumbers() { let i = 0; while(true) { yield i++; // 只有你需要时，我才计算下一个数 } } const nums = infiniteNumbers(); nums.next().value; // 0 nums.next().value; // 1 // 永远不会内存溢出，因为它是按需生成的

遍历复杂数据结构

生成器非常适合用来遍历树形结构（比如文件目录、DOM 树）。

function* traverseTree(node) { if (!node) return; yield node.value; // 产出当前节点 // 递归委托 if (node.children) { for (const child of node.children) { yield* traverseTree(child); // yield* 可以委托另一个生成器 } } }