Generator小知识

98 阅读2分钟

「这是我参与11月更文挑战的第25天,活动详情查看:2021最后一次更文挑战」。

提到Generator你也许还不知道他是什么,但是提到async/await,你就知道async/await什么,怎么用,运用于什么场景。那为什么这里要提到async/await呢?他俩有啥关系呢?关系是async/await其实就是Generator的语法糖。可想而知,Generator的作用有多强大了~

接下来,让我们一起见识一下Generator吧~

Generator函数是ES6提供的一种异步编程解决方案。形式上,Generator函数就是一个普通的函数,但是有两个特征:

  • function命令与函数名之间有一个星号(*)
  • 函数体内部使用yield语句定义不同的内部状态。

定义Generator函数

例如:

function *helloWorld(){
  yield 'hello';
  yield 'world';
  return 'ending';
}

var hh = helloWorld()

上面的Generator函数--helloWord,内部有两个yield语句,那么他就有三个状态:hello、world和return语句(结束执行)

与普通函数不同的是:调用该函数后,其并未执行,返回的也不是函数运行结果,而是衣蛾只想内部状态的指针对象,也就是遍历器对象(Iterator Object)

调用函数

下一步, 必须调用遍历器对象的 next 方法,使得指针移向下一个状态。

总结下来:Generator函数是分段执行的,yield语句是暂停执行的标记,而 next方法可以恢复执行。

例如:

console.log(hh.next()) //遇到第一条yield为止
console.log(hh.next()) //从上次停下来的地方 -- 遇到第二条yield为止
console.log(hh.next()) //从上次停下来的地方 -- 遇到return

//输出结果
{ value: 'hello', done: false } 
{ value: 'world', done: false }
{ value: 'ending', done: true } 

当没有遍历完时,next方法返回一个对象,他的value属性就是当前yield语句的值,done表示遍历是否结束。done为false表示还未遍历完,为true则表示遍历完了,返回return的值;若没有设置return,则遍历完之后,value值为undefind。

不用yield语句的函数

Generator函数可以不用 yield语句,这时他就变成了一个单纯的暂缓执行函数。

function* fn () { 
  console.log (’执行了!’)
}
var generator= fn();
setTimeout(function () { 
  generator.next()
}, 2000);

上面的代码中,函数fn如果是普通函数,在为变量generator赋值时就会执行 。 但是函数fn是一个Generator函数,于是就变成只有调用next方法时才会执行 。

另外需要注意,yield表达式只能用在Generator函数里面,用在其他地方都会报错 。