3.6 对象字面量的扩展语法

目录

3.6.1 属性初始值的简写

3.6.2 对象方法的简写语法

3.6.3 可计算的属性名

3.6.1 属性初始值的简写

        ES5及早期的版本中，对象字面量只是简单的键值对集合。代码如下所示：

function createCar(color,doors)
{
    return {
        color:color,
        doors:doors
    }
}

        ES6中，通过属性初始值的简写语法，可以消除属性名称与本地变量名称之间的重复书写，当一个对象的属性与本地变量同名时，可以不用写冒号和值，简单地只写属性名即可。

function createCar(color,doors){
    return {
        // 有同名的参数，只写属性名即可
        color,
        doors
    }
}

let name = "张三";
let age = 18;

// 有同名的本地变量，只写属性名即可
let person = { name,age }

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

3.6.2 对象方法的简写语法

        ES5早期版本中，如果为对象添加方法，则必须通过指定名称并完整定义函数来实现。代码如下所示：

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

        ES6中定义对象方法时可以省略冒号和function关键字。

var car = {
    color:"red",
    doors:4,
    showColor(){
        console.log(this.color);
    }
} 
car.showColor();                   // red
console.log(car.showColor.name);   // showColor

3.6.3 可计算的属性名

        在ES6中，可以在对象字面量对象中使用可计算的属性名称。

let suffix = "name";
let person = {
    ["first " + suffix]:"san",
    ["first " + suffix]:"zhang",
    age:20
}

console.log(person); // {"first name":"san","first name":"zhang","age":20,}