ES6 中的 JavaScript 对象字面量语法扩展

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

在对象字面量是创建 JavaScript 中对象的最流行的模式之一，因为它很简单。ES6 通过多种方式扩展了语法，使对象字面量更加简洁和强大。

对象属性初始化简写

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

function createMachine(name, status) {
    return {
        name: name,
        status: status
    };
}Code language: JavaScript (javascript)

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

name 和 status 属性取 name 和 status 参数的值。此语法看起来很冗余，因为 name 和 status 在属性的 name 和 value 中都提到了两次。

ES6 允许您在对象的属性与局部变量名称相同时消除重复，方法是包含名称而不带冒号和值。

例如，您可以用 ES6 的方式重写 createMachine() 函数，如下所示

function createMachine(name, status) {
    return {
        name,
        status
    };
}Code language: JavaScript (javascript)

在内部，当对象字面量的属性只有名称时，JavaScript 引擎会在周围范围内搜索具有相同名称的变量。如果 JavaScript 引擎能找到一个，它会将属性分配给变量的值。

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

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

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

let machine = {
   name,
   status
};Code language: JavaScript (javascript)

计算属性名称

在 ES6 之前，您可以使用方括号 ([]) 来启用对象属性上的计算属性名称。

方括号允许您使用字符串字面量和变量作为属性名称。

请参见以下示例

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

console.log(machine[name]); // server
console.log(machine['machine hours']); // 10000Code language: JavaScript (javascript)

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
Code language: JavaScript (javascript)

machine 对象的属性评估为 'machine name' 和 'machine hours'，因此您可以将它们引用为 machine 对象的属性。

简洁的方法语法

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

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

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

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

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

这种简写语法也被称为简洁方法语法。在属性名称中包含空格是有效的。例如

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']();Code language: JavaScript (javascript)

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

object_name['property name']();Code language: CSS (css)

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

本教程对您有帮助吗？

对象属性初始化简写

计算属性名称

简洁的 方法语法

简洁的方法语法