英文 | https://www.javascripttutorial.net

翻译 | 杨小爱

在本教程中，我们将一起来了解学习 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]); // serverconsole.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']); // serverconsole.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字面量语法扩展，包括属性初始化器简写、计算属性和简洁的方法语法。



学习更多技能

请点击下方公众号