概述

在JavaScript中，对象的使用无处不在。而对象字面量则是JavaScript中创建对象的一种非常流行的方法。因此在ECMAScript 6中，也对对象字面量的语法进行了扩展。

属性初始值的简写

• 在ECMAScript 5及早先版本中，对象字面量只是简单的键值对集合。

代码示例如下

// 函数返回使用对象字面量表示
function createCar(color, doors) {
    return {
        color : color,
        doors : doors
    }
}

// 对象定义使用对象字面量表示
let name = `John`
let age = 18

var person = {name : name, age : age}
console.log(person)

• 再ECMAScript 6中，通过使用属性初始值的简写语法，可以消除属性名称与本地变量之间的重复书写。

代码示例如下

// 函数返回使用对象字面量表示
function createCar(color, doors) {
    return {
        // 有同名的参数，只写属性名即可
        color,
        doors
    }
}

// 对象定义使用对象字面量表示
let name = `John`
let age = 18会在可访问
// 有同名的本地变量，只写属性名即可
var person = {name, age}

• 当对象字面量里只有属性名称时，JavaScript引擎会在可访问作用域中查找其同名的变量。如果未找到同名变量，则会将值直接赋给对象字面量里的同名属性。

对象方法的简写语法

ECMAScript 6也改进了为对象字面量定义方法的语法。

• 在ECMAScript 5及早先版本中，如果为对象添加方法，必须通过指定名称并完整定义函数来实现。

代码示例如下

var car = {
    color : `red`,
    doors : 4,
    showColor : function() {
        console.log(this.color)
    }
}

ECMAScript 6的简写语法如下

var car = {
    color : `red`,
    doors : 4,
    showColor() {
        console.log(this.color)
    }
}

• 通过对象方法的简写语法创建的方法有个name属性，其值为圆括号前面的名称。

调用上述定义的方法

// 输出red
car.showColor()
// 输出showColor
console.log(car.showColor.name)

可计算的属性名

在JavaScript中，访问对象的属性，可以通过点号或着方括号，如果属性名包含了特殊字符或中文，亦或者需要通过计算得到属性名，则只能使用方括号。

代码示例如下

let suffix = "name"
let person = {}
// 属性名中有空格
person["first name"] = "John"
// 属性名由表达式计算得到
person["last " + suffix] = "Tierney"
// 常规的属性可以直接通过点号访问
person.age = 18
// {'first name' : 'John', 'last name' : 'Tierney', age : 18}
console.log(person)

• 在ECMAScript 5及早先版本中，是不允许出现带有表达式的属性名的，而在ECMAScript 6中则可以采用对象字面量的语法来定义对象。

代码示例如下

let suffix = "name"
let person = {
    ["first " + suffix] : "John",
    ["last " + suffix] : "Tierney",
    age : 18
}
// {'first name' : 'John', 'last name' : 'Tierney', age : 18}
console.log(person)