在 ECMAScript 2018（ES9）中，对象字面量（Object Literal）得到了增强，包括了更加简化的属性定义和方法定义方式，以及支持计算属性名称等功能。这些增强的特性让我们在编写前端代码时更加方便和高效，本文将对这些特性进行详细的介绍和示例演示。
简化的属性定义
在 ES9 中，我们可以在对象字面量中省略属性名和冒号，直接使用属性值来定义属性。例如：
const name = 'Tom';
const age = 18;
const person = { name, age };这样定义的对象 person 将包含两个属性，分别为 name 和 age，它们的值分别为 Tom 和 18。
这种简化的属性定义方式可以让我们更加方便地定义对象，尤其是在属性名和属性值相同时，可以省略很多重复的代码。
简化的方法定义
在 ES9 中，我们可以使用更加简化的方式定义对象的方法。例如：
const person = {
name: 'Tom',
age: 18,
sayHello() {
console.log(`Hello, my name is ${this.name}, I'm ${this.age} years old.`);
}
};这样定义的对象 person 包含了两个属性和一个方法 sayHello，方法的定义方式更加简洁明了，不需要再使用函数表达式或函数声明的方式定义方法。
计算属性名称
在 ES9 中，我们可以使用计算属性名称来定义对象的属性名。例如：
const propName = 'name';
const person = {
[propName]: 'Tom',
age: 18
};这样定义的对象 person 包含了两个属性，其中 propName 的值为 'name'，它被用作 person 对象的属性名。这种方式可以让我们更加方便地定义属性名，尤其是在属性名需要根据某个变量或表达式来动态生成时，非常有用。
示例演示
让我们来看一个完整的示例，演示如何使用 ES9 中的对象字面量增强特性来定义一个简单的用户管理系统：
-- -------------------- ---- -------
----- ----- - -
- --- -- ----- ------ ---- -- --
- --- -- ----- -------- ---- -- --
- --- -- ----- ------ ---- -- -
--
----- ------- - --------------------- ----- -- -
----- - --- ----------- - - -----
------ -
----------
----- -
---
------------
---------- -
------------------- -- ---- -- ------------- --- ----------- ----- -------
-
-
--
-- ----
----------------------------- -- ---
---------------------- -- ------ -- ---- -- ------ --- -- ----- ----上面的代码中，我们首先定义了一个包含三个用户信息的数组 users，然后使用 reduce 方法将它转换为一个以用户 id 为键，用户信息对象为值的对象 userMap。在转换过程中，我们使用了 ES9 中的对象字面量增强特性，包括了简化的属性定义、简化的方法定义和计算属性名称等。
最后，我们使用 console.log 和 sayHello 方法来输出某个用户的姓名和问候语，演示了对象字面量增强特性的实际应用。
总结
在 ECMAScript 2018（ES9）中，对象字面量得到了增强，包括了更加简化的属性定义和方法定义方式，以及支持计算属性名称等功能。这些增强的特性可以让我们在编写前端代码时更加方便和高效，尤其是在处理复杂的对象结构时，非常有用。我们可以结合示例代码来深入学习和掌握这些特性的使用方法，提高自己的前端开发水平。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/660211ead10417a222d7479a