5.1 对象字面量增强

5.1 对象字面量增强（属性简写、方法简写）

ES6 对对象字面量进行了增强，引入了属性简写和方法简写语法，使得对象定义更加简洁和直观。本节将详细介绍这些增强特性及其用法。

5.1.1 属性简写

当对象的属性名和变量名相同时，可以使用属性简写语法。

1. 传统写法

const name = "Alice";
const age = 25;

const person = {
  name: name,
  age: age,
};
console.log(person); // 输出 { name: "Alice", age: 25 }

2. 属性简写

const name = "Alice";
const age = 25;

const person = {
  name,
  age,
};
console.log(person); // 输出 { name: "Alice", age: 25 }

3. 应用场景

• 当属性名和变量名相同时，简化代码。
• 适用于从变量快速构建对象。

5.1.2 方法简写

在对象字面量中定义方法时，可以省略 function 关键字，直接使用简写语法。

1. 传统写法

const person = {
  name: "Alice",
  greet: function () {
    console.log(`Hello, ${this.name}!`);
  },
};
person.greet(); // 输出 "Hello, Alice!"

2. 方法简写

const person = {
  name: "Alice",
  greet() {
    console.log(`Hello, ${this.name}!`);
  },
};
person.greet(); // 输出 "Hello, Alice!"

3. 应用场景

• 简化对象方法的定义。
• 使代码更符合现代 JavaScript 风格。

5.1.3 计算属性名

ES6 允许使用表达式作为对象的属性名，属性名需要用方括号 [] 包裹。

1. 传统写法

const key = "name";
const person = {};
person[key] = "Alice";
console.log(person); // 输出 { name: "Alice" }

2. 计算属性名

const key = "name";
const person = {
  [key]: "Alice",
};
console.log(person); // 输出 { name: "Alice" }

3. 动态属性名

function createObject(key, value) {
  return {
    [key]: value,
  };
}
const obj = createObject("age", 25);
console.log(obj); // 输出 { age: 25 }

5.1.4 综合示例

示例 1：属性简写与方法简写

const name = "Alice";
const age = 25;

const person = {
  name,
  age,
  greet() {
    console.log(`Hello, ${this.name}!`);
  },
};
person.greet(); // 输出 "Hello, Alice!"
console.log(person); // 输出 { name: "Alice", age: 25, greet: [Function: greet] }

示例 2：计算属性名

const prefix = "user_";
const id = 123;

const user = {
  [prefix + "id"]: id,
  [prefix + "name"]: "Alice",
};
console.log(user); // 输出 { user_id: 123, user_name: "Alice" }

5.1.5 总结

• 属性简写：当属性名和变量名相同时，可以省略属性值。
• 方法简写：定义对象方法时，可以省略 function 关键字。
• 计算属性名：使用表达式作为属性名，属性名需要用方括号 [] 包裹。

通过掌握对象字面量的增强特性，你可以编写更简洁、更易读的代码。在接下来的学习中，我们将继续探索 JavaScript 的其他高级特性。

思考题：

1. 属性简写的适用场景是什么？
2. 方法简写与传统方法定义的区别是什么？
3. 计算属性名的主要用途是什么？