TypeScript基础教程之同步生成器

同步生成器就是普通的 function*,它返回一个 Generator 对象。这个对象既是迭代器,也是可迭代对象。

手工遍历的核心就是反复调用 it.next(),直到 done 为 true。

1. 基本写法

ts 复制代码
function* gen(): Generator<number, void, unknown> {
  yield 1;
  yield 2;
  yield 3;
}

手动遍历:

ts 复制代码
const it = gen();

let result = it.next();

while (!result.done) {
  console.log(result.value); // 1, 2, 3
  result = it.next();
}

console.log(result.done); // true

关键点:

  • function* 调用后不会执行函数体,而是返回生成器对象。
  • it.next() 返回 IteratorResult<T>,同步生成器不需要 await。
  • 每次 next() 执行到下一个 yield。
  • done: false 时,value 是 yield 出来的值。
  • done: true 时,生成器结束。

2. 带 return 返回值

生成器可以通过 return 返回最终值:

ts 复制代码
function* gen(): Generator<number, string, unknown> {
  yield 1;
  yield 2;
  return "结束";
}

const it = gen();

let result = it.next();

while (!result.done) {
  console.log(result.value); // 1, 2
  result = it.next();
}

console.log(result.value); // "结束"
console.log(result.done);  // true

注意:

for...of 遍历时不会拿到 return 的返回值,但手动 next() 可以拿到。

3. 手动传值

可以通过 next(value) 把值传回生成器内部的 yield 表达式:

ts 复制代码
function* dialog(): Generator<string, void, string> {
  const name = yield "请输入姓名:";
  yield `你好,${name}`;
}

const it = dialog();

console.log(it.next());
// { value: "请输入姓名:", done: false }

console.log(it.next("Tom"));
// { value: "你好,Tom", done: false }

console.log(it.next());
// { value: undefined, done: true }

关键点:

  • 第一次 next() 的参数会被忽略。
  • 第二次 next("Tom") 的值会作为上一个 yield 表达式的返回值,赋给 name。

4. 提前终止和清理

生成器内部可以写 try/finally:

ts 复制代码
function* gen(): Generator<number, void, unknown> {
  try {
    yield 1;
    yield 2;
    yield 3;
  } finally {
    console.log("清理资源");
  }
}

const it = gen();

console.log(it.next()); // { value: 1, done: false }
console.log(it.return()); // 触发 finally,输出"清理资源"
// { value: undefined, done: true }

it.return(value) 会提前结束生成器,并执行 finally。

it.throw(error) 可以向生成器内部抛异常。

5. 完整手动遍历模板

ts 复制代码
function* gen(): Generator<number, string, unknown> {
  yield 1;
  yield 2;
  return "done";
}

const it = gen();

let result = it.next();

while (!result.done) {
  const value = result.value; // number
  console.log(value);
  result = it.next();
}

const returnValue = result.value; // string
console.log(returnValue);

总结

同步生成器手工遍历就是:

ts 复制代码
const it = gen();
let result = it.next();

while (!result.done) {
  console.log(result.value);
  result = it.next();
}

不需要 await,因为 next() 直接返回结果,而不是 Promise。

如果需要控制每一步、传值、提前终止或获取 return 值,就用手动 next();如果只是简单消费所有 yield 值,用 for...of 更方便。

相关推荐
嘟嘟同学和妮妮同学1 小时前
【升级】一个中国历史可视化站:皇帝时间线梳理、古代思想流派、诗词鉴赏 (2)
前端·html
暗夜行者之光2 小时前
LangGraph + MCP 实战:构建"自然语言查数据"的 ChatBI Agent
前端·后端
一tiao咸鱼2 小时前
还在手动海投?我做了个 AI 求职助手,自动筛选 BOSS 职位再精准投递
前端·后端·面试
尤水就下2 小时前
🔥预热:在线文档的 block 架构是如何实现的(未完待续...)
前端·javascript·架构
全栈项目管理程序猿2 小时前
ArcGIS JS 基础教程(29):CSVLayer 表格点位图层
前端·javascript
骑着蜗牛撵大象3273 小时前
豆包 Seed 驱动的记账智能体:从拍票抽取到月报生成的全链路落地记录
java·前端·javascript·结构化输出·豆包seed·多模态识别·记账系统
溪语流沙3 小时前
【Web全栈进阶】前端世界观:现代工具链与框架为什么存在
前端·javascript·vue.js
kyriewen3 小时前
我逐个测了 JSON.stringify 的 7 个坑:第 1 个就在丢数据
前端·javascript·程序员
积流成海3 小时前
用代码实现哈希计算器:Web Crypto API 实战
前端·算法·哈希算法·哈希函数·盘子工具站