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:yemao@talkmoney.cn 訪問 www.talkmoney.cn 瞭解更多