升级你的 JS：对象文字增强将改变你的代码

对象 td 属性方法 70 来源： 2024-10-19

对象字面量是 javascript 的基本组成部分，使我们能够快速创建和初始化对象。在 es6 及更高版本中，javascript 引入了对对象字面量的多项增强，使它们更加强大和简洁。让我们深入研究这些改进，看看它们如何使我们的代码更干净、更高效。

1. 属性简写名称

创建对象时，如果属性名称与分配给它的变量名称相同，则可以使用简写语法。

const name = 'john';
const age = 30;

// old way
const person = {
    name: name,
    age: age
};

// new way
const person = { name, age };

console.log(person); // { name: 'john', age: 30 }

这种简写语法减少了重复，使我们的代码更加简洁。
mdn 文档：对象初始值设定项

2. 简写方法名称

同样，在对象中定义方法时，我们可以省略 function 关键字和冒号。

// old way
const calculator = {
    add: function(a, b) {
        return a + b;
    }
};

// new way
const calculator = {
    add(a, b) {
        return a + b;
    }
};

console.log(calculator.add(null, 3)); // 8

这种语法更清晰、更容易阅读，尤其是当一个对象中有多个方法时。
mdn 文档：方法定义

3. 计算属性名称

es6 允许我们使用表达式来计算属性名称。当您想要创建动态属性名称时，这特别有用。

const prefix = 'user_';
const id = 1234;

const user = {
    [`${prefix}${id}`]: 'john doe'
};

console.log(user.user_1234); // 'john doe'

当您需要根据某些逻辑或外部数据创建具有动态键的对象时，此功能非常强大。
mdn 文档：计算属性名称

4. 方法属性

es6 引入了一种使用 get 和 set 关键字在对象字面量中定义方法的新方法。这允许您创建计算属性而无需显式调用函数。

const person = {
    firstname: 'john',
    lastname: 'doe',
    get fullname() {
        return `${this.firstname} ${this.lastname}`;
    },
    set fullname(name) {
        [this.firstname, this.lastname] = name.split(' ');
    }
};

console.log(person.fullname); // 'john doe'
person.fullname = 'jane smith';
console.log(person.firstname); // 'jane'
console.log(person.lastname); // 'smith'

获取器和设置器提供了一种干净的方法来定义计算属性，并可用于在获取或设置值时添加验证或副作用。
mdn 文档：getter 和 setter

5. 对象扩展运算符

虽然严格来说不是对象字面量增强的一部分，但扩展运算符 (...) 是一个强大的功能，可以很好地与对象字面量配合使用。它允许您轻松克隆对象或合并多个对象。

const defaults = {
    theme: 'light',
    fontSize: 14
};

const userPreferences = {
    fontSize: 16
};

const settings = {
    ...defaults,
    ...userPreferences
};

console.log(settings); // { theme: 'light', fontSize: 16 }

扩展运算符可以轻松地基于现有对象创建新对象，这对于维护应用程序中的不变性特别有用。
mdn 文档：扩展语法 (...)

结论

javascript 中的这些对象文字增强功能为开发人员提供了更具表现力和简洁的方法来处理对象。通过利用这些功能，您可以编写更清晰、更易读且更易于维护的代码。

请记住，虽然这些功能很强大，但明智地使用它们也很重要。始终优先考虑代码的可读性和可维护性而不是简洁性。

浏览器兼容性

以下是浏览器对这些功能的支持的快速概述：

feature	chrome	firefox	safari	edge
shorthand properties	43+	33+	9+	12+
shorthand methods	43+	34+	9+	12+
computed property names	43+	34+	8+	12+
getter/setter methods	1+	1.5+	3+	12+
object spread	60+	55+	11.1+	79+

实际用例

速记属性：非常适合从现有变量创建对象，尤其是在 react 组件 props 中。
简写方法：在类结构或定义多个相关函数时很有用。
计算属性名称：非常适合在国际化 (i18n) 对象中创建动态键。
getter/setter 方法：非常适合创建具有内置验证或副作用的“智能”属性。
对象扩展：非常适合 redux 中的状态管理或通过轻微修改创建新对象。

性能考虑因素

虽然这些增强功能通常不会对性能产生重大影响，但对象扩展运算符在合并许多属性时可能比 object.assign() 效率低。对于大多数用例，可读性的好处超过了任何微小的性能差异。