基本概念
- 状况机,封装了多个内部状况;
- 返回一个遍历器对象,经由过程改对象可以一次遍历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前端实习生,公司作品:口红挑战网红小游戏、服务端衬着官网。善于网站建立、民众号开辟、微信小顺序开辟、小游戏、民众号开辟,专注于前端范畴框架、交互设想、图象绘制、数据剖析等研讨。 接见 www.talkmoney.cn 相识更多