5.2 计算属性名与 Symbol 作为键

5.2 计算属性名与 Symbol 作为键

ES6 引入了计算属性名和 Symbol 类型，使得对象属性的定义更加灵活和强大。计算属性名允许使用表达式作为属性名，而 Symbol 则提供了一种创建唯一键的方式。本节将详细介绍这两种特性及其用法。

5.2.1 计算属性名

计算属性名允许在对象字面量中使用表达式作为属性名，属性名需要用方括号 [] 包裹。

1. 基本语法

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

2. 动态属性名

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

3. 结合表达式

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

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

5.2.2 Symbol 作为键

Symbol 是 ES6 引入的一种原始数据类型，表示唯一的标识符。Symbol 可以作为对象的键，确保属性名的唯一性。

1. 创建 Symbol

const sym1 = Symbol("description");
const sym2 = Symbol("description");
console.log(sym1 === sym2); // 输出 false

2. 使用 Symbol 作为键

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

3. 遍历 Symbol 键
Symbol 键不会被 for...in 或 Object.keys() 遍历，但可以通过 Object.getOwnPropertySymbols() 获取：

const id = Symbol("id");
const person = {
  [id]: 123,
  name: "Alice",
};

for (let key in person) {
  console.log(key); // 输出 "name"
}

const symbols = Object.getOwnPropertySymbols(person);
console.log(symbols); // 输出 [Symbol(id)]

5.2.3 计算属性名与 Symbol 的结合

计算属性名和 Symbol 可以结合使用，动态创建唯一的属性键。

1. 示例

const createUniqueKey = (description) => Symbol(description);

const idKey = createUniqueKey("id");
const nameKey = createUniqueKey("name");

const person = {
  [idKey]: 123,
  [nameKey]: "Alice",
};

console.log(person[idKey]); // 输出 123
console.log(person[nameKey]); // 输出 "Alice"

5.2.4 应用场景

1. 计算属性名的应用场景

• 动态生成属性名。
• 避免属性名冲突。

2. Symbol 作为键的应用场景

• 创建唯一的属性键，避免命名冲突。
• 定义对象的私有属性（通过 Symbol 键不会被常规方法遍历）。

5.2.5 示例代码

示例 1：计算属性名

const keys = ["name", "age", "job"];
const values = ["Alice", 25, "Engineer"];

const person = keys.reduce((obj, key, index) => {
  obj[key] = values[index];
  return obj;
}, {});

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

示例 2：Symbol 作为键

const id = Symbol("id");
const person = {
  [id]: 123,
  name: "Alice",
};

console.log(person[id]); // 输出 123
console.log(person.name); // 输出 "Alice"

示例 3：结合计算属性名与 Symbol

const createUniqueKey = (description) => Symbol(description);

const idKey = createUniqueKey("id");
const nameKey = createUniqueKey("name");

const person = {
  [idKey]: 123,
  [nameKey]: "Alice",
};

console.log(person[idKey]); // 输出 123
console.log(person[nameKey]); // 输出 "Alice"

5.2.6 总结

• 计算属性名：允许使用表达式作为属性名，适用于动态生成属性名。
• Symbol 作为键：提供了一种创建唯一键的方式，避免命名冲突。
• 结合使用：计算属性名和 Symbol 可以结合使用，动态创建唯一的属性键。

通过掌握计算属性名和 Symbol 作为键的用法，你可以编写更灵活、更安全的代码。在接下来的学习中，我们将继续探索 JavaScript 的其他高级特性。

思考题：

1. 计算属性名的主要用途是什么？
2. Symbol 作为键的优势是什么？
3. 如何遍历对象的 Symbol 键？