ES6新特性

1 变量 / 赋值

1.1 变量：

1. var 可以重复定义，没有块级作用域，不能限制修改
2. let 不可重复定义，变量，块级作用域
3. const 不可重复定义，常量，块级作用域

1.2 解构赋值：

1. 左右两边必须一样，右边的语法需要合法
2. 声明和赋值同步完成

2 函数

2.1 箭头函数：

function (参数，参数) {
函数体
}
（参数，参数）=> {
函数体
}

1. 如果有且仅有一个参数，()可以省
2. 如果函数体只有一句话，而且是return，{}可以省
   *改变 this 指向

2.2 默认参数

(a=xx, b=xx, c=xx) 等价于 a = a || xx, b = b || xx, c = c || xx

2.3 参数展开(剩余参数、数组展开)

1. “三个点”的第1个用途：接收剩余参数
   function show(a, b, …名字)
   剩余参数必须在参数列表的最后

2. “三个点”的第2个用途：展开一个数组

3 数组/json

3.1 数组的方法——5种

map 映射：一个对一个
reduce 汇总：一堆->一个
filter 过滤：
forEach 遍历：将伪数组转化为数组，使其可以用数组的方法
Array.from([array-like])=>[x,x,x]

3.2 json——2变化

1. 简写：名字和值一样的，可以省
2. function可以不写

4 字符串

4.1 字符串模板：

反引号。植入变量、任意折行

4.2 startsWith

4.3 endsWith

5 面向对象

5.1 ES5创建对象

    function Person(name, age){
      this.name=name;
      this.age=age;
    }//属性
    Person.prototype.showName=function (){
      alert('我叫'+this.name);
    };//方法
    Person.prototype.showAge=function (){
      alert('我'+this.age+'岁');
    };

5.2 ES6创建对象

// ES6 写法    
    class Person{
      constructor(name, age){
        this.name=name;
        this.age=age;
      }
      showName(){
        alert('我叫'+this.name);
      }
      showAge(){
        alert('我'+this.age+'岁');
      }
    }

5.3 ES5继承

    function Worker(name, age, job){
      Person.call(this, name, age);
      this.job=job;
    }
    
    Worker.prototype=new Person();
    Worker.prototype.constructor=Worker;
    Worker.prototype.showJob=function (){
      alert('我是做：'+this.job);
    };

5.4 ES6继承

    class Worker extends Person{
      constructor(name, age, job){
        //super-超类(父类)
        super(name, age);
        this.job=job;
      }

      showJob(){
        alert('我是做：'+this.job);
      }
    }

class/constructor
extends/super
普通函数：根据调用我的人 this老变
箭头函数：根据所在的环境 this恒定
bind——给函数定死一个this

6 异步操作

6.1 历史解决版本

1. callback回调地狱
2. Promise：Promise对象
3. Generator
4. async / await——终极解决方案

6.2 async / await

样例代码

async function test() {
    const v1 = await Promise1();
    const v2 = await Promise2();
}
test();

await后面跟 Promise(Generator、async)、原始类型的值

6.3 async / await执行顺序

很多人以为await会一直等待之后的表达式执行完之后才会继续执行后面的代码，实际上await是一个让出线程的标志。await后面的函数会先执行一遍，然后就会跳出整个async函数来执行后面js栈的代码。等本轮事件循环执行完了之后又会跳回到async函数中等待await后面表达式的返回值，如果返回值为非promise则继续执行async函数后面的代码，否则将返回的promise放入Promise队列（Promise的Job Queue）

// 数字序号即输出顺序
    function testSometing() {
        console.log("2");
        return "4";
    }

    async function testAsync() {
        console.log("5");
        return Promise.resolve("7");
    }

    async function test() {
        console.log("1");
        const v1 = await testSometing(); //关键点1
        console.log(v1);
        const v2 = await testAsync();
        console.log(v2);
        console.log("8");
    }

    test();

    var promise = new Promise((resolve) => { console.log("3");
        resolve("6"); }); //关键点2
    promise.then((val) => console.log(val));

6.4 async / await错误处理

await 遇到报错，后面的代码不会执行

// 未进行错误处理
let last;
async function throwError() {  
    await Promise.reject('error');    
    last = await '没有执行'; 
}
throwError().then(success => console.log('成功', last))
            .catch(error => console.log('失败',last))
// 失败 undefined

let last;
async function throwError() {  
    try{  
       await Promise.reject('error');    
    }catch(error){
        console.log('has Error stop');
    }
   last = await '继续执行了'; 
}
throwError().then(success => console.log('成功', last))
            .catch(error => console.log('失败',last))
// 成功 undefined

7 模块化 ES6

打包、编译

ES6 -> ES5编译 babel
打包 browserify

ajax/jsonp
websocket