ES6 之對象擴展

屬性的簡潔表示法:

ES6允許直接寫入變量和函數,作爲對象的屬性和方法,這樣寫更簡潔:

var foo = 'bar';
var baz = {foo};
baz //{foo:'bar'}

//等同於
var baz = {foo: foo}

上面的代碼表明,ES6允許在對象之中,只寫屬性名,不寫屬性值.這時,屬性值等同屬性名所代表的變量.

function f(x, y) {
    return {x, y}
}

//等同於
function f(x, y){
    return (x:x, y:y}
}

除了屬性簡寫,方法也可以簡寫.
 

var 0 = {
    method (){
         return "xxx";
   }
};

//等同於
var o = {
    method: function() {
        return 'xxx";
    }
};

這種寫法用於函數的返回值, 將會非常方便:

function getPoint() {
    var x = 1;
    var y = 10;
    return {x, y}:
}

getPoint()
// {x:1, y:10}

屬性名錶達式

JavaScript 語言定義對象的屬性,有兩種方法:

//方法一
obj.foo = true;

//方法二
obj['a' + 'bc'] = 123;

上面代碼的方法是直接用標識符作爲屬性名,方法二是用表達式作爲屬性名,這時要將表達式放在方括號之內.

ES6 允許字面量定義對象時,用方法二(表達式)作爲對象的屬性名,即把表達式放在方括號內.

let propKey = 'foo';
let obj = {
    [propKey] : trune;
    ['a' + 'bc'] : 123
};

表達式還可以用於定義方法名:

let obj = {
    ['h' + 'ello']() {
        return 'xxx';
    }
};

obj.hello() ///xxx

注意: 屬性名錶達式 和 簡潔表示法,不能同時使用.否則報錯.

var foo = 'bar';
var bar = 'abc';
var baz = { [foo] };//報錯