ES6中Generator與異步操作實(shí)例分析
本文實(shí)例講述了ES6中Generator與異步操作。分享給大家供大家參考,具體如下:
Generator與異步操作
1.Generator概念
可以把Generator理解成一個狀態(tài)機(jī)(好像React中有很多state),封裝了多個內(nèi)部狀態(tài)。執(zhí)行Generator返回的是一個遍歷器對象,可以遍歷Generator產(chǎn)生的每一個狀態(tài)。在function后加*就可以聲明一個Generator函數(shù)。
function* hiGenerator(){ yield 'hi'; yield 'ES5'; return '!'; } var hi = hiGenerator(); console.log(hi); //hiGenerator {[[GeneratorStatus]]: "suspended", [[GeneratorReceiver]]: Window} console.log(hi.next()); //Object {value: "hi", done: false} console.log(hi.next()); //Object {value: "ES5", done: false} console.log(hi.next()); //Object {value: "!", done: true}
2.yield語句
由于Generator函數(shù)返回的遍歷器對象,只有調(diào)用next()方法才會遍歷到下一個狀態(tài),所以其實(shí)提供了一種可以暫停的執(zhí)行函數(shù)。每次執(zhí)行next(),遇到y(tǒng)ield語句就暫停執(zhí)行,且將yield后的表達(dá)式的值作為返回的對象的value值;如果沒有遇到y(tǒng)ield,則返回return語句作為返回對象的value值;如果沒有return,則返回對象的value值為undefined。
3.next方法
next()方法可以帶一個參數(shù),該參數(shù)會被當(dāng)做上一條yield語句的返回值。
function* add(c, d){ var a = 0; a = yield a + c; a = yield a + d; return } var sum = add(1, 2); console.log(sum); //add {[[GeneratorStatus]]: "suspended", [[GeneratorReceiver]]: Window} console.log(sum.next()); //Object {value: 1, done: false} console.log(sum.next()); //Object {value: NaN, done: false} console.log(sum.next()); //Object {value: undefined, done: true}
如果不給next()傳參,會使得下一步計(jì)算無法進(jìn)行。
function* add(c, d){ var a = 0; a = yield a + c; a = yield a + d + 1; return } var sum = add(1, 2); console.log(sum); //add {[[GeneratorStatus]]: "suspended", [[GeneratorReceiver]]: Window} console.log(sum.next()); //Object {value: 1, done: false} console.log(sum.next(1)); //Object {value: 4, done: false} console.log(sum.next(3)); //Object {value: undefined, done: true}
4.用for..of...遍歷Generator
用for..of...遍歷Generator時候,不需要顯示調(diào)用next()方法。
5.一個Generator函數(shù)產(chǎn)生的遍歷器對象g調(diào)用return方法后,返回對象的value屬性為return方法的參數(shù)。
6.在一個Generator函數(shù)內(nèi)部調(diào)用另一個Generator函數(shù)。需要使用yield*。
希望本文所述對大家ECMAScript程序設(shè)計(jì)有所幫助。
相關(guān)文章
實(shí)用的JS正則表達(dá)式(手機(jī)號碼/IP正則/郵編正則/電話等)
實(shí)用的JS正則表達(dá)式(手機(jī)號碼/IP正則/郵編正則/電話等),經(jīng)驗(yàn)積累,感興趣的朋友可以了解下,一定會對你有幫助的2013-01-01JS實(shí)現(xiàn)圖片高亮展示效果實(shí)例
這篇文章主要介紹了JS實(shí)現(xiàn)圖片高亮展示效果的方法,實(shí)例分析了JavaScript響應(yīng)鼠標(biāo)事件動態(tài)操作頁面元素樣式的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-11-11JavaScript 新手24條實(shí)用建議[TUTS+]
本文列出了24條能讓你的代碼編寫過程更為輕松高效的建議。也許您還是JavaScript初學(xué)者,剛剛寫完自己的Hello World,那這里有很多對您的工作將十分有用的小貼士;也許有些技巧您已經(jīng)知道,那就試試快速瀏覽一下,看能不能發(fā)現(xiàn)一點(diǎn)新東西吧!2009-06-06Bootstrap導(dǎo)航條鼠標(biāo)懸停下拉菜單
這篇文章主要為大家詳細(xì)介紹了Bootstrap導(dǎo)航條鼠標(biāo)懸停下拉菜單,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-01-01javascript 用函數(shù)語句和表達(dá)式定義函數(shù)的區(qū)別詳解
本篇文章主要介紹了javascript 用函數(shù)語句和表達(dá)式定義函數(shù)的區(qū)別。需要的朋友可以過來參考下,希望對大家有所幫助2014-01-01JS實(shí)現(xiàn)隨機(jī)顏色的3種方法與顏色格式的轉(zhuǎn)化
隨機(jī)顏色和顏色格式是我們在開發(fā)中經(jīng)常要用到的一個小功能,網(wǎng)上相關(guān)的資料也很多,想著有必要總結(jié)一下自己的經(jīng)驗(yàn)。所以這篇文章主要介紹了JS實(shí)現(xiàn)隨機(jī)顏色的3種方法與顏色格式的轉(zhuǎn)化,需要的朋友可以參考借鑒,下面來一起看看吧。2017-01-01jquery實(shí)現(xiàn)瀑布流效果 jquery下拉加載新數(shù)據(jù)
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)瀑布流效果,下拉加載新數(shù)據(jù),具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-12-12