1、Generator简介
基本概念
Generator
函数有多种理解角度。从语法上,首先可以把它理解成,Generator
函数是一个状态机,封装了多个内部状态。
执行Generator
函数会返回一个遍历器对象,也就是说,Generator
函数除了状态机,还是一个遍历器对象生成函数。返回的遍历器对象,可以依次遍历Generator
函数内部的每一个状态。
形式上,Generator
函数是一个普通函数,但是有两个特征。一是,function
命令与函数名之间有一个星号;二是,函数体内部使用yield
语句,定义不同的内部状态(yield
语句在英语里的意思就是“产出”)。
'use strict';
function * helloWorldGenerator() {
yield 'hello';
yield 'world';
return 'ending';
}
let hw = helloWorldGenerator();
上面代码定义了一个Generator
函数helloWorldGenerator
,它内部有两个yield
语句“hello”
和“world”
,即该函数有三个状态:hello
,world
和return
语句(结束执行)。
然后,Generator
函数的调用方法与普通函数一样,也是在函数名后面加上一对圆括号。不同的是,调用Generator
函数后,该函数并不执行,返回的也不是函数运行结果,而是一个指向内部状态的指针对象,遍历器对象(Iterator Object
)。
2、next方法
调用遍历器对象的next
方法,使得指针移向下一个状态。也就是说,每次调用next
方法,内部指针就从函数头部或上一次停下来的地方开始执行,直到遇到下一个yield
语句(或return
语句)为止。换言之,Generator
函数是分段执行的,yield
语句是暂停执行的标记,而next
方法可以恢复执行。
hw.next()
// { value: 'hello', done: false }
hw.next()
// { value: 'world', done: false }
hw.next()
// { value: 'ending', done: true }
hw.next()
// { value: undefined, done: true }
上面代码一共调用了四次next
方法。
第一次调用,Generator
函数开始执行,直到遇到第一个yield
语句为止。next
方法返回一个对象,它的value
属性就是当前yield
语句的值hello
,done
属性的值false
,表示遍历还没有结束。
第二次调用,Generator
函数从上次yield
语句停下的地方,一直执行到下一个yield
语句。next
方法返回的对象的value
属性就是当前yield
语句的值world
,done
属性的值false
,表示遍历还没有结束。
第三次调用,Generator
函数从上次yield
语句停下的地方,一直执行到return
语句(如果没有return
语句,就执行到函数结束)。next
方法返回的对象的value
属性,就是紧跟在return
语句后面的表达式的值(如果没有return
语句,则value
属性的值为undefined
),done
属性的值true
,表示遍历已经结束。
第四次调用,此时Generator
函数已经运行完毕,next
方法返回对象的value
属性为undefined
,done
属性为true
。以后再调用next
方法,返回的都是这个值。
总结一下,调用Generator
函数,返回一个遍历器对象,代表Generator
函数的内部指针。以后,每次调用遍历器对象的next
方法,就会返回一个有着value
和done
两个属性的对象。value
属性表示当前的内部状态的值,是yield
语句后面那个表达式的值;done
属性是一个布尔值,表示是否遍历结束。
3、yield*语句
用来在一个Generator
函数里面执行另一个Generator
函数,我们需要用yield*
语句。
如果yield
命令后面跟的是一个遍历器对象,需要在yield
命令后面加上星号,表明它返回的是一个遍历器对象。这被称为yield*
语句。
'use strict';
function *anotherGenerator(i) {
yield i + 1;
yield i + 2;
yield i + 3;
}
function *generator(i) {
yield i;
yield *anotherGenerator(i);
yield i + 10;
}
let gen = generator(10);
console.log(gen.next().value);//10
console.log(gen.next().value);//11
console.log(gen.next().value);//12
console.log(gen.next().value);//13
console.log(gen.next().value);//20
console.log(gen.next().value);//undefined
运行结果就是使用一个遍历器,遍历了多个Generator
函数,有递归的效果。