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

