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 了解更多