JavaScript生成器函數(shù)yield示例詳解
前言
在 JavaScript 中,yield 關(guān)鍵字用于生成器函數(shù)(Generator Functions)。生成器函數(shù)是一種特殊的函數(shù),可以暫停執(zhí)行并稍后恢復(fù)。這種特性使得生成器非常適合處理異步操作、迭代器等場(chǎng)景。
生成器函數(shù)的基本概念
生成器函數(shù)通過(guò)在 function 關(guān)鍵字前加上星號(hào) * 來(lái)定義,并且可以在函數(shù)體內(nèi)使用 yield 關(guān)鍵字來(lái)暫停和恢復(fù)執(zhí)行。
生成器函數(shù)的語(yǔ)法
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*定義一個(gè)生成器函數(shù)。 - 調(diào)用生成器函數(shù):調(diào)用生成器函數(shù)會(huì)返回一個(gè)生成器對(duì)象。
- 使用 .next() 方法:每次調(diào)用
.next()方法都會(huì)從上次暫停的地方繼續(xù)執(zhí)行,直到遇到下一個(gè)yield或函數(shù)結(jié)束。
生成器函數(shù)的應(yīng)用場(chǎ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ǎn)化異步代碼的編寫。例如,結(jié)合 async/await 和生成器實(shí)現(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. 處理無(wú)限序列
生成器可以用來(lái)生成無(wú)限序列,而不會(huì)占用過(guò)多內(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
// 可以無(wú)限調(diào)用 next()
生成器方法
生成器對(duì)象提供了幾個(gè)有用的方法:
.next():繼續(xù)執(zhí)行生成器函數(shù),直到下一個(gè)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 }
總結(jié)
生成器函數(shù)是 JavaScript 中非常強(qiáng)大的工具,特別適用于需要暫停和恢復(fù)執(zhí)行的場(chǎng)景,如迭代器、異步編程和無(wú)限序列生成。通過(guò) yield 關(guān)鍵字,你可以輕松地控制函數(shù)的執(zhí)行流程,使代碼更加簡(jiǎn)潔和易讀。
如果你有更多關(guān)于生成器函數(shù)的具體問(wèn)題或需要進(jìn)一步的幫助,請(qǐng)隨時(shí)提問(wèn)!以下是生成器函數(shù)的一些關(guān)鍵點(diǎn)總結(jié):
- 定義:使用
function*定義生成器函數(shù)。 - 暫停執(zhí)行:使用
yield暫停執(zhí)行并返回一個(gè)值。 - 恢復(fù)執(zhí)行:使用
.next()方法恢復(fù)生成器函數(shù)的執(zhí)行。 - 應(yīng)用場(chǎng)景:迭代器、異步操作、無(wú)限序列等。
到此這篇關(guān)于JavaScript生成器函數(shù)yield的文章就介紹到這了,更多相關(guān)js生成器函數(shù)yield內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
js實(shí)現(xiàn)前面自動(dòng)補(bǔ)全位數(shù)的方法
今天小編就為大家分享一篇js實(shí)現(xiàn)前面自動(dòng)補(bǔ)全位數(shù)的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
GreyBox技術(shù)總結(jié)(轉(zhuǎn))
GreyBox是一個(gè)遮罩層的組件也稱模式窗口或模態(tài)窗口(所謂模態(tài)窗口,就是指除非采取有效的關(guān)閉手段,用戶的鼠標(biāo)焦點(diǎn)或者輸入光標(biāo)將一直停留在其上的窗口),它運(yùn)行以后可以產(chǎn)生不錯(cuò)的界面。2010-11-11
提高網(wǎng)站性能之 如何對(duì)待JavaScript
在一個(gè)頁(yè)面中,每一個(gè)外部JavaScript 及CSS文件都會(huì)導(dǎo)致一個(gè)額外的HTTP請(qǐng)求。所以,如何合理的合并JavaScript 文件及CSS文件也是前端工程師應(yīng)該考慮的。2009-10-10
深入淺出理解JavaScript高級(jí)定時(shí)器原理與用法
這篇文章主要介紹了JavaScript高級(jí)定時(shí)器原理與用法,結(jié)合實(shí)例形式分析了javascript重復(fù)定時(shí)器相關(guān)問(wèn)題與解決方法,并描述了函數(shù)節(jié)流的原理與相關(guān)操作方法,需要的朋友可以參考下2018-08-08
Layui 數(shù)據(jù)表格批量刪除和多條件搜索的實(shí)例
今天小編就為大家分享一篇Layui 數(shù)據(jù)表格批量刪除和多條件搜索的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
js實(shí)時(shí)獲取窗口大小變化的實(shí)例代碼
下面小編就為大家?guī)?lái)一篇js實(shí)時(shí)獲取窗口大小變化的實(shí)例代碼。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11
Javascript節(jié)點(diǎn)關(guān)系實(shí)例分析
這篇文章主要介紹了Javascript節(jié)點(diǎn)關(guān)系,實(shí)例分析了javascript操作父子節(jié)點(diǎn)及兄弟節(jié)點(diǎn)的相關(guān)技巧,需要的朋友可以參考下2015-05-05

