生成器函数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()都会返回一个对象包含两个属性valueyield后面跟着的值或者是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* 可以委托另一个生成器 } } }处理异步流程历史背景在async/await普及之前生成器是解决“回调地狱”的主力军配合co库。虽然现在有了async/await它本质上就是生成器的语法糖但理解生成器有助于你理解异步编程的底层原理。总结定义function*声明yield暂停。执行调用后不立即执行返回一个迭代器对象。控制用next()启动或恢复用yield交出控制权。优势可以分步执行、节省内存、处理无限数据流。生成器函数是 JavaScript 中为数不多能让你手动控制函数执行节奏的工具掌握它你的代码逻辑控制能力会提升一个台阶