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

2017-07-12 本文已影响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+1次next()方法时传入的参数相对应。与yield表达式无关，以2 * (yield (5 + 1))表达式为例,如果next(5),yield表达式的值就是5,如果next()表达式的值就是undefined,具体看下面代码。

yield表达式本身没有返回值，或者说总是返回undefined。next()方法可以带一个参数，该参数就会被当作上一个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等于5，y等于24，所以return语句的值等于42。

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

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

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

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

5、 async函数

参考文章:

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

猜你喜欢

热点阅读