JavaScript生成器函数与yield使用详解

知识点掌握了，还需要不断练习才能熟练运用。下面golang学习网给大家带来一个文章开发实战，手把手教大家学习《JavaScript生成器函数与yield用法解析》，在实现功能的过程中也带大家重新温习相关知识点，温故而知新，回头看看说不定又有不一样的感悟！

生成器函数用function*声明，调用后返回Generator对象且不立即执行；需调用next()启动或恢复，遇yield暂停并返回值，状态保留，终止后next()恒返{value:undefined,done:true}。

生成器函数声明和调用后不立即执行

生成器函数不是普通函数，它用 function* 声明，调用后返回一个 Generator 对象，而不是直接运行函数体。这个对象是“可迭代的”，但内部状态初始为 suspended —— 什么都没执行。

必须显式调用 next() 才会启动或恢复执行，直到遇到第一个 yield 或函数结束。

function* count() {
  console.log('start');
  yield 1;
  console.log('after first yield');
  yield 2;
}
const gen = count(); // ← 此时 'start' 还没打印
gen.next(); // → { value: 1, done: false }，同时打印 'start'
gen.next(); // → { value: 2, done: false }，同时打印 'after first yield'

yield 是暂停点，不是返回值语句

yield 暂停函数执行，并把右侧表达式的值作为 next() 返回对象的 value。函数上下文（变量、执行位置）被完整保留，下次 next() 从下一行继续。

• yield 右侧表达式只在本次 next() 调用时求值
• 如果 yield 后面没有值（如 yield;），value 为 undefined
• yield 表达式本身的结果，是下一次 next(value) 传入的 value（可用于双向通信）

function* echo() {
  const a = yield 'first';
  console.log('a =', a); // ← 下次 next(123) 传入的 123 在这里接收
  const b = yield 'second';
  return b * 2;
}
const g = echo();
g.next();      // → { value: 'first', done: false }
g.next(123);   // → { value: 'second', done: false }，并打印 'a = 123'
g.next(456);   // → { value: 912, done: true }

生成器终止后再次调用 next() 总是返回 { value: undefined, done: true }

一旦生成器函数 return（显式或隐式）或抛出未捕获错误，状态变为 closed。此后所有 next() 调用都返回固定结果，不会重跑、不会报错、也不会触发 finally 块（如果有的话）。

• 多次 next() 不会重复执行 return 后的代码
• throw() 或 return() 也可提前终止，效果等同于自然结束
• 已终止的生成器无法重用，必须重新调用生成器函数创建新实例

function* once() {
  yield 1;
  return 'done';
}
const g = once();
g.next(); // → { value: 1, done: false }
g.next(); // → { value: 'done', done: true }
g.next(); // → { value: undefined, done: true } ← 不变
g.next(); // → { value: undefined, done: true } ← 依然不变

生成器常用于实现惰性序列和异步流程控制

因为能暂停/恢复且保持状态，生成器天然适合封装「按需计算」逻辑，比如无限数列、文件逐块读取；配合 async/await（如 co 库或手动包装），还能模拟协程式异步写法。

• 避免一次性生成大数据集，节省内存
• 与 for...of、展开语法 [...gen]、Array.from(gen) 配合使用最自然
• 注意：原生 async function* 是异步迭代器，和同步生成器行为不同，不要混用 yield 和 await 在同一个函数里（除非用 async function*）

真正容易被忽略的是：生成器函数内部的 try...finally 块，在 return 或 throw 终止时会执行，但在外部多次调用 next() 导致的「静默终止」中，finally 只触发一次 —— 就是那个让状态变成 done: true 的那次调用。

今天关于《JavaScript生成器函数与yield使用详解》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！