属性的简洁表示法
ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法。这样的书写更加简洁。
1. const foo = ‘bar‘; 2. const baz = {foo}; 3. baz // {foo: "bar"} 4. 5. // 等同于 6. const baz = {foo: foo};
上面代码中，变量 foo 直接写在大括号里面。这时，属性名就是变量名, 属性值就是变量值。下面
是另一个例子。
1. function f(x, y) { 2. return {x, y}; 3. } 4. 5. // 等同于 6. 7. function f(x, y) { 8. return {x: x, y: y}; 9. } 10. 11. f(1, 2) // Object {x: 1, y: 2}
除了属性简写，方法也可以简写。
1. const o = { 2. method() { 3. return "Hello!"; 4. } 5. }; 6. 7. // 等同于 8. 9. const o = { 10. method: function() { 11. return "Hello!"; 12. } 13. };
下面是一个实际的例子。
1. let birth = ‘2000/01/01‘; 2. 3. const Person = { 4. 5. name: ‘张三‘, 6. 7. //等同于birth: birth 8. birth, 9. 10. // 等同于hello: function ()... 11. hello() { console.log(‘我的名字是‘, this.name); } 12. 13. };
这种写法用于函数的返回值，将会非常方便。
1. function getPoint() { 2. const x = 1; 3. const y = 10; 4. return {x, y}; 5. } 6. 7. getPoint() 8. // {x:1, y:10}
简洁写法在打印对象时也很有用。
1. let user = { 2. name: ‘test‘ 3. }; 4. 5. let foo = { 6. bar: ‘baz‘ 7. }; 8. 9. console.log(user, foo) 10. // {name: "test"} {bar: "baz"} 11. console.log({user, foo}) 12. // {user: {name: "test"}, foo: {bar: "baz"}}
上面代码中， console.log 直接输出 user 和 foo 两个对象时，就是两组键值对，可能会混
淆。把它们放在大括号里面输出，就变成了对象的简洁表示法，每组键值对前面会打印对象名，这样就
比较清晰了。
注意，简写的对象方法不能用作构造函数，会报错。
1. const obj = { 2. f() { 3. this.foo = ‘bar‘; 4. } 5. }; 6. 7. new obj.f() // 报错
上面代码中， f 是一个简写的对象方法，所以 obj.f 不能当作构造函数使用。
属性名表达式
JavaScript 定义对象的属性，有两种方法。
1. // 方法一 2. obj.foo = true; 3. 4. // 方法二 5. obj[‘a‘ + ‘bc‘] = 123;
上面代码的方法一是直接用标识符作为属性名，方法二是用表达式作为属性名，这时要将表达式放在方
括号之内。
但是，如果使用字面量方式定义对象（使用大括号），在 ES5 中只能使用方法一（标识符）定义属
性。
1. var obj = { 2. foo: true, 3. abc: 123 4. };
ES6 允许字面量定义对象时，用方法二（表达式）作为对象的属性名，即把表达式放在方括号内。
1. let propKey = ‘foo‘; 2. 3. let obj = { 4. [propKey]: true, 5. [‘a‘ + ‘bc‘]: 123 6. };
表达式还可以用于定义方法名。
1. let 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] ，这
一点要特别小心。
1. const 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] 属性。
2021-04-27 14:48:55
2021.04.27（对象的扩展 属性的简洁表示法、属性名表达式）
原文：https://www.cnblogs.com/zhenggc99/p/14708956.html