Es6 Generator函數(shù)詳細(xì)解析
ECMAScript 6 (簡稱 ES6 )作為下一代 JavaScript 語言,將 JavaScript 異步編程帶入了一個全新的階段。
Generator函數(shù)跟普通函數(shù)的寫法有非常大的區(qū)別:
一是,function關(guān)鍵字與函數(shù)名之間有一個星號;
二是,函數(shù)體內(nèi)部使用yield語句,定義不同的內(nèi)部狀態(tài)(yield在英語里的意思就是“產(chǎn)出”)。
本文重點給大家介紹Es6 Generator函數(shù),具體內(nèi)容如下所示:
/* 一、generator函數(shù)的定義
1.Generator 函數(shù)是 ES6 提供的一種異步編程解決方案,語法行為與傳統(tǒng)函數(shù)完全不同
2.形式上,Generator 函數(shù)是一個普通函數(shù),但是有兩個特征。一是,function關(guān)鍵字與函數(shù)名之間有一個星號;二是,函數(shù)體內(nèi)部使用yield表達(dá)式,定義不同的內(nèi)部狀態(tài)
*/
//定義一個generator函數(shù) 其內(nèi)部有3種狀態(tài)
var helloGenerator = function *() {
var next1 = yield 'hello';
yield 'world' + next1;
return 'ending';
}
//調(diào)用generator 函數(shù)和普通函數(shù)一樣,直接加上雙括號 () 但是跟普通函數(shù)的區(qū)別是generator不會立即執(zhí)行, 返回的也不是函數(shù)的結(jié)果,而是內(nèi)部的一個指針。
var newGenerator = helloGenerator();
//generator 函數(shù)是分段執(zhí)行的 會從頭部直到遇到下一個yield 表達(dá)式的時候停止下來。
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ù),返回一個遍歷器對象,代表 Generator 函數(shù)的內(nèi)部指針。以后,每次調(diào)用遍歷器對象的next方法,就會返回一個有著value和done兩個屬性的對象。value屬性表示當(dāng)前的內(nèi)部狀態(tài)的值,是yield表達(dá)式后面那個表達(dá)式的值;done屬性是一個布爾值,表示是否遍歷結(jié)束。
*/
/*
二、yield 表達(dá)式
1.由于 Generator 函數(shù)返回的遍歷器對象,只有調(diào)用next方法才會遍歷下一個內(nèi)部狀態(tài),所以其實提供了一種可以暫停執(zhí)行的函數(shù)。yield表達(dá)式就是暫停標(biāo)志。
遍歷器對象的next方法的運行邏輯如下。
(1)遇到y(tǒng)ield表達(dá)式,就暫停執(zhí)行后面的操作,并將緊跟在yield后面的那個表達(dá)式的值,作為返回的對象的value屬性值。
(2)下一次調(diào)用next方法時,再繼續(xù)往下執(zhí)行,直到遇到下一個yield表達(dá)式。
(3)如果沒有再遇到新的yield表達(dá)式,就一直運行到函數(shù)結(jié)束,直到return語句為止,并將return語句后面的表達(dá)式的值,作為返回的對象的value屬性值。
(4)如果該函數(shù)沒有return語句,則返回的對象的value屬性值為undefined。
2.yield 表達(dá)式和 return 語句的區(qū)別: return 不具有記憶功能, yield 具有記憶功能,下次調(diào)用next()方法的時候會接著往下執(zhí)行。
一個函數(shù)里面只能執(zhí)行一個return 語句 可以執(zhí)行多個yield 表達(dá)式。 yield 函數(shù)只能用在generator 函數(shù)里面不能用在其他函數(shù)里面,不然會報錯。
*/
/*
三、與 Iterator 接口的關(guān)系
任意一個對象的Symbol.iterator方法,等于該對象的遍歷器生成函數(shù),調(diào)用該函數(shù)會返回該對象的一個遍歷器對象。由于 Generator 函數(shù)就是遍歷器生成函數(shù),因此可以把 Generator 賦值給對象的Symbol.iterator屬性,從而使得該對象具有 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方法可以帶一個參數(shù),該參數(shù)就會被當(dāng)作上一個yield表達(dá)式的返回值。
意義:可以在 Generator 函數(shù)運行的不同階段,從外部向內(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)可以自動遍歷 Generator 函數(shù)時生成的Iterator對象,且此時不再需要調(diào)用next方法。(有點類似于 ... 對象的擴(kuò)展運算符)
*/
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 個yield表達(dá)式的值。這里需要注意,一旦next方法的返回對象的done屬性為true,for...of循環(huán)就會中止,且不包含該返回對象,所以上面代碼的return語句返回的6,不包括在for...of循環(huán)之中。
//除了for...of循環(huán)以外,擴(kuò)展運算符(...)、解構(gòu)賦值和Array.from方法內(nèi)部調(diào)用的,都是遍歷器接口。這意味著,它們都可以將 Generator 函數(shù)返回的 Iterator 對象,作為參數(shù)。
function* numbers () {
yield 1
yield 2
return 3
yield 4
}
// 擴(kuò)展運算符
[...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('會出錯嗎?'));// 會出錯嗎? 這個錯誤是由generator 函數(shù)的內(nèi)部捕獲的。
/*
七、Generator.prototype.return()
Generator 函數(shù)返回的遍歷器對象,還有一個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ì)解析,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
electronjs實現(xiàn)打開的網(wǎng)頁密碼自動保存功能(實現(xiàn)步驟)
在 Electron 的渲染進(jìn)程中,可以使用 webContents 對象來監(jiān)聽網(wǎng)絡(luò)請求,在 Electron 中實現(xiàn)自動保存網(wǎng)頁密碼的功能涉及到幾個步驟,下面給大家分享實現(xiàn)思路,感興趣的朋友跟隨小編一起看看吧2024-08-08

