美文网首页
ECMAScript 6学习记录<一>基本语法

ECMAScript 6学习记录<一>基本语法

作者: 四月天__ | 来源:发表于2017-07-12 14:00 被阅读4次

    上篇文章记录了在开启ES6之旅前需要使用的babel转码器的使用方法,本篇文章正式开始ES6的语法学习。

    1、 Generator 函数
    yield表达式与return语句既有相似之处,也有区别。相似之处在于,都能返回紧跟在语句后面的那个表达式的值。区别在于每次遇到yield,函数暂停执行,下一次再从该位置继续向后执行,而return语句不具备位置记忆的功能。一个函数里面,只能执行一次(或者说一个)return语句,但是可以执行多次(或者说多个)yield表达式。正常函数只能返回一个值,因为只能执行一次return;Generator 函数可以返回一系列的值,因为可以有任意多个yield。从另一个角度看,也可以说 Generator 生成了一系列的值,这也就是它的名称的来历(英语中,generator 这个词是“生成器”的意思)。

    next 方法的参数

    首先说明一个容易混淆的地方:

    • 运行Generator 函数得到的结果是一个遍历器对象而不是普通函数运行的结果。当我们执行函数的next()方法时才会改变指针的指向去执行函数内的代码。
    • 我们在调用Generator 函数的next()方法时,返回的是一个例如{ value: 18, done: false }结果对象,value的值是由yield表达式(紧挨着yield后面的)计算得出的。如果表达式为2 * (yield (5 + 1));,那么value的值为5+1=6而不是2*6。具体看demo2。
    • yield表达式本身的值却是和执行n+1next()方法时传入的参数相对应。与yield表达式无关,以2 * (yield (5 + 1))表达式为例,如果next(5),yield表达式的值就是5,如果next()表达式的值就是undefined,具体看下面代码。

    yield表达式本身没有返回值,或者说总是返回undefinednext()方法可以带一个参数,该参数就会被当作上一个yield表达式的返回值。

    demo1:
    function* foo1(x){
    
     let a= yield (10+x);
     console.log("a:"+a);   //a:a的值为===
      let b= yield (10*x);
      console.log("b:"+b);  //b:b的值为===
    }
    
    var foo1 = foo1(8);
    let aa = foo1.next();  
    console.log(aa);   //{ value: 18, done: false }
    
    let bb = foo1.next('a的值为===');
    console.log(bb);  //{ value: 80, done: false }
    
    foo1.next('b的值为===');
    
    demo2:
    function* foo(x) {
      var y = 2 * (yield (x + 1));
      var z = yield (y / 3);
      return (x + y + z);
    }
    
    var a = foo(5);
    a.next() // Object{value:6, done:false} ,下面有详细的计算流程
    a.next() // Object{value:NaN, done:false}
    a.next() // Object{value:NaN, done:true}
    
    var b = foo(5);
    b.next() // { value:6, done:false }
    b.next(12) // { value:8, done:false }
    b.next(13) // { value:42, done:true }
    

    上面代码中,第二次运行next()方法的时候不带参数,导致y的值等于2 * undefined(即NaN),除以3以后还是NaN,因此返回对象的value属性也等于NaN。第三次运行Next方()法的时候不带参数,所以z等于undefined,返回对象的value属性等于5 + NaN + undefined,即NaN

    如果向next()方法提供参数,返回结果就完全不一样了。上面代码第一次调用b的next()方法时,返回x+1的值6;第二次调用next()方法,将上一次yield表达式的值设为12,因此y等于24,返回y / 3的值8;第三次调用next()方法,将上一次yield表达式的值设为13,因此z等于13,这时x等于5y等于24,所以return语句的值等于42

    注意,由于next方()法的参数表示上一个yield表达式的返回值,所以第一次使用next()方法时,不能带有参数。V8 引擎直接忽略第一次使用next()方法时的参数,只有从第二次使用next()方法开始,参数才是有效的。从语义上讲,第一个next()方法用来启动遍历器对象,所以不用带有参数。

    2、Object.assign()
    参考:http://www.cnblogs.com/tugenhua0707/p/7436685.html 感谢作者的总结,受益匪浅!

    • 2.1

    3、箭头函数
    http://www.jianshu.com/p/69e0f28ff148.

    4、 Promise对象
    http://www.jianshu.com/p/3a2ee303a18c

    5、 async函数

    参考文章:

    相关文章

      网友评论

          本文标题:ECMAScript 6学习记录<一>基本语法

          本文链接:https://www.haomeiwen.com/subject/ajdbhxtx.html