箭頭函式 (Arrow Functions)

為了簡化函式，箭頭函式語法上更短，以及有著不改變 This 的特性，所有的箭頭函式都必須是匿名函式。

    // ES5
    
    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
    
    var input = [10, 20, 30, 40, 50];
    var output = input.map(value => {
        return value+1;
    });
    
    console.log(output); // [11, 21, 31, 41, 51]
    

而箭頭函式允許地表示方式有下面四點，我們也會再用程式碼幫助各位加深印象。

1. 沒有參數時要有小括號
2. 只有一個參數時可以省略小括號
3. 若有兩個以上的參數要有小括號
4. 只有一行回傳值可以省略大括號

    // ES5
    
    function() {
    }
    
    function(value) {
    }
    
    function(value, index) {
    }
    
    function(a) {
        return a*a;
    }
    
    // ES6
    
    () => {
    }
    
    value => {
    }
    
    (value, index) => {
    }
    
    a => a*a
    

箭頭函式中的 this(arguments) 不會改變指向的參考。

    //es5

    document.show1 = function() {
        var that = this;
        ["how", "are", "you"].forEach(function(value) {
            var h2 = document.createElement("h2");
            h2.innerText = value;
            that.body.appendChild(h2);
        });
    };
    document.show1();

//es6

    document.show2 = function() {
        ["how", "are", "you"].forEach(value => {
            var h2 = document.createElement("h2");
            h2.innerText = value;
            this.body.appendChild(h2);
        });
    };
    
    document.show2();

函式參數擴展 ( Extended Parameter Handling )

以往我們不能直接為函式的參數指定設定值，只能採用其他變通的方法。
而 ES6 支援函式參數具備預設值的功能，讓程式碼更簡潔。

    // 設定預設值

    //es5
    
    function link1(height, color, url) {
        var height = height !== undefined ? height : 50;
        var color = color !== undefined ? color : "red";
        var url = url !== undefined ? url : "http://www.abc.com";
        console.log(height, color, url);
    }
    
    link1(null, "Blue");
    link1(undefined, "", "http://www.abc.com");
    
    //es6
    
    function link2(height = 50, color = "red", url = "http://www.abc.com") {
        console.log(height, color, url);
    }
    
    link2(undefined, "Blue");
    link2(undefined, "", "http://www.abc.com");

相信大家都知道，我們可以利用 arguments 來取得所有傳入的參數，現在我們也可以用 ... 來取得剩餘的參數。

    // ES5
    
    function run1(a, b) {
        console.log(arguments);
    }
    
    run1(10, 20, 30); // Arguments(3) [10, 20, 30, callee: ƒ, Symbol(Symbol.iterator): ƒ]
    
    // ES6
    
    function run2(a, ...params) {
        console.log(a, params);
    }
    
    run2(10, 20, 30); // 10, [20, 30]

我們也可以透過 ... 來合併陣列。

    // ES5
    
    var xyz = ["x", "y", "z"];
    var abc = ["a", "b", "c"];
    var out = abc.concat(xyz);
    
    console.log(out); // ["a", "b", "c", "x", "y", "z"]
    
    // ES6
    
    var xyz = ["x", "y", "z"];
    var abc = ["a", "b", "c"];
    var out = [...abc, ...xyz];
    
    console.log(out); // ["a", "b", "c", "x", "y", "z"]
    
    //也可用在類別的參數上
    
    function Run(...params) {
        console.log(params);
    }
    
    var args = [10, 20, 30];
    
    // ES5
    
    var run = new (Function.prototype.bind.apply(Run, [null].concat(args)));
    
    // ES6
    
    var run = new Run(...args);

字串樣板 ( Template Strings )

字串樣板可以插入的不僅僅是變數，還能插入任何有效的表達式，此外連多行文字的串接都可以不用透過 \n 來完成。

    
    // ES5
    
    var url="http://www.google.com";
    var name="www.google.com";
    var link = "<a href=\"" + url + "\">" + name + "</a>";
    
    console.log(link);
    
    // ES6
    
    var url="http://www.google.com";
    var name="www.google.com";
    var link = `<a href="${url}">${name}</a>`;
    
    console.log(link);

    // 多行文字的串接

    // ES5 方法一
    
    var text = "AAAAA\n";
    text += "BBBBB\n";
    text += "CCCCC\n";
    text += "DDDDD";
    
    console.log(text);
    
    // ES5 方法二
    
    var text = "AAAAA\n" + "BBBBB\n" + "CCCCC\n" + "DDDDD";
        
    console.log(text);
    
    // ES5 方法三
    
    var text = "AAAAA\n\
    BBBBB\n\
    CCCCC\n\
    DDDDD";
    
    console.log(text);
    
    // ES6
    
    var text = `AAAAA
    BBBBB
    CCCCC
    DDDDD`;
    console.log(text);

是不是真的很方便呢？

連假怎麼過的怎麼快 RRR

參考資料：

Tommy - 深入 JavaScript 核心課程