在本教程中，我们将一起来了解学习 ES6 中Object（对象）字面量的语法扩展内容，这些扩展使我们的代码更简洁、更灵活。
由于其简单性，Object字面量是在 JavaScript 中创建对象的最流行的模式之一。ES6 通过在某些方面扩展语法使Object字面量更加简洁和强大。
Object 属性初始化简写
在 ES6 之前，Object字面量是name-value的集合。例如：
function createMachine(name, status) {
return {
name: name,
status: status
};
}
createMachine() 函数接受两个参数名称和状态，并返回一个具有两个属性的新对象字面量：name和status。
name 和 status 属性采用 name 和 status 参数的值。这种语法看起来是多余的，因为 name 和 status 在属性的 name 和 value 中都提到了两次。
当对象的属性与局部变量名称相同时，ES6 允许我们通过包含不带冒号和值的名称来消除重复。
例如，我们可以重写 ES6 中的 createMachine() 函数，如下所示：
function createMachine(name, status) {
return {
name,
status
};
};
在内部，当Object字面量的属性只有名称时，JavaScript 引擎会在周围范围内搜索具有相同名称的变量。如果 JavaScript 引擎可以找到一个，它会为属性分配变量的值。
在此示例中，JavaScript 引擎分配和参数的name和status属性值。namestatus
同样，您可以从局部变量构造Object字面量，如下例所示：
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’，因此，我们可以将它们作为机器对象的属性引用。
简洁的语法表示法
在 ES6 之前，在为对象字面量定义方法时，需要指定名称和完整的函数定义，如下例所示：
let server = {
name: “Server”,
restart: function () {
console.log(“The” + this.name + ” is restarting…”);
}
};
ES6 通过删除冒号 (:) 和 function 关键字，使对象字面量方法的语法更加简洁。
下面的示例使用 ES6 语法重写了上面的”server”对象。
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”的名称中有空格。要调用该方法，请使用以下语法：
object_name[‘property name’]();
在今天的教程中，我们学习了如何在 ES6 中使用一些新的Object字面量语法扩展，包括属性初始化器简写、计算属性和简洁的方法语法。
英文 | https://www.javascripttutorial.net
翻译 | 杨小爱
相关文章
