ES6

JavaScript 定义对象的属性，有两种方法。

1var obj = {
2    foo: true,
3    abc: 123
4    };

上面代码的方法一是直接用标识符作为属性名，方法二是用表达式作为属性名，这时要将表达式放在方括号之内。

但是，如果使用字面量方式定义对象（使用大括号），在 ES5 中只能使用方法一（标识符）定义属性。

1var obj = {
2    foo: true,
3    abc: 123
4    };

ES6 允许字面量定义对象时，用方法二（表达式）作为对象的属性名，即把表达式放在方括号内。

1let lastWord = 'last word';
2     
3    const a = {
4    'first word': 'hello',
5    [lastWord]: 'world'
6    };
7     
8    a['first word'] // "hello"
9    a[lastWord] // "world"
10    a['last word'] // "world"

表达式还可以用于定义方法名。

1let obj = {
2    ['h' + 'ello']() {
3    return 'hi';
4    }
5    };
6     
7    obj.hello() // hi

注意，属性名表达式与简洁表示法，不能同时使用，会报错。

1// 报错
2    const foo = 'bar';
3    const bar = 'abc';
4    const baz = { [foo] };
5     
6    // 正确
7    const foo = 'bar';
8    const baz = { [foo]: 'abc'};

注意，属性名表达式如果是一个对象，默认情况下会自动将对象转为字符串 [object Object]，这一点要特别小心。

1const keyA = {a: 1};
2    const keyB = {b: 2};
3     
4    const myObject = {
5    [keyA]: 'valueA',
6    [keyB]: 'valueB'
7    };
8     
9    myObject // Object {[object Object]: "valueB"}

上面代码中，[keyA] 和 [keyB] 得到的都是 [object Object]，所以 [keyB] 会把 [keyA] 覆盖掉，而 myObject 最后只有一个 [object Object] 属性。