贝利信息

javascript生成器是什么_如何使用yield关键字?

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

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

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

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

yield 关键字到底返回什么?

yield 不是“返回值”语句,而是“产出值并暂停”的指令。每次执行 iterator.next(),生成器运行到下一个 yieldreturn,然后暂停,并把 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 语句的值(只取 yieldvalue),且无法传入参数给 yield

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

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

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

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