JavaScript ES6 对象字面量语法扩展

在本教程中，您将了解 ES6 对象字面量的语法扩展，这些语法扩展使您的代码更简洁、更灵活。

由于其简单性，对象字面量是在 JavaScript 创建对象最流行的模式之一。ES6 通过在某些方面扩展语法使对象字面量更加简洁和强大。

对象属性初始值设定项简写

在 ES6 之前，对象字面量是名键值对的集合。例如：

function createMachine(name, status) {
    return {
        name: name,
        status: status
    };
}

createMachine()  函数接受两个参数 name 和 status。返回一个具有两个属性的对象字面量：name 和 status。

status 和 name 属性采用 name 和 status 参数的值。 这种语法看起来多余，因为name 和 status 在属性的名称和值中都提到了两次。

ES6 允许您通过包含不带冒号的名称和值来消除对象的属性与局部变量名称相同时的重复。

例如，你可以在 ES6 重写 createMachine() 函数如下：

function createMachine(name, status) {
    return {
        name,
        status
    };
}

在内部，当对象字面的属性只有名称时，JavaScript 引擎会在作用域内搜索具有相同名称的变量。如果 JavaScript 引擎可以找到一个，它会为该属性分配变量的值。

在此示例中，JavaScript 引擎将 name 和 status 参数的值分配给 name 和 status 属性。

同样，您可以从局部变量构造对象字面量，如以下示例所示：

let name = 'Computer',
    status = 'On';

let machine = {
   name,
   status
};

计算属性名称

在 ES6 之前，您可以使用方括号 [] 为对象的属性启用计算属性名称。方括号允许您使用字符串字面量和变量作为属性名称。

请参阅以下示例：

let name = 'machine name';
let machine = {
    [name]: 'server',
    'machine hours': 10000
};

console.log(machine[name]); // server
console.log(machine['machine hours']); // 10000

name 变量使用值 'machine name' 进行初始化，由于 machine 对象的两个属性都包含一个空格，您只能使用方括号引用它们。

在 ES6 ，计算属性名是对象字面量语法的一部分，它使用方括号表示法。

当属性名称放在方括号内时，JavaScript 引擎会将其评估为字符串。这意味着您可以使用表达式作为属性名称。例如：

let prefix = 'machine';
let machine = {
    [prefix + ' name']: 'server',
    [prefix + ' hours']: 10000
};

console.log(machine['machine name']); // server
console.log(machine['machine hours']); // 10000

machine 对象的属性的计算结果为 'machine name' 和 'machine hours'，因此您可以将它们作为 machine 对象的属性进行引用。

简洁的方法语法

在 ES6 之前，为对象字面量定义方法时，需要指定名称和完整的函数定义，如下例所示：

let server = {
	name: "Server",
	restart: function () {
		console.log("The" + this.name + " is restarting...");
	}
};

ES6 通过删除冒号 : 和 function 关键字 ，使对象字面量方法的语法更加简洁。

下面的示例server使用 ES6 语法重写了上面的对象。

let server = {
    name: 'Server',
    restart() {
        console.log("The" + this.name + " is restarting...");
    }
};

这种速记语法也称为简洁方法语法。属性名称中有空格是有效的。例如：

let server = {
    name: 'Server',
    restart() {
        console.log("The " + this.name + " is restarting...");
    },
    'starting up'() {
        console.log("The " +  this.name + " is starting up!");
    }
};

server['starting up']();

在此示例中，'starting up' 方法的名称中包含空格。要调用 'starting up' 方法时，请使用以下语法：

object_name['property name']();

在本教程中，您已学习如何在 ES6 使用一些新的对象字面量语法扩展，包括属性初始值设置简写、计算属性和简洁的方法语法。

myfreax

微信公众号

支付宝打赏