Generator
yield返回值和执行顺序
yield的返回值为该次next调用传入的参数
以下内容引自阮一峰ECMAScript 6 入门 - Generator 函数的语法
由于 Generator 函数返回的遍历器对象,只有调用next方法才会遍历下一个内部状态,所以其实提供了一种可以暂停执行的函数。yield表达式就是暂停标志。
遍历器对象的next方法的运行逻辑如下。
(1)遇到yield表达式,就暂停执行后面的操作,并将紧跟在yield后面的那个表达式的值,作为返回的对象的value属性值。
(2)下一次调用next方法时,再继续往下执行,直到遇到下一个yield表达式。
(3)如果没有再遇到新的yield表达式,就一直运行到函数结束,直到return语句为止,并将return语句后面的表达式的值,作为返回的对象的value属性值。
(4)如果该函数没有return语句,则返回的对象的value属性值为undefined。
执行顺序
function* demo() {
yield;
console.log(' flag1');
yield 123;
console.log(' flag2');
yield 456;
console.log(' flag2');
return 789;
}
var g = demo();
console.log(g.next().value); //输出undefined
console.log('============');
console.log(g.next().value); //输出123
console.log('============');
console.log(g.next().value); //输出456
console.log('============');
console.log(g.next().value); //输出789(return的值)
console.log('============');
console.log(g.next().value); //已结束,输出undefined
运行结果,
undefined
============
flag1
123
============
flag2
456
============
flag2
789
============
undefined
注意到,flag的出现都是在”===”分割线之后,表明generator函数在yield处”暂停”了
以yield为参数的函数将会在下次执行next的时候调用,yield返回next里传进来的参数
function* demo() {
console.log('Hello ' + (yield));
// 运行到yield先暂停,等到下一次调用next,得到参数后再执行console.log函数, 即输出:Hello b
console.log('Hello ' + (yield 123));
console.log('Hello ' + (yield 456));
return 789;
}
var g = demo();
console.log(g.next('a').value);
//这个传入的参数没有被使用,因为第一次调用next不是从上次yield暂停的地方开始的
//第一个yield输出undefined
console.log('===============');
console.log(g.next('b').value);
//第二个yield输出123
console.log('===============');
console.log(g.next('c').value);
//第三个yield输出456
console.log('===============');
console.log(g.next().value);
//第四个输出789(return的值)
console.log('===============');
console.log(g.next().value);
//已结束,不再输出
输出结果
undefined
===============
Hello b
123
===============
Hello c
456
===============
Hello undefined
789
===============
undefined
需要注意的是,如果使用for…of循环对生成的g = demo()进行遍历,最后return的值不会被输出
function* demo() {
yield;
console.log(' flag1');
yield 123;
console.log(' flag2');
yield 456;
console.log(' flag2'); //这一行仍然可以被执行,但只是下面的789没有被返回而已
return 789;
}
var g = demo();
for(let x of g) console.log(x);
console.log(g.next());
console.log(g.next());
console.log(g.next());
最后带来generator一个让人惊艳的应用,生成斐波那契数(同样转自ECMAScript 6 入门 - Generator 函数的语法)
function* fibonacci() { let [prev, curr] = [0, 1]; while(1) { [prev, curr] = [curr, prev + curr]; yield curr; } } for (let n of fibonacci()) { if (n > 1000) break; console.log(n); }