JS生成器是什么？yield用法全解析

golang学习网今天将给大家带来《JS生成器是什么？yield关键字详解》，感兴趣的朋友请继续看下去吧！以下内容将会涉及到等等知识点，如果你是正在学习文章或者已经是大佬级别了，都非常欢迎也希望大家都能给我建议评论哈~希望能帮助到大家！

生成器函数用function*定义，调用返回Generator对象，需用.next()启动；yield产出值并暂停，可接收上一次.next(arg)的参数；for...of和扩展运算符自动迭代但忽略return值且不支持传参；生成器不原生处理异步，async/await才是标准方案。

JavaScript 生成器函数怎么定义和调用？

生成器函数不是普通函数，它返回一个可暂停、可恢复的迭代器对象，而不是直接执行完并返回结果。定义时必须用 function* 语法（星号紧贴 function 关键字），调用后不立即执行，只返回一个 Generator 实例。

常见错误是写成 function *myGen()（星号前有空格）或 function myGen*()（星号位置错），这会导致语法错误；也有人直接调用 gen() 以为能得到值，其实得到的是个未启动的迭代器。

• 正确写法：function* counter() { yield 1; yield 2; }
• 调用后得到的是 Generator 对象，需用 .next() 才开始执行
• 首次 .next() 才进入函数体，遇到第一个 yield 暂停并返回 { value: ..., done: false }

yield 关键字到底返回什么？

yield 不是“返回值”语句，而是“产出值并暂停”的指令。每次执行 iterator.next()，生成器运行到下一个 yield 或 return，然后暂停，并把 yield 后面的表达式值赋给返回对象的 value 属性。

容易忽略的是：yield 表达式本身可以接收外部传入的值——即上一次 .next(arg) 的 arg 参数，会成为当前暂停点处 yield 表达式的计算结果。

function* echo() {
  while (true) {
    const input = yield 'ready';
    console.log('received:', input);
  }
}
const it = echo();
it.next(); // { value: 'ready', done: false }
it.next('hello'); // 控制台输出 'received: hello'，返回 { value: 'ready', done: false }

生成器如何配合 for...of 和扩展运算符使用？

for...of 和 [...gen()] 会自动调用 .next() 直到 done: true，它们**忽略**生成器中 return 语句的值（只取 yield 的 value），且无法传入参数给 yield。

这意味着：如果生成器逻辑依赖外部输入（比如响应式更新、流式解析），就不能靠 for...of 驱动，必须手动调用 .next(value)。

• for...of 只适合“单向产出数据”的场景，如序列生成、树遍历
• return 值不会出现在 for...of 迭代中，但会体现在最后一次 .next() 的 value
• 扩展运算符 [...gen()] 本质也是 for...of，同样不支持传参

生成器和 async/await 的关系与替代边界

生成器曾被用来模拟异步流程（配合 co 库），但现在 async/await 是标准方案。两者核心区别在于：生成器本身不处理 Promise，需要手动 yield Promise 并在外部 .next() 中 resolve；而 async 函数原生等待 Promise 完成。

别误以为 yield fetch(...) 会自动 await —— 它只是产出一个 Promise 对象，后续逻辑仍需你自己 .then() 或用库调度。

• 现代代码中，除非要实现自定义控制流（如状态机、协程式游戏循环），否则不用生成器处理异步
• 生成器的暂停能力更适合“分块处理大数据”（如逐行读文件、分页拉取 API），而非替代 await
• 注意 Generator 对象不可被 JSON.stringify，也不支持 Promise.all([...generators]) 直接展开

本篇关于《JS生成器是什么？yield用法全解析》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！