es6常用特性学习总结

常用到的es6方法，或者说20%的内容，但是在实际应用场景中占了80%的内容。
1、默认参数

es5写法：
var link = function(height, color) {
    var height = height || 50,
        color = color || 'red';
    ...
}
*************************************
es6写法：
var link = function(height = 50, color = 'red'){
    ...
}
解决问题：1)当参数是数字0时，es5的写法是有问题的。JavaScript会解析为false，
导致赋值错误；2)es6的写法更优雅简洁。

2、模板对象

es5写法：
    var name = 'your name is' + first + '' + last + '.';
    var url = 'http://localhost:8080/api/messages/' + id;

es6写法：
    var name = `your name is ${first} ${last}.`;
    var url = `http://localhost:8080/api/messages/${id}`;
解决问题：1)es5中通过加操作符来操作字符串中的变量，会引入很多单引号，稍不留意，会导致出错，特殊字符还需要转义，比较麻烦。2）es6的写法大大降低了出错的可能，更简洁。

3、多行字符串

es5写法：
var roadPoem = 'Then took the other, as just as fair,'
    + 'And having perhaps the better claimnt'
    + 'Because it was grassy and wanted wear,nt'
    + 'Though as for that the passing therent'
    + 'Had worn them really about the same,nt';
var fourAgreements = 'You have the right to be you.n
    You can only be you when you do your best.';

es6写法：
var roadPoem = `Then took the other, as just as fair,
    And having perhaps the better claim
    Because it was grassy and wanted wear,
    Though as for that the passing there
    Had worn them really about the same,`;
var fourAgreements = `You have the right to be you.
    You can only be you when you do your best.`;
解决问题：1)es5中超长字符串的写法通过字符串相加实现，会引入很多单引号，稍不留意，会导致出错，特殊字符还需要转义，比较麻烦。2）该方法和模板对象异曲同工。

4、解构赋值（可以理解为批量赋值，对于等号左右结构类型一致的变量和值，一一对应赋值）

es5写法：
    var data = $('body').data(),
        house = data.house,
        mouse = data.mouse;


es6写法：
    var {house,mouse} = $('body').data();
    var {a,b} = {a:1,b:2};//=>a=1;b=2
    注意对象的解构，左边的参数必须和右边对象的属性名一样，而数组的解构不需要
解决问题：1)es5中获取数组或对象的键值并赋值是个常见的操作，旧的方式是取值，并一一赋值给新变量，相当于同一个操作执行了很多遍，比较啰嗦。2）es6的写法节省了代码量，实现了批量赋值，提高了效率。

5、箭头函数

es5写法：
    var _this = this;
    $('.btn').click(function(event){
        _this.sendData();
    })

es6写法：
    $('.btn').click((event) => {
        this.sendData();
    })
解决问题：1)es5中的this一不小心就会被改变，箭头函数，函数体内的this对象，就是定义时所在的对象，而不是调用时的对象。不必用self = this或.bind来实现this的指向变更2）箭头函数写法更优雅。

6、块级作用域let和const

es5写法：
    function calculateTotalAmount(vip) {
        var amount = 0;
        if(vip) {
            var amount = 1;
        }
        {
            var amount = 10;
        }
        return amount;
    }
    console.log(calculateTotalAmount(true));
    结果返回10，因为es5没有块级作用域，只有全局域和函数域，因此导致错误。

es6写法：
    function calculateTotalAmount(vip) {
        var amount = 0;
        if(vip) {
            let amount = 1;
        }
        {
            let amount = 10;
        }
        return amount;
    }
    console.log(calculateTotalAmount(true));    
    结果返回0，因为块级作用域用了let，但是外部有var amount = 0，会覆盖。为了解决问题，引入const，常量，也是块级作用域，但是值不能被修改。
    function calculateTotalAmount(vip) {
        const amount = 0;
        if(vip) {
            let amount = 1;
        }
        {
            let amount = 10;
        }
        return amount;
    }
    console.log(calculateTotalAmount(true));        
    结果返回1.
解决问题：1)es5中的变量声明很简单，但是一不小心就会引入全局变量，没有命名空间导致变量污染。在es5中可以用闭包的方法实现命名空间，但是较复杂2）es6的写法使得JavaScript更符合常见语言的思路。

7、class

es5面向对象编程有很多种方法，比较复杂。es6使用关键字 class、super、extends实现了类的创建、继承等面向对象思想。如下：
class Animal {
    constructor(){
        this.type = 'animal'
    }
    says(say){
        console.log(this.type + 'says' + say)
    }
}

let animal = new Animal()
animal.says('hello')//animal says hello

class Cat extends Animal {
    constructor(){
        super()
        this.type = 'cat'
    }
}

let cat = new Cat()
cat.says('hello') //cat says hello

讲解：首先用class定义了一个类，里面的constructor方法，是构造方法，而this关键字代表了实例对象。简单地说，constructor内定义的方法和属性是实例对象自己的，而constructor外定义的方法和属性是所有实例对象可以共享的。

    class 完全可以看作是es5构造函数的另一种写法,使用的时候得也是通过new命令来生成实例对象如：
    class Test{
    ....
    }
    typeof Test //'function'
    Test === Test.prototype.constructor //true

    let b = new Test();
    class之间通过extends关键字实现继承，比es5通过原型链实现继承清晰方便。

    super关键字，指代父类的实例（即父类的this对象）。子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工，如果不调用super方法，子类就得不到this对象。

    es6的继承机制，实质是先创造父类的实例对象this（所以必须先调用super方法），然后再用子类的构造函数修改this。

    class的静态方法只能被类或者子类调用，不能被实例对象调用。

    class的静态属性class Foo{ static prop = 1;} prop即为静态属性。

    class的实例属性可以用等式，写入类的定义之中。如：class MyClass { myProp = 42; constructor(){}} 。在类的实例中，可以读取该属性。
    new是从构造函数生成实例的命令，es6引入了new.target属性，该方法一般用于构造函数中，返回new命令作用的那个构造函数名。