Generator函数用法

Generator()函数是ES6提供的一种「异步编程」解决方案。

湖泊

我们可以把Generator()函数理解为是一个状态机,函数内部维护多个状态,函数执行的结果返回一个部署了Iterator接口的对象,通过这个对象可以依次获取函数内部的每一个状态。

Generator()函数,顾名思义,它本质上也是一个函数,调用方法跟其他函数没什么不同。

但是呢,相较于普通函数,Generator()有两个明显的特点:

1、function和函数名之间有一个星号(*)。

2、函数体内部用yield关键字来定义不同的内部状态。

来看个例子吧,下面定义了一个简单的Generator()函数,内部有两个状态,分别为hello和world:

function* helloWorldGenerator() {
  yield 'hello';
  yield 'world';
}
const hw = helloWorldGenerator();

上面代码,执行helloWorldGenerator函数的时候,函数体并没有直接执行,而是返回一个部署了Iterator接口的对象。

那么,什么时候执行呢?

等到调用next()函数时,才开始从函数头部向下执行,直到遇到yield表达式或return语句才会停止。

来看例子:

function* helloWorldGenerator() {
  console.log('Generator函数执行');
  yield 'hello';
  yield 'world';
}

const hw = helloWorldGenerator();
console.log('该处是测试执行先后顺序的语句');
hw.next();

思考一下,上面代码的执行结果会是怎样的?

答案是:

该处是测试执行先后顺序的语句
Generator函数执行

为什么console.log('该处是测试执行先后顺序的语句')会在console.log('Generator函数执行')之前执行?

因为,我们在调用helloWorldGenerator函数时,并不会立即执行函数体,而是优先往下执行,等到执行next()函数时,才开始执行函数体。