• 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')

    .

  • 相关阅读:
    gbin1分享: jQuery UI 1.9带给我们的惊喜
    7个优秀的javascript资源
    转载:仅需78美元,你就能拥有一个iPhone机器人Romo
    GBin1推荐:使用时间轴插件Timelinr创建超酷jQuery时间轴(Time line)
    GBin1分享:10个帮助你精通Firebug控制台的技巧
    GBin1分享:jQuery1.7 Beta 预览
    批处理文件安装卸载window服务程序的技巧
    当前不会命中断点 还没有为该文档加载任何符号
    HttpModule,HttpHandler,HttpHandlerFactory简单使用
    VS2010 .net Windows服务程序 重复性 注册反注册
  • 原文地址:https://www.cnblogs.com/crazycode2/p/6666026.html
Copyright © 2020-2023  润新知