JavaScript中的计算属性名

● 在JavaScript中，计算属性名（Computed Property Names）是指在对象字面量中使用表达式作为属性名。它允许我们在定义对象时动态地设置属性名。计算属性名是在ES6（ECMAScript 2015）中引入的功能。使用方括号（'[]'）包裹表达式，可以创建计算属性名。

• 下面是一个简单的例子：

const key = 'dynamicKey';
const obj = {
  [key]: 'This is a computed property name!'
};
console.log(obj.dynamicKey); // 输出 "This is a computed property name!"

在这个例子中，key 变量的值被用作属性名，并动态地添加到obj对象中。计算属性名可以用于更复杂的表达式，例如拼接字符串或执行计算等。

几个使用场景

1. 字符串拼接作为属性名：

const prefix = "user_";
const id = 42;

const user = {
  [prefix + id]: "John Doe"
};

console.log(user.user_42); // 输出 "John Doe"

2. 使用函数返回值作为属性名：

function createKey() {
  return "generatedKey";
}

const obj = {
  [createKey()]: "This is a generated property name!"
};

console.log(obj.generatedKey); // 输出 "This is a generated property name!"

3. 使用表达式计算属性名：

const obj = {
  ["value" + 2 * 3]: "Value with an expression as a key"
};

console.log(obj.value6); // 输出 "Value with an expression as a key"

4. 在类定义中使用计算方法名：

const methodName = "greet";

class Person {
  [methodName]() {
    return "Hello!";
  }
}

const person = new Person();
console.log(person.greet()); // 输出 "Hello!"