总结ECMAScript(es)6.0

可能很多人都跟我一样，一直在写ES6的语法，但是一直都没有搞清楚它到底是什么。ECMA或ES6是ECMAScript6.0的简写，ECMA可以理解成是一个标准化的组织，类似于像W3C、HTML5等。同时也是一个标准，它诞生出来的标准就叫ES。从某种程度上讲ES类似于JS。都是ECMA的实现。本着温故知新的想法，写一篇关于es6的总结。

历史版本

时间	ECMA	JS	解释
1996.11	ES 1.0	JS稳定	Netscape将JS提交给ECMA组织，ES正式出现
1998.06	ES 2.0		ES2正式发布
1999.12	ES 3.0		ES3被广泛支持
2007.10	ES 4.0		ES4过于激进，被废了
2008.07	ES 3.1		4.0退化为严重缩水版的3.1 因为吵得太厉害，所以ES 3.1代号为Harmony(和谐)
2009.12	ES 5.0		ES 5.0正式发布 同时公布了JavaScript.next也就是后来的ES 6.0
2011.06	ES 5.1		ES 5.1成为了ISO国际标准
2013.03	ES 6.0		ES 6.0草案定稿
2013.12	ES 6.0		ES 6.0草案发布
2015.06	ES 6.0		ES 6.0预计发布正式版 JavaScript.next开始指向ES 7.0

ES6.0的一些特性

1. 变量var、let、const
   var 重复声明、函数级
   let 不能重复声明、块级、变量
   const 不能重复声明、块级、常量
2. 箭头函数
   现阶段是使用react库，所有常常使用箭头函数，我感觉它最方便的就是对于this的使用了，谁用这个this，this就代表谁。还有一点是使用箭头函数很方便，如果只有一个参数，()可以省；如果只有一个return，{}也可以省
3. 参数扩展 （…）用三个点表示，对数据的收集或者扩展
4. 数组方法
   map 映射
   reduce 汇总：一堆->一个
   filter 过滤：一堆->剩下的
   forEach 循环(迭代）
5. 字符串
   startsWith:匹配字符串开始的值
   endsWith:匹配字符串结束的值
   字符串模板：${a}xxx${b} 用反引号 里面可以写变量等
6. Promise
   异步：操作之间没啥关系，同时进行多个操作
   同步：同时只能做一件事
   我们经常遇到异步的问题:需要在一个请求完成之后，再执行下一步操作
   解决办法：(1)回调、(2)Promise、(3)generator
   Promise.all

  let p1=new Promise(function (resolve, reject){
      $.ajax({
        url: 'data/arr.txt',
        dataType: 'json',
        success(arr){
          resolve(arr);
        },
        error(err){
          reject(err);
        }
      })
    });
    let p2=new Promise(function (resolve, reject){
      $.ajax({
        url: 'data/json.txt',
        dataType: 'json',
        success(arr){
          resolve(arr);
        },
        error(err){
          reject(err);
        }
      })
    });
  Promise.all([ p1, p2 ]).then(function (arr){
      alert('全都成功了');
    }, function (){
      alert('至少有一个失败了');
    });
    

Promise.race 竞速

Promise.race([
  $.ajax({url: 'http://a2.taobao.com/data/users'}),
  $.ajax({url: 'http://a15.taobao.com/data/users'}),
  $.ajax({url: 'http://a3.taobao.com/data/users'}),
  $.ajax({url: 'http://a7.taobao.com/data/users'})
]);

也可以直接return 一个Promise
7. generator
有道翻译其为生成器，引用Blue老师的一句话就是generator函数是“踹一脚，走一步”。

let genobj = function *show(){
    yield // 放弃执行的意思
}
genobj.next();// 执行yield后面的代码。

runner(function *(){
      let data1=yield $.ajax({url: 'data/1.txt', dataType: 'json'});
      let data2=yield $.ajax({url: 'data/2.txt', dataType: 'json'});
      let data3=yield $.ajax({url: 'data/3.txt', dataType: 'json'});

      console.log(data1, data2, data3);
});

runner.js

function runner(_gen){
  return new Promise((resolve, reject)=>{
    var gen=_gen();

    _next();
    function _next(_last_res){
      var res=gen.next(_last_res);

      if(!res.done){
        var obj=res.value;

        if(obj.then){
          obj.then((res)=>{
            _next(res);
          }, (err)=>{
            reject(err);
          });
        }else if(typeof obj=='function'){
          if(obj.constructor.toString().startsWith('function GeneratorFunction()')){
            runner(obj).then(res=>_next(res), reject);
          }else{
            _next(obj());
          }
        }else{
          _next(obj);
        }
      }else{
        resolve(res.value);
      }
    }
  });
}

8. JSON

  JSON.stringify({a:12,b:5})  =>  '{"a":12,"b":5}'
  JSON.parse('{"a":12,"b":5}')=>  {a:12,b:5}

9. 解构赋值
   let [a,b,c]=[12,5,8];
   左右结构一样
   右边是个合法的东西
   声明、赋值一次完成
10. 面向对象

  class Test{
    constructor(){
      this.xxx=
    }
    方法1(){
    }
    方法2(){
    }
  }
  class Cls2 extends Cls1{
    constructor(){
      super();
    }
  }

ps：后续慢慢完善文章，在此特别感谢BLUE老师的分享