快捷導(dǎo)航

JavaScript生成器函數(shù)yield示例詳解

更新時間：2025年06月16日 08:30:18 作者：紅衣大叔

生成器函數(shù)是javascript中的一種特殊類型的函數(shù),允許定義一個可以暫停執(zhí)行并返回中間結(jié)果的函數(shù),這篇文章主要介紹了JavaScript生成器函數(shù)yield的相關(guān)資料,需要的朋友可以參考下

前言

在 JavaScript 中，yield 關(guān)鍵字用于生成器函數(shù)（Generator Functions）。生成器函數(shù)是一種特殊的函數(shù)，可以暫停執(zhí)行并稍后恢復(fù)。這種特性使得生成器非常適合處理異步操作、迭代器等場景。

生成器函數(shù)的基本概念

生成器函數(shù)通過在 function 關(guān)鍵字前加上星號 * 來定義，并且可以在函數(shù)體內(nèi)使用 yield 關(guān)鍵字來暫停和恢復(fù)執(zhí)行。

生成器函數(shù)的語法

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 }

示例詳解

定義生成器函數(shù)：使用 function* 定義一個生成器函數(shù)。
調(diào)用生成器函數(shù)：調(diào)用生成器函數(shù)會返回一個生成器對象。
使用 .next() 方法：每次調(diào)用 .next() 方法都會從上次暫停的地方繼續(xù)執(zhí)行，直到遇到下一個 yield 或函數(shù)結(jié)束。

生成器函數(shù)的應(yīng)用場景

1. 迭代器

生成器函數(shù)可以很方便地創(chuàng)建自定義迭代器：

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. 異步操作

生成器可以與異步操作結(jié)合使用，簡化異步代碼的編寫。例如，結(jié)合 async/await 和生成器實現(xiàn)更清晰的異步流程控制。

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. 處理無限序列

生成器可以用來生成無限序列，而不會占用過多內(nèi)存：

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
// 可以無限調(diào)用 next()

生成器方法

生成器對象提供了幾個有用的方法：

.next()：繼續(xù)執(zhí)行生成器函數(shù)，直到下一個 yield 或函數(shù)結(jié)束。
.return()：終止生成器函數(shù)并返回指定值。
.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 }