笑说巴巴

技术分享

ECMAscript新特性 - 对象字面量的增强 Enhanced object literals

对象是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复制代码


文章归档

Powered By Z-BlogPHP 1.5.2 Zero

Copyright Your WebSite.Some Rights Reserved. 粤ICP备17007064号-3