随着 JavaScript 的发展和普及，前端开发的难度也在不断攀升。为了优化开发效率和代码的可读性，ES10 在对象字面量（literal）中增加了一些强大的功能。本文将详细介绍 ES10 中新增的对象字面量功能，并给出实用案例。
简介
ES10 在对象字面量中新增了以下的语法糖：
- 可以使用计算属性名访问对象属性
- 可以使用大括号包含代码块，并在其中使用 return 语句
- 增加了对象方法的简洁表示法
- 新增方法定义的私有状态
接下来，我们将逐一介绍这些功能。
计算属性名
在 ES10 中，我们可以使用计算属性名来访问对象属性。这种访问方式有助于动态创建对象属性，提高代码实用性。
计算属性名的语法如下：
const obj = {
[属性名]: 属性值
};
// 在定义对象字面量时使用
const obj = {
[expression]: 属性值
};下面是一个简单的实例，展示了如何利用计算属性名的功能来创建动态属性。
const dynamic = "fullName";
const person = {
firstName: "John",
lastName: "Doe",
[dynamic]: "John Doe"
};
console.log(person.fullName) // "John Doe"使用大括号包含代码块
在 ES10 中，对象字面量中可以包含代码块，并在其中使用 return 语句。
-- -------------------- ---- -------
----- --- - -
--------- -
----- -
-- -- -------- ----
------ ------
--
------------- -
-- -- -------- ----
----- - ---------
-
-
--在字面量中使用大括号的好处在于可以使用多行代码。借助代码块，我们可以编写更加强大的对象方法。
例如，假设我们有一个对象数组，需要筛选出其中符合条件的元素。我们可以使用以下代码：
-- -------------------- ---- -------
----- ----- - -
------- -------- ------- ----------
------- ----- ------- ---------
------- ----- ------- -------------
--
----- ------------- - ----------------- --
-
----- ------- ------- - -----
------ ------------------- -- ---------------------
-
--
---------------------------对象方法的简洁表示法
ES10 实现了更加简洁的对象方法定义语法，使用 function 关键字可以直接声明方法。
const obj = {
method() {
// 方法代码
}
};如果方法名称和属性名相同，可以省略冒号和函数关键字：
const variable = {
// 省略的冒号和 function 关键字
function() {
// 方法代码
}
};新增方法定义
在 ES10 中，定义对象方法时可以使用冒号和箭头函数的形式创建私有状态。
-- -------------------- ---- -------
----- --- - -
-- ------------- -
------- --
-- ----------------- ---------
---------- -- -- -
----------- -- --
------ ------------
-
--在这个例子中，#count 是私有状态，值被初始化为 0。increment 方法会调用箭头函数并增加私有状态的值，返回加后后的值。
总结
ES10 的对象字面量功能增强为开发者提供了一个灵活的编写对象的方法。计算属性名、代码块、简洁方法等特性有助于提高代码的可读性和实用性。私有状态的定义也可以在一定程度上保护对象的隐私性。
开发者可以结合实际需要，选择适合的方法和函数定义方式，并适时应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6502eb7a95b1f8cacd018794