11、对象字面量增强

ES2015升级了对象字面量的语法

主要包含以下几个方面：

1、使用与变量名同名属性名写法简化

2、添加方法的方式简化

3、动态添加属性名得到优化，可使用计算属性名，语法为  [expression]

// 传统
// 1 对象里面使用 属性名:属性值 的语法，即便是使用变量也必须是 属性名:变量名
// 2 为对象添加方法
// 3 添加动态属性，属性名必须是个明确的值或者规范的变量名称，只能在对象声明过后通过索引器的方式动态添加属性

const age = 4
const randomKey = Math.random()
const obj = {
    name: 'carl',
    age: 4,
    method1: function() {
        console.log(this.name);
    },
    randomKey: randomKey
}
obj[age] = 9
obj[Math.random()] = 456
// ES2015
// 1 变量名与属性名一致，可省略冒号及后面的变量名
// 2 为对象添加方法可省略冒号和function关键字，但跟之前的定义方式完全等价，this指向相同
// 3 添加动态的属性名可以直接通过 计算属性名 添加动态属性名,语法为 [任意表达式]，表达式的执行结果会作为属性名

const newObj = {
    name: 'carl',
    age,
    method1() {
        console.log(this.name)
    },
    [Math.random()]: 123,
    [1 + 3] : 4,
    [age]: 9
}

console.log(obj)
/**
 * { '4': 123,
  name: 'carl',
  age: 4,
  method1: [Function: method1],
  randomKey: 0.2845234911818537,
  '0.850196694653397': 456 }
 */
console.log(newObj)
/**
 * { '4': 9,
  name: 'carl',
  age: 4,
  method1: [Function: method1],
  '0.6707084314751564': 123 }
 */

obj.method1()   // carl
newObj.method1() // carl

// 注:第二个对象里面写了重复的属性名，后来写的属性值会覆盖前面写的属性值