Es6 Generator函數(shù)詳細(xì)解析
ECMAScript 6 (簡稱 ES6 )作為下一代 JavaScript 語言,將 JavaScript 異步編程帶入了一個(gè)全新的階段。
Generator函數(shù)跟普通函數(shù)的寫法有非常大的區(qū)別:
一是,function關(guān)鍵字與函數(shù)名之間有一個(gè)星號(hào);
二是,函數(shù)體內(nèi)部使用yield語句,定義不同的內(nèi)部狀態(tài)(yield在英語里的意思就是“產(chǎn)出”)。
本文重點(diǎn)給大家介紹Es6 Generator函數(shù),具體內(nèi)容如下所示:
/* 一、generator函數(shù)的定義 1.Generator 函數(shù)是 ES6 提供的一種異步編程解決方案,語法行為與傳統(tǒng)函數(shù)完全不同 2.形式上,Generator 函數(shù)是一個(gè)普通函數(shù),但是有兩個(gè)特征。一是,function關(guān)鍵字與函數(shù)名之間有一個(gè)星號(hào);二是,函數(shù)體內(nèi)部使用yield表達(dá)式,定義不同的內(nèi)部狀態(tài) */ //定義一個(gè)generator函數(shù) 其內(nèi)部有3種狀態(tài) var helloGenerator = function *() { var next1 = yield 'hello'; yield 'world' + next1; return 'ending'; } //調(diào)用generator 函數(shù)和普通函數(shù)一樣,直接加上雙括號(hào) () 但是跟普通函數(shù)的區(qū)別是generator不會(huì)立即執(zhí)行, 返回的也不是函數(shù)的結(jié)果,而是內(nèi)部的一個(gè)指針。 var newGenerator = helloGenerator(); //generator 函數(shù)是分段執(zhí)行的 會(huì)從頭部直到遇到下一個(gè)yield 表達(dá)式的時(shí)候停止下來。 console.log(newGenerator.next('hahh')); //Object {value: "hello", done: false} console.log(newGenerator.next()); // {value: "worldhahh", done: false} console.log(newGenerator.next()); //{value: "ending", done: true} done true| false true代表的意思內(nèi)部yield 表達(dá)式已經(jīng)執(zhí)行完畢 false則相反 console.log(newGenerator.next()); //{value: "undefined", done: true} /* 總結(jié)一下,調(diào)用 Generator 函數(shù),返回一個(gè)遍歷器對(duì)象,代表 Generator 函數(shù)的內(nèi)部指針。以后,每次調(diào)用遍歷器對(duì)象的next方法,就會(huì)返回一個(gè)有著value和done兩個(gè)屬性的對(duì)象。value屬性表示當(dāng)前的內(nèi)部狀態(tài)的值,是yield表達(dá)式后面那個(gè)表達(dá)式的值;done屬性是一個(gè)布爾值,表示是否遍歷結(jié)束。 */ /* 二、yield 表達(dá)式 1.由于 Generator 函數(shù)返回的遍歷器對(duì)象,只有調(diào)用next方法才會(huì)遍歷下一個(gè)內(nèi)部狀態(tài),所以其實(shí)提供了一種可以暫停執(zhí)行的函數(shù)。yield表達(dá)式就是暫停標(biāo)志。 遍歷器對(duì)象的next方法的運(yùn)行邏輯如下。 (1)遇到y(tǒng)ield表達(dá)式,就暫停執(zhí)行后面的操作,并將緊跟在yield后面的那個(gè)表達(dá)式的值,作為返回的對(duì)象的value屬性值。 (2)下一次調(diào)用next方法時(shí),再繼續(xù)往下執(zhí)行,直到遇到下一個(gè)yield表達(dá)式。 (3)如果沒有再遇到新的yield表達(dá)式,就一直運(yùn)行到函數(shù)結(jié)束,直到return語句為止,并將return語句后面的表達(dá)式的值,作為返回的對(duì)象的value屬性值。 (4)如果該函數(shù)沒有return語句,則返回的對(duì)象的value屬性值為undefined。 2.yield 表達(dá)式和 return 語句的區(qū)別: return 不具有記憶功能, yield 具有記憶功能,下次調(diào)用next()方法的時(shí)候會(huì)接著往下執(zhí)行。 一個(gè)函數(shù)里面只能執(zhí)行一個(gè)return 語句 可以執(zhí)行多個(gè)yield 表達(dá)式。 yield 函數(shù)只能用在generator 函數(shù)里面不能用在其他函數(shù)里面,不然會(huì)報(bào)錯(cuò)。 */ /* 三、與 Iterator 接口的關(guān)系 任意一個(gè)對(duì)象的Symbol.iterator方法,等于該對(duì)象的遍歷器生成函數(shù),調(diào)用該函數(shù)會(huì)返回該對(duì)象的一個(gè)遍歷器對(duì)象。由于 Generator 函數(shù)就是遍歷器生成函數(shù),因此可以把 Generator 賦值給對(duì)象的Symbol.iterator屬性,從而使得該對(duì)象具有 Iterator 接口。 */ var myIterable = {}; myIterable[Symbol.iterator] = function* () { yield 1; yield 2; yield 3; }; console.log([...myIterable]) // [1, 2, 3] /* 四、next 方法的參數(shù) yield表達(dá)式本身沒有返回值,或者說總是返回undefined。next方法可以帶一個(gè)參數(shù),該參數(shù)就會(huì)被當(dāng)作上一個(gè)yield表達(dá)式的返回值。 意義:可以在 Generator 函數(shù)運(yùn)行的不同階段,從外部向內(nèi)部注入不同的值,從而調(diào)整函數(shù)行為。 */ function* foo(x) { var y = 2 * (yield (x + 1)); var z = yield (y / 3); return (x + y + z); } var a = foo(5); a.next() // Object{value:6, done:false} a.next() // Object{value:NaN, done:false} a.next() // Object{value:NaN, done:true} var b = foo(5); b.next() // { value:6, done:false } b.next(12) // { value:8, done:false } b.next(13) // { value:42, done:true } /* 五、for...of 循環(huán) for...of循環(huán)可以自動(dòng)遍歷 Generator 函數(shù)時(shí)生成的Iterator對(duì)象,且此時(shí)不再需要調(diào)用next方法。(有點(diǎn)類似于 ... 對(duì)象的擴(kuò)展運(yùn)算符) */ function* foo() { yield 1; yield 2; yield 3; yield 4; yield 5; return 6; } for (let v of foo()) { console.log(v); } // 1 2 3 4 5 //上面代碼使用for...of循環(huán),依次顯示 5 個(gè)yield表達(dá)式的值。這里需要注意,一旦next方法的返回對(duì)象的done屬性為true,for...of循環(huán)就會(huì)中止,且不包含該返回對(duì)象,所以上面代碼的return語句返回的6,不包括在for...of循環(huán)之中。 //除了for...of循環(huán)以外,擴(kuò)展運(yùn)算符(...)、解構(gòu)賦值和Array.from方法內(nèi)部調(diào)用的,都是遍歷器接口。這意味著,它們都可以將 Generator 函數(shù)返回的 Iterator 對(duì)象,作為參數(shù)。 function* numbers () { yield 1 yield 2 return 3 yield 4 } // 擴(kuò)展運(yùn)算符 [...numbers()] // [1, 2] // Array.from 方法 Array.from(numbers()) // [1, 2] // 解構(gòu)賦值 let [x, y] = numbers(); x // 1 y // 2 // for...of 循環(huán) for (let n of numbers()) { console.log(n) } // 1 // 2 /* 六、Generator.prototype.throw() */ function *testError(){ try{ yield ; }catch (e){ console.log(e) } } var testE = testError(); testE.throw(new Error('會(huì)出錯(cuò)嗎?'));// 會(huì)出錯(cuò)嗎? 這個(gè)錯(cuò)誤是由generator 函數(shù)的內(nèi)部捕獲的。 /* 七、Generator.prototype.return() Generator 函數(shù)返回的遍歷器對(duì)象,還有一個(gè)return方法,可以返回給定的值,并且終結(jié)遍歷 Generator 函數(shù)。 */ function* gen() { yield 1; yield 2; yield 3; } var g = gen(); g.next() // { value: 1, done: false } g.return('foo') // { value: "foo", done: true } g.next() // { value: undefined, done: true }
總結(jié)
以上所述是小編給大家介紹的Es6 Generator函數(shù)詳細(xì)解析,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- 詳解JavaScript ES6中的Generator
- JavaScript中 ES6 generator數(shù)據(jù)類型詳解
- ES6新特性三: Generator(生成器)函數(shù)詳解
- ES6中Generator與異步操作實(shí)例分析
- 詳談ES6中的迭代器(Iterator)和生成器(Generator)
- ES6 系列之 Generator 的自動(dòng)執(zhí)行的方法示例
- ES6 Generator函數(shù)的應(yīng)用實(shí)例分析
- ES6中的迭代器、Generator函數(shù)及Generator函數(shù)的異步操作方法
- ES6 Generator基本使用方法示例
相關(guān)文章
js中的數(shù)組轉(zhuǎn)樹型結(jié)構(gòu)方式
這篇文章主要介紹了js中的數(shù)組轉(zhuǎn)樹型結(jié)構(gòu)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-06-06javascript 局部頁面打印實(shí)現(xiàn)代碼
Web打印有很多方式,水晶報(bào)表使用的恐怕比較多,但這東西是收費(fèi)軟件,老板說不能用:(。2009-08-08layui給下拉框、按鈕狀態(tài)、時(shí)間賦初始值的方法
今天小編就為大家分享一篇layui給下拉框、按鈕狀態(tài)、時(shí)間賦初始值的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09JS實(shí)現(xiàn)遮罩層效果的簡單實(shí)例
這篇文章介紹了JS實(shí)現(xiàn)遮罩層效果的簡單實(shí)例,有需要的朋友可以參考一下2013-11-11JavaScript復(fù)制內(nèi)容到剪貼板的兩種常用方法
最近一個(gè)活動(dòng)頁面中有一個(gè)小需求,用戶點(diǎn)擊或者長按就可以復(fù)制內(nèi)容到剪貼板,記錄一下實(shí)現(xiàn)過程和遇到的坑,需要的朋友可以參考下2018-02-02js將類數(shù)組對(duì)象轉(zhuǎn)換成數(shù)組對(duì)象
javascript與dom有許多瑕疵,如著名的類數(shù)組對(duì)象Arguments,其他諸如HTMLCollection,NodeList如果它們都是數(shù)組的子類,那多省時(shí)啊。2010-05-05javascript之Partial Application學(xué)習(xí)
在數(shù)學(xué)中,一個(gè)函數(shù)是描述每個(gè)輸入值對(duì)應(yīng)唯一輸出值的這種對(duì)應(yīng)關(guān)系,符號(hào)為 f(x)。例如,表達(dá)式 f(x)=x2表示了一個(gè)函數(shù) f,其中每個(gè)輸入值x都與唯一輸出值x2相聯(lián)系2013-01-01