JavaScript yield与异步编程

什么是 yield

yield 关键字只能在生成器函数中使用。生成器函数是一种特殊的函数,使用 function* 声明。当生成器函数执行到 yield 表达式时,它会暂停执行,并将 yield 后面的值返回给调用者。重要的是,函数的状态会被保存,以便稍后可以从暂停的地方继续执行。

生成器函数的基本语法:

javascript 复制代码
function* myGenerator() {
  yield 1;
  yield 2;
  yield 3;
}

const generator = myGenerator();

console.log(generator.next()); // { value: 1, done: false }
console.log(generator.next()); // { value: 2, done: false }
console.log(generator.next()); // { value: 3, done: false }
console.log(generator.next()); // { value: undefined, done: true }
  • function* myGenerator(): 声明一个生成器函数。
  • yield 1;: 暂停函数执行,并返回 1
  • generator.next(): 调用 next() 方法恢复函数的执行,并返回一个包含 valuedone 属性的对象。value 属性是 yield 表达式的值,done 属性表示生成器函数是否已经执行完毕。

双向通信
yield不仅能向外传递值,还能通过next(value)接收外部输入:

javascript 复制代码
function* calculator() {  
  const a = yield 'Enter a:'; 
  console.log(a)
  const b = yield 'Enter b:'; 
  console.log(b)
  return a + b;  
}  
const cal = calculator();  
cal.next();    // {value: 'Enter a:', done: false}  
cal.next(2);   // {value: 'Enter b:', done: false}  
cal.next(3);   // {value: 5, done: true}  

这种特性使得生成器可以动态响应外部逻辑

yield 的强大之处:

  1. 控制迭代过程: yield 允许你自定义迭代过程,按需生成值。这对于处理大型数据集或无限序列非常有用,可以避免一次性加载所有数据到内存中。

    javascript 复制代码
    function* infiniteSequence() {
      let i = 0;
      while (true) {
        yield i++;
      }
    }
    
    const sequence = infiniteSequence();
    
    console.log(sequence.next().value); // 0
    console.log(sequence.next().value); // 1
    console.log(sequence.next().value); // 2
    // ... 无限循环
  2. 实现状态机: yield 可以用于实现状态机,控制程序在不同状态之间的转换。

    javascript 复制代码
    function* stateMachine() {
      let state = 'start';
    
      while (true) {
        switch (state) {
          case 'start':
            console.log('Starting...');
            state = yield 'waiting';
            break;
          case 'waiting':
            console.log('Waiting for input...');
            state = yield 'processing';
            break;
          case 'processing':
            console.log('Processing data...');
            state = yield 'done';
            break;
          case 'done':
            console.log('Done!');
            return;
          default:
            console.log('Invalid state!');
            return;
        }
      }
    }
    
    const machine = stateMachine();
    console.log(machine.next()); // Starting... { value: 'waiting', done: false }
    console.log(machine.next('processing')); // Waiting for input... { value: 'processing', done: false }
    console.log(machine.next('done')); // Processing data... { value: 'done', done: false }
    console.log(machine.next()); // Done! { value: undefined, done: true }
相关推荐
api工厂4 分钟前
ZCode 3.0 版本搭配GLM-5.2能力测试
前端·人工智能·ai
小小小小宇8 分钟前
单点登录(二)
前端
阿猫的故乡23 分钟前
Vue + Axios 从入门到封装:拦截器、错误处理、请求取消、接口管理全搞定
前端·javascript·vue.js
良逍Ai出海38 分钟前
免费模板搭完独立站后,我用 Codex + Figma 做了自己的页面设计
前端·人工智能·figma
纽格立科技43 分钟前
DRM 发射端链路图(下)
前端·人工智能·车载系统·信息与通信·传媒
代码小库1 小时前
【2026前端转 AI 全栈指南】第 2 章(下):NestJS 项目创建 · MongoDB 配置 · 项目启动与调试
前端·数据库·mongodb
之歆1 小时前
Promise 基础技术深度解析:从回调地狱到链式调用
前端·okhttp·promise
甲维斯1 小时前
国产版“Codex”初体验,智谱ZCode很强啊!
前端·人工智能·ai编程
道友可好1 小时前
AI 怎么自己跑完一个 6 小时的任务?
前端·人工智能·后端
To_OC1 小时前
通义千问多模态生图踩坑记:我是如何把两个报错逐个干翻的
前端·aigc·vite