升級你的 JS：物件文字增強將改變你的程式碼

發佈於2024-11-06

Level Up Your JS: Object Literal Enhancements That Will Change Your Code

对象字面量是 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(5, 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 文档：扩展语法 (...)