0Pricing
JavaScript Academy · 课时

生成器函数、yield 与小型数据处理流程

使用 function* 编写生成器函数，使用 yield 惰性地产生值，通过 for...of 或 next() 驱动它们，并组合小型数据处理流程

生成器函数、yield 与小型数据处理流程 是 CoddyKit 上的免费 JavaScript Academy 课时。 这是第 2 节课，共 3 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 JavaScript Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 JavaScript Academy 课程共包含 3 节课。

为什么使用生成器

目标：使用生成器延迟产生值。

  • function* 用于定义生成器
  • yield 逐步产生值
  • 使用 for...of 或 next() 消费值
  • 组合小型流水线（类似映射）
生成器函数、yield 与小型数据处理流程 — 插图 1

function* 与 yield

生成器使用 function* 和 yield。迭代会从上一次 yield 的位置继续。

// A basic generator that yields 1..n lazily
function* countTo(n) {
  for (let i = 1; i <= n; i = i + 1) {
    yield i; // pause here and give i to the caller
  }
}

for (const x of countTo(3)) {
  console.log("value:", x);
}
生成器函数、yield 与小型数据处理流程 — 插图 2

手动调用 next()

next() 会逐步执行各个 yield，完成后最终返回 done: true。

// You can also drive a generator manually with next()
const it = countTo(2);

console.log(it.next()); // { value: 1, done: false }
console.log(it.next()); // { value: 2, done: false }
console.log(it.next()); // { value: undefined, done: true }
生成器函数、yield 与小型数据处理流程 — 插图 3

偶数的惰性生成

生成器非常适合创建简单的数据流，例如偶数，而无需先构建大型数组。

// Yield even numbers up to n (inclusive)
function* evensUpTo(n) {
  for (let i = 0; i <= n; i = i + 1) {
    if (i % 2 === 0) {
      yield i;
    }
  }
}

console.log("evens 0..6:", [...evensUpTo(6)]);
生成器函数、yield 与小型数据处理流程 — 插图 4

惰性映射管道

组合小步骤：将一个生成器的输出传给另一个生成器，从而构建惰性管道。

// map() as a generator: transform values lazily
function* map(iterable, fn) {
  for (const v of iterable) {
    yield fn(v);
  }
}

const doubled = map(countTo(4), function (x) { return x * 2; });
console.log("doubled:", [...doubled]);
生成器函数、yield 与小型数据处理流程 — 插图 5

良好习惯

提示：

  • 调用生成器函数可获得一个迭代器（它不会一开始就完整运行）。
  • yield 会暂停执行；return 会结束序列。
  • 完成后，生成器就会被耗尽；再次调用该函数可获得新的迭代器。
生成器函数、yield 与小型数据处理流程 — 插图 6

生成器返回值测验

快速检查：生成器函数会返回什么？

生成器函数、yield 与小型数据处理流程 — 插图 7

回顾

回顾：定义 function*，以惰性方式产出值，使用 for...of 或 next() 消费值，并组合微型生成器管道来完成简单转换。

生成器函数、yield 与小型数据处理流程 — 插图 8

常见问题解答

「生成器函数、yield 与小型数据处理流程」课时是免费的吗？

是的 — 「生成器函数、yield 与小型数据处理流程」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 JavaScript Academy 课程的其余内容，请升级到 CoddyKit PRO。 JavaScript Academy 课程共包含 3 节课。

「生成器函数、yield 与小型数据处理流程」这节课中我会学到什么？

使用 function* 编写生成器函数，使用 yield 惰性地产生值，通过 for...of 或 next() 驱动它们，并组合小型数据处理流程 你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 JavaScript Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 JavaScript Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 3 节。

「生成器函数、yield 与小型数据处理流程」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 JavaScript Academy 课中编写并运行代码吗？

能。每节 JavaScript Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. 可迭代协议与 for...of
  2. 生成器函数、yield 与小型数据处理流程
  3. 异步迭代器——for await...of 与异步生成器
← 返回 JavaScript Academy