ES6-對象的擴展-屬性名表達式

JavaScript 定義對象的屬性，有兩種方法。

 

    var obj = {
    foo: true,
    abc: 123
    };

 

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

 

但是，如果使用字面量方式定義對象（使用大括號），在 ES5 中只能使用方法一（標識符）定義屬性。

 

    var obj = {
    foo: true,
    abc: 123
    };

 

ES6 允許字面量定義對象時，用方法二（表達式）作為對象的屬性名，即把表達式放在方括號內。

 

 

    let lastWord = 'last word';
     
    const a = {
    'first word': 'hello',
    [lastWord]: 'world'
    };
     
    a['first word'] // "hello"
    a[lastWord] // "world"
    a['last word'] // "world"

 

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

 

 

    let obj = {
    ['h' + 'ello']() {
    return 'hi';
    }
    };
     
    obj.hello() // hi

 

注意，屬性名表達式與簡潔表示法，不能同時使用，會報錯。

 

 

    // 報錯
    const foo = 'bar';
    const bar = 'abc';
    const baz = { [foo] };
     
    // 正確
    const foo = 'bar';
    const baz = { [foo]: 'abc'};

 

注意，屬性名表達式如果是一個對象，默認情況下會自動將對象轉為字符串 [object Object]，這一點要特別小心。

    const keyA = {a: 1};
    const keyB = {b: 2};
     
    const myObject = {
    [keyA]: 'valueA',
    [keyB]: 'valueB'
    };
     
    myObject // Object {[object Object]: "valueB"}

 

上面代碼中，[keyA] 和 [keyB] 得到的都是 [object Object]，所以 [keyB] 會把 [keyA] 覆蓋掉，而 myObject 最后只有一個 [object Object] 屬性。