ES6 -- 箭頭函式(Arrow Functions)

ES5中  function() {}, 在ES6中變成  () => {}。

ES6新增的箭頭函式為簡化ES5匿名函式的寫法。它的特性是:

1. 有更短的語法。(省去寫function的動作, 以 => 表示)
2. 不會因匿名函式位置改變而改變this的值。(後面例子說明)


原本的ES5寫法:

e.g.

var input = [10, 20, 30, 40, 50];

var output = input.map(function(value) {

    return value+1;

});

console.log(output);                                // [11, 21, 31, 41, 51]



在ES6中的寫法:

e.g.

var input = [10, 20, 30, 40, 50];

var output = input.map(value => {

    return value+1;

});

console.log(output);                                // [11, 21, 31, 41, 51]



p.s. 補充: array.map():

會建立一個新陣列。會為原本陣列中每個陣列元素一一呼叫function, 並把呼叫結果放在新陣列中。

(但是當原本陣列中的陣列元素沒有值時, 便不會為沒有值的該陣列元素呼叫function)
(map()不會改變原本陣列, 而是新增一個陣列放呼叫的結果)


箭頭函式注意事項:(左邊是ES5, 右邊是ES6)

1. 沒參數時要有小括號:
     function() {};  --變成-->  () => {};

2. 只有1個參數時可省略小括號:
     function(value) {};  --變成-->  value => {};       // ES6其實也可這樣寫: (value) => {};

3. 2個以上的參數需要加小括號:
     function(value, index) {};  --變成-->  (value, index) => {};

4. 當只有1行的回傳值可以省略大括號:
     function(a) { return a*a; };  --變成-->  a => a*a;


最後, 剛剛前面說到 "不會因匿名函式位置改變而改變this的值",

先看看ES5, this會因匿名函式位置改變而改變它的值:

e.g.

document.show1 = function() {

    var that = this;                                             // 是個閉包。this指向document物件

    ["how", "are", "you"].forEach(function(value) {           // 注意這個匿名函式如果有寫this, 則this指向window{}

        var h2 = document.createElement("h2");
        h2.innerText = value;
        that.body.appendChild(h2);             // 使用that是為了要使用外層function的this值, 目的是為了保持this指向document物件

    });

};

document.show1();                                         // how
                                                                            // are
                                                                            // you



在ES6, 箭頭函式中的this值永遠不變:

e.g.

document.show2 = function() {

    ["how", "are", "you"].forEach(value => {

        var h2 = document.createElement("h2");
        h2.innerText = value;
        this.body.appendChild(h2);               // this指向document物件 (因爲最外層的匿名函式如果有this, 是指向document物件)

    });

};

document.show2();                                          // how
                                                                             // are
                                                                             // you