首页 > 网络编程 > JavaScript > javascript技巧 > js生成器函数yield

JavaScript生成器函数yield示例详解

2025-06-16 08:25:36 作者：红衣大叔

生成器函数是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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！