S 6常用特性学習まとめ

よく使われるes 6の方法、あるいは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、クラス

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            。