当前位置：首页 > 文章列表 > 文章 > 前端 > JS中yield与yield*的区别解析

JS中yield与yield*的区别解析

2025-11-21 14:59:30 0浏览收藏

哈喽！大家好，很高兴又见面了，我是golang学习网的一名作者，今天由我给大家带来一篇《JS中yield与yield*详解》，本文主要会讲到等等知识点，希望大家一起学习进步，也欢迎大家关注、点赞、收藏、转发! 下面就一起来看看吧！

yield用于暂停生成器函数并返回单个值，调用next()继续执行；yield*委托给其他生成器或可迭代对象，逐个产出其值。

js中yield和yield*表达式的介绍

在JavaScript中，yield 和 yield* 是用于生成器函数（Generator Functions）的关键字。它们让函数可以暂停执行、返回中间值，并在之后恢复执行，是实现惰性求值和控制流程的重要工具。

yield 表达式

yield 只能在用 function* 定义的生成器函数内部使用。它会暂停函数的执行，并向调用者返回一个值。当调用生成器的 next() 方法时，函数才会继续执行。

基本语法：

function* myGenerator() {
  yield '第一步';
  yield '第二步';
  return '结束';
}

使用示例：

每次调用 next()，函数从上次暂停的地方继续执行，直到遇到下一个 yield 或函数结束。

yield* 表达式

yield* 用于委托给另一个生成器或可迭代对象（如数组、字符串、Map等）。它会“展开”被委托的迭代器，逐个产出其中的值。

常见用法包括：

组合多个生成器函数
遍历嵌套结构
复用已有生成逻辑

示例：

function* generatorA() {
  yield 'a';
  yield 'b';
}

function* generatorB() {
  yield* generatorA();
  yield 'c';
}

for (const val of generatorB()) {
  console.log(val); // 输出 a, b, c
}

也可以 yield* 普通可迭代对象：

function* gen() {
yield* [1, 2, 3];
}
console.log([...gen()]); // [1, 2, 3]

yield 与 yield* 的区别

关键差异在于处理对象的方式：

yield：返回右侧表达式的值作为当前产出结果
yield*：遍历右侧的可迭代对象或生成器，把每个元素依次 yield 出去

比如 yield [1,2,3] 返回整个数组，而 yield* [1,2,3] 会分别产出 1、2、3。

基本上就这些。掌握 yield 和 yield* 能帮助你写出更灵活的数据流处理逻辑，尤其是在需要延迟计算或构建复杂迭代流程时特别有用。注意它们只能在生成器函数中使用，否则会报错。

终于介绍完啦！小伙伴们，这篇关于《JS中yield与yield*的区别解析》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！

Vue.js与PHP数据交互全解析

上一篇: Vue.js与PHP数据交互全解析

下一篇: URLSearchParams实用技巧全解析

查看更多