增強物件屬性 ( Enhanced Object Properties )

物件屬性在賦予值時可以簡化形式、定義方法，甚至可使用表達式計算屬性的名稱。

這樣對使用實字模式來建立物件或陣列讀者來說更加便利了呢！

    // ES5
    
    var x = 1;
    var y = 2;
    
    var obj = {
        x: x,
        y: y
    };
    
    console.log(obj); // {x: 1, y: 2}
    
    // ES6
    
    var x = 1;
    var y = 2;
    
    var obj = {
        x,
        y
    };
    
    console.log(obj); // {x: 1, y: 2}
    

若屬性名與屬性值是一樣的話，可以省略屬性值不寫。

    // 使用表達式計算屬性的名稱
    
    // ES5
    
    var x = 100;
    var y = 200;
    var obj = {
        x: x,
        y: y
    };
    
    obj["x"+x]=x;
    obj["y"+y]=y;
    
    console.log(obj); // {x: 100, y: 200, x100: 100, y200: 200}
    
    // ES5 (錯誤的範例)
    
    var x = 100;
    var y = 200;
    
    var obj = {
        x: x,
        y: y,
        "x"+x:x,
        "y"+y:y
    }; // Uncaught SyntaxError: Unexpected token '+'
    
    console.log(obj);
    
    // ES6
    
    var x = 100;
    var y = 200;
    var obj = {
        x,
        y,
        ["x"+x]:x,
        ["y"+y]:y
    };
    
    console.log(obj); // {x: 100, y: 200, x100: 100, y200: 200}
    

    // 方法簡寫

    // ES5
    var obj = {
        foo: function(a, b) {
            console.log(a, b);
        },
        bar: function(x, y) {
            console.log(x, y);
        }
    };
    
    obj.foo(1,3);
    obj.bar(2,4);
    
    // ES6
    
    var obj = {
        foo(a, b) {
            console.log(a, b);
        },
        bar(x, y) {
            console.log(x, y);
        }
    };
    
    obj.foo(1,3);
    obj.bar(2,4);

解構分配 ( Destructuring Assignment )

解構分配意思就是可以從一個物件或陣列中賦予新的變數，比起傳統的語法更簡潔也更直觀清晰。
除了變數可以使用解構分配，函式參數也可以使用解構分配。

下面同樣的，我們會用幾段程式碼來示範解構分配的用法。

    // 陣列的解構分配

    // ES5
    
    var item = ["a", "z"];
    var a = item[0];
    var z = item[1];
    item = [z, a];
    
    console.log(item); // ["z", "a"]
    
    // ES6
    
    var item = ["a", "z"];
    var [a, z] = item;
    item = [z, a];
    
    console.log(item); // ["z", "a"]

    // 物件的解構分配

    // ES5
    
    var obj = {
        name: "Reynold",
        age: 25,
        gender: "male"
    };
    
    var name = obj.name;
    var age = obj.age;
    var gender = obj.gender;
    
    console.log(name, age, gender); // Reynold 25 male
    
    // ES6
    
    var obj = {
        name: "Reynold",
        age: 25,
        gender: "male"
    };
    
    var {name, age, gender} = obj;
    
    console.log(name, age, gender); //  Reynold 25 male

    // 深層物件解構分配

    // ES5
    
    var obj = {
        name: {
            firstName: "Reynold",
            lastName: "Ren"
        },
        age: 25,
        gender: "male"
    };
    
    var firstName = obj.name.firstName;
    var lastName = obj.name.lastName;
    var age = obj.age;
    var gender = obj.gender;
    
    console.log(firstName, lastName, age, gender); // Reynold Ren 25 male
    
    // ES6
    
    var obj = {
        name: {
            firstName: "Reynold",
            lastName: "Ren"
        },
        age: 25,
        gender: "male"
    };
    
    var {name:{firstName, lastName}, age, gender} = obj;
    
    console.log(firstName, lastName, age, gender);  // Reynold Ren 25 male

若要將物件屬性名稱解構分配成不同的變數名稱，請將新的變數設定在冒號後面。
ex: var { name: {firstName, lastName}, age, gender:sex } = obj;

    // 在函式內應用陣列解構分配

    // ES5
    
    function f1(ary) {
        var name = ary[0];
        var age = ary[1];
        console.log(name, age);
    }
    
    f1(["Reynold", 25]); // Reynold 25
    
    // ES6
    
    function f2([name, age]) {
        console.log(name, age);
    }
    
    f2(["Reynold", 25]); // Reynold 25

    // 在函式內應用物件解構分配
    
    // ES5
    
    function f1(obj) {
        var name = obj.name;
        var age = obj.age;
        console.log(name, age);
    }
    
    f1({name: "Reynold", age: 25}); // Reynold 25
    
    // ES6
    
    function f2({name, age}) {
        console.log(name, age);
    }
    
    f2({name: "Reynold", age: 25}); // Reynold 25

相信大家看完以上範例對於解構分配上有一定的了解，建議各位自己練習操作幾次或在工作上嘗試使用它，會印象更深刻哦！

剩最後一天了，明天來說說類別 ( Class ) 與 非同步處理 ( Promise、Async...Await )，這系列就要先告一個段落了。

參考資料：

Tommy - 深入 JavaScript 核心課程

MDN - 解構賦值