概述
在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)