Generator [ˈdʒenəreɪtə(r)] 函数结构

Generator函数是ES6新增的一种异步编程方案。

说明:Generator函数指的是一种新的语法结构,是一个遍历器对象生成器,它内部可以封装多个状态,非常适合用于异步操作。

Generator函数语法和普通的 function 函数类似,但有三个不同点:

(1)function 关键字和函数名称之间有一个星号(*)

(2)函数体内可以使用 yield  [ji:ld]  语句

(3)函数调用后不会立即执行,返回的是一个遍历器对象

//一个Generator函数

function* show() {
  yield '百度网'
  yield '深圳'
  yield 'www.baidu.com'
  return 'end'
}

//函数内部使用yield语法定义不同的状态,return 也可以定义一个状态,也就是说上面代码有四个状态

var y = show()  // 调用此函数,并不会立即执行它其中的代码,而是返回一个遍历器对象
console.log(y.next())  // 返回一个具有value和done属性的对象
console.log(y.next())  // 有return,返回(value:end,done:true); 如果没有return, 返回(value:undefined,done:true)

yield 语法:

每一个yield语句定义不同的状态,它也是一个代码执行暂停标识。

yield语句不能在普通函数中使用,否则会报错。

调用Generator 函数可以返回一个遍历器,要想访问Generator函数中的每一个状态,需要使用遍历器对象调用next()方法

如果yield语句作为其他语句的一部分,那么必须使用小括号包裹,否则会报错

function *baidu () {
  // console.log("欢迎来到" + yield "百度网") // 报错
  console.log("欢迎来到" + (yield "百度网")) // 正确
}

let y = baidu()
console.log(y.next().value)  // 先返回 yield
console.log(y.next().value)  // 再返回 return,yield为undefined

next()方法:

next()一个主要功能,就是从暂停状态继续下一段代码的执行。

next()还有一个重要的功能,那就是可以接受一个参数,此参数作为上一个yield语句的返回值

虽然当代码执行到yield语句的时候,能够将其后面的表达式的值作为对象的value属性值,但是默认情况下yield语句是没有返回值的,或者说它的返回值是undefined

function *show() {
  let x = yield "你好"  // 默认无返回值
  console.log(x)  // 输出undefined
}

var y = show()
y.next()
y.next()

注意:yield 语句的返回值和yield后面表达式的返回值是两个概念

向next中传值,注: 此值作为上一个yield的返回值

function* count (num) {
  let x = 2*(yield num)
  console.log('x = ' + x)
  let y = yield x*3
  console.log('y = ' + y)
  console.log(x,y)
}

var g = count(5)
console.log(g.next())  // {value:5,done:false},第1个next传值无意义,因为没有上一个yield
// console.log(g.next())  // x = NaN {value:NaN,done:false}
console.log(g.next(3))  // {value:18,done:false}
console.log(g.next(3))  // {value:undefined,done:true}

注:可以通过next 进行传值,是上一个表达式中yield 的 赋值

//---------------- 异步方法实例 -------------------

setTimeout(function(){
  console.log('hello')
},3000)

let y;

var func = function(){
  setTimeout(function(time){
    console.log(time,'on')
    y.next(true)
  },time)
}

var gen = function * () {
  var f1 = yield func(3000)
  console.log('f1:', f1)
  var f2 = yield func(1000)
  console.log('f2:', f2)
}

y = gen()
y.next()
console.log('end')

.

原文地址:https://www.cnblogs.com/crazycode2/p/6666026.html