JavaScript ES6 Object Literal Extensions 物件實字的擴展

ES6 的新語法讓 object literal 可以寫得更簡短清楚。

Property value shorthand 物件屬性簡寫

如果你的屬性名稱和變數名稱一樣，你可以在 object literal 只使用變數，則變數的名稱會被當作是屬性名稱，而變數的值會被當作是屬性值。

用法：

var obj = {
    foo,
    bar
};

上面的語法同等於：

var obj = {
    foo: foo,
    bar: bar
};

Method definition shorthand 物件方法簡寫

除了物件的屬性可以簡寫外，物件的方法也可以。

ES6 新的寫法：

var obj = {
    // 可以省略 function 關鍵字和冒號 (colon)
    doSomething() {
        // ...
    }
};

上面的寫法同等於：

var obj = {
    doSomething: function() {
        // ...
    }
};

Computed property keys 計算得出的屬性名稱

ES6 允許使用表達式 (expression) 作為屬性的名稱，語法是將 expression 放在中括號 [ ] 裡面，透過 [ ] 的語法，我們的屬性名稱就可以放入變數，達到動態產生屬性名稱的效果。

範例：

var prefix = 'es6';

var obj = {
    // 計算屬性
    [prefix + ' is']: 'cool',
    
    // 計算方法
    [prefix + ' score']() {
        console.log(100);
    }
};
 
// 顯示 cool
console.log(obj['es6 is']);

// 顯示 100
obj['es6 score']();