JavaScript生成器函数yield示例详解

更新时间：2025年06月16日 08:30:18 作者：红衣大叔

生成器函数是javascript中的一种特殊类型的函数,允许定义一个可以暂停执行并返回中间结果的函数,这篇文章主要介绍了JavaScript生成器函数yield的相关资料,需要的朋友可以参考下

前言

在 JavaScript 中，yield 关键字用于生成器函数（Generator Functions）。生成器函数是一种特殊的函数，可以暂停执行并稍后恢复。这种特性使得生成器非常适合处理异步操作、迭代器等场景。

生成器函数的基本概念

生成器函数通过在 function 关键字前加上星号 * 来定义，并且可以在函数体内使用 yield 关键字来暂停和恢复执行。

生成器函数的语法

function* generatorFunction() {
    console.log('Start');
    yield 'First yield';
    console.log('After first yield');
    yield 'Second yield';
    console.log('After second yield');
}

const gen = generatorFunction();

console.log(gen.next()); // { value: 'First yield', done: false }
console.log(gen.next()); // { value: 'Second yield', done: false }
console.log(gen.next()); // { value: undefined, done: true }

示例详解

定义生成器函数：使用 function* 定义一个生成器函数。
调用生成器函数：调用生成器函数会返回一个生成器对象。
使用 .next() 方法：每次调用 .next() 方法都会从上次暂停的地方继续执行，直到遇到下一个 yield 或函数结束。

生成器函数的应用场景

1. 迭代器

生成器函数可以很方便地创建自定义迭代器：

function* range(start, end) {
    for (let i = start; i <= end; i++) {
        yield i;
    }
}

const iterator = range(1, 5);

for (const value of iterator) {
    console.log(value); // 输出 1, 2, 3, 4, 5
}

2. 异步操作

生成器可以与异步操作结合使用，简化异步代码的编写。例如，结合 async/await 和生成器实现更清晰的异步流程控制。

function mockApiCall(delay, result) {
    return new Promise(resolve => setTimeout(() => resolve(result), delay));
}

async function* asyncGenerator() {
    console.log('Starting first request...');
    const data1 = await mockApiCall(1000, 'Data from first request');
    yield data1;

    console.log('Starting second request...');
    const data2 = await mockApiCall(1000, 'Data from second request');
    yield data2;
}

(async () => {
    const gen = asyncGenerator();
    console.log(await gen.next().value); // Data from first request
    console.log(await gen.next().value); // Data from second request
})();

3. 处理无限序列

生成器可以用来生成无限序列，而不会占用过多内存：

function* infiniteSequence() {
    let i = 0;
    while (true) {
        yield i++;
    }
}

const seq = infiniteSequence();

console.log(seq.next().value); // 0
console.log(seq.next().value); // 1
console.log(seq.next().value); // 2
// 可以无限调用 next()

生成器方法

生成器对象提供了几个有用的方法：

.next()：继续执行生成器函数，直到下一个 yield 或函数结束。
.return()：终止生成器函数并返回指定值。
.throw()：向生成器抛出异常。

示例：

function* exampleGenerator() {
    try {
        yield 'First yield';
    } catch (e) {
        console.error('Caught an error:', e);
    }
    yield 'Second yield';
}

const gen = exampleGenerator();
console.log(gen.next()); // { value: 'First yield', done: false }
gen.throw(new Error('Something went wrong')); // Caught an error: Error: Something went wrong
console.log(gen.next()); // { value: 'Second yield', done: false }

总结

生成器函数是 JavaScript 中非常强大的工具，特别适用于需要暂停和恢复执行的场景，如迭代器、异步编程和无限序列生成。通过 yield 关键字，你可以轻松地控制函数的执行流程，使代码更加简洁和易读。

如果你有更多关于生成器函数的具体问题或需要进一步的帮助，请随时提问！以下是生成器函数的一些关键点总结：

定义：使用 function* 定义生成器函数。
暂停执行：使用 yield 暂停执行并返回一个值。
恢复执行：使用 .next() 方法恢复生成器函数的执行。
应用场景：迭代器、异步操作、无限序列等。

到此这篇关于JavaScript生成器函数yield的文章就介绍到这了,更多相关js生成器函数yield内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

JavaScript数组去重的几种方法详谈
这篇文章给大家总结下JavaScript数组去重的几种方法，面试中也经常会遇到这个问题。文中给大家引申的还有合并数组并去重的方法，感兴趣的朋友跟随脚本之家小编一起学习吧
2021-10-10
js实现前面自动补全位数的方法
今天小编就为大家分享一篇js实现前面自动补全位数的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-10-10
使用JavaScript判断变量类型的方法详解
在 JavaScript 中,变量的类型是动态的,这几天我在做项目时,遇到了一个从方法返回的值问题,为了避免这种问题,我需要先判断一下返回值的类型,那么,你知道哪些判断变量类型的方法呢,本文给大家介绍了使用 JavaScript 如何判断变量类型,需要的朋友可以参考下
2024-06-06
JS实现类似百叶窗下拉菜单效果
百叶窗下拉菜单效果非常棒，今天小编给大家分享一段js代码实现类似百叶窗下拉菜单效果，需要的朋友参考下
2016-12-12
GreyBox技术总结（转）
GreyBox是一个遮罩层的组件也称模式窗口或模态窗口（所谓模态窗口，就是指除非采取有效的关闭手段，用户的鼠标焦点或者输入光标将一直停留在其上的窗口），它运行以后可以产生不错的界面。
2010-11-11
提高网站性能之如何对待JavaScript
在一个页面中，每一个外部JavaScript 及CSS文件都会导致一个额外的HTTP请求。所以，如何合理的合并JavaScript 文件及CSS文件也是前端工程师应该考虑的。
2009-10-10
深入浅出理解JavaScript高级定时器原理与用法
这篇文章主要介绍了JavaScript高级定时器原理与用法,结合实例形式分析了javascript重复定时器相关问题与解决方法,并描述了函数节流的原理与相关操作方法,需要的朋友可以参考下
2018-08-08
Layui 数据表格批量删除和多条件搜索的实例
今天小编就为大家分享一篇Layui 数据表格批量删除和多条件搜索的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-09-09
js实时获取窗口大小变化的实例代码
下面小编就为大家带来一篇js实时获取窗口大小变化的实例代码。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-11-11
Javascript节点关系实例分析
这篇文章主要介绍了Javascript节点关系,实例分析了javascript操作父子节点及兄弟节点的相关技巧,需要的朋友可以参考下
2015-05-05