对象是ECMAscript当中最常用的数据结构,ECMAscript 2015 当中升级了对象字面量的语法。传统的字面量语法要求必须在花括号里面使用属性名冒号属性值 { 属性名 : 属性值 } 这种语法,即便说我们的属性是一个变量,也必须是这种形式来定义。在ES2015中,若果变量名和属性名是一致的话,就可以省略掉冒号以及后面的变量名。
const bar = '345';const obj = { foo: 123, bar: bar }// 等价于const obj = { foo: 123, bar, } 复制代码
除此之外,如果我们需要为对象添加一个普通的方法,传统的做法就是通过 { 方法名:函数表达式 } 这种形式。在 ES2015 中可以去掉冒号和 function,需要注意的是这种方法的背后实际上就是普通的 function ,也就是说通过对象去调用这个方法内部的 this 指向当前对象 。
const obj = { name: 'foo', method: function () { console.log('method') }, method1 () { console.log(this) } } obj.method1() // foo复制代码
对象字面量还有一个很重要的变化就是,可以使用表达式的返回值作为对象的属性名。以前如果说要为对象添加一个动态的属性名,就只能在对象声明过后通过索引器的方式[方法名]来动态添加。在 ES2015 过后对象字面量属性名就直接可以通过方括号,直接去使用动态的值这样一个特性叫做计算属性名。
const obj = { [Math.random()]: 123} obj[Math.random()] = 123复制代码