Generator函式的語法和應用
簡介
基本概念
-
狀態機，封裝了多個內部狀態；
-
返回一個遍歷器物件，通過改物件可以一次遍歷Generator函式內部的每一個狀態
-
帶*號，yeild表示式定義不同的內部狀態；
-
呼叫 Generator 函式後，該函式並不執行，返回的也不是函式執行結果，而是一個指向內部狀態的指標物件，也就是遍歷器物件；
-
Generator 函式是分段執行的，yield表示式是暫停執行的標記，而next方法可以恢復執行；
-
暫停標誌
-
next（）方法允許邏輯
-
遇到yield表示式，就暫停執行後面的操作，並將緊跟在yield後面的那個表示式的值，作為返回的物件的value屬性值；
-
下一次呼叫next方法時，再繼續往下執行，直到遇到下一個yield表示式；
-
沒有再遇到新的yield表示式，就一直執行到函式結束，直到return語句為止，並將return語句後面的表示式的值，作為返回的物件的value屬性值；
-
如果該函式沒有return語句，則返回的物件的value屬性值為undefined；
-
yield表示式只能用在 Generator 函式裡面，用在其他地方都會報錯。
var arr = [1, [[2, 3], 4], [5, 6]]; var flat = function* (a) { a.forEach(function (item) { if (typeof item !== 'number') { yield* flat(item); } else { yield item; //forEach()的引數是一個普通函式使用yield會報錯，可以使用for迴圈解決這個問題 } }); }; for (var f of flat(arr)){ console.log(f); }
使用for迴圈改正
var arr = [1, [[2, 3], 4], [5, 6]]; var flat = function* (a) { var length = a.length; for (var i = 0; i < length; i++) { var item = a[i]; if (typeof item !== 'number') { yield* flat(item); } else { yield item; } } }; for (var f of flat(arr)) { console.log(f); }// 1, 2, 3, 4, 5, 6
-
yield表示式如果用在另一個表示式之中，必須放在圓括號裡面；
-
yield表示式用作函式引數或放在賦值表示式的右邊，可以不加括號
與Iterator的關係
可以把 Generator 賦值給物件的Symbol.iterator屬性，從而使得該物件具有 Iterator 介面
var myIterable = {};
myIterable[Symbol.iterator] = function* () {
yield 1;
yield 2;
yield 3;
};
[...myIterable] // [1, 2, 3]
next()方法的引數
yield表示式本身沒有返回值，或者說總是返回undefined。next方法可以帶一個引數，該引數就會被當作上一個yield表示式的返回值。
function* f() {
for(var i = 0; true; i++) {
var reset = yield i;
if(reset) { i = -1; }
}
}
var g = f();
g.next() // { value: 0, done: false }
g.next() // { value: 1, done: false }
g.next(true) // { value: 0, done: false }
Generator 函式從暫停狀態到恢復執行，它的上下文狀態（context）是不變的。通過next方法的引數，就有辦法在 Generator 函式開始執行之後，繼續向函式體內部注入值。也就是說，可以在 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 }
next()傳參，引數代表上一次yeild表示式返回的值，因此第一次使用next()傳參是無效的；
function* dataConsumer() {
console.log('Started');
console.log(`1. ${yield}`);
console.log(`2. ${yield}`);
return 'result';
}
let genObj = dataConsumer();
genObj.next();
// Started
genObj.next('a')
// 1. a
genObj.next('b')
// 2. b
如果想第一次呼叫next()方法就能夠輸入值，可以在Genrator函式外再包一層
function wrapper(generatorFunction) {
return function (...args) {
let generatorObject = generatorFunction(...args);
generatorObject.next();
return generatorObject;
};
}
const wrapped = wrapper(function* () {
console.log(`First input: ${yield}`);
return 'DONE';
});
wrapped().next('hello!')// First input: hello!
上述程式碼在wrapper函式中，首先呼叫一次next方法，再返回遍歷器物件。當用戶自己呼叫next方法時，看起來就像是第一次呼叫，但實際上，這是第二次呼叫next方法。
for...of迴圈
for...of迴圈可以自動遍歷 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
這裡需要注意，一旦next方法的返回物件的done屬性為true，for...of迴圈就會中止；
Generator給物件新增Iterator
- 方法一
function* objectEntries(obj) {
let propKeys = Reflect.ownKeys(obj);
for (let propKey of propKeys) {
yield [propKey, obj[propKey]];
}
}
let jane = { first: 'Jane', last: 'Doe' };
for (let [key, value] of objectEntries(jane)) {
console.log(`${key}: ${value}`);
}
// first: Jane
// last: Doe
- 方法二將 Generator 函式加到物件的Symbol.iterator屬性上面。
function* objectEntries() {
let propKeys = Object.keys(this);
for (let propKey of propKeys) {
yield [propKey, this[propKey]];
}
}
let jane = { first: 'Jane', last: 'Doe' };
jane[Symbol.iterator] = objectEntries;
for (let [key, value] of jane) {
console.log(`${key}: ${value}`);
}
// first: Jane
// last: Doe
【完】
作者簡介：鄭佳歡，蘆葦科技web前端實習生，公司作品：口紅挑戰網紅小遊戲、服務端渲染官網。擅長網站建設、公眾號開發、微信小程式開發、小遊戲、公眾號開發，專注於前端領域框架、互動設計、影象繪製、資料分析等研究。 一起並肩作戰： mailto:[email protected] 訪問 www.talkmone