计算属性名是es6特性，允许对象字面量中用方括号包裹表达式动态生成键名，如[key]、[prefix+'age']、[is${'active'.touppercase()}]，支持变量、字符串拼接、函数调用等，仅用于对象初始化，不可用于已存在对象赋值。

计算属性名（Computed Property Names）是 ES6 引入的语法特性，允许你在对象字面量中用方括号 [] 包裹表达式，让键名在运行时动态生成。它不是字符串拼接，而是真正参与对象定义的求值过程。

基本写法：用变量或表达式生成键名

最常见场景是把变量值作为对象的属性名：

• 变量名直接放在方括号内，如 [key]，JS 会先计算 key 的值，再用结果作为键名
• 支持任意表达式，比如字符串拼接、函数调用、模板字符串等

示例：

const key = 'userName';
const prefix = 'user';

const obj = {
  [key]: 'Alice',
  [prefix + 'Age']: 30,
  [`is${'Active'.toUpperCase()}`]: true
};

// 结果：{ userName: 'Alice', userAge: 30, isActive: true }

配合解构或 Object.assign 动态赋值

计算属性名常用于构建配置对象、API 请求参数或状态字段，尤其适合和解构、扩展运算符组合使用：

• 避免硬编码键名，提升可维护性
• 在循环或映射中批量生成带前缀/后缀的字段更清晰

示例（动态设置用户字段）：

function createUserField(fieldName, value) {
  return { [fieldName]: value };
}

const user = {
  ...createUserField('email', 'a@b.com'),
  ...createUserField('role', 'admin')
};
// { email: 'a@b.com', role: 'admin' }

与 Symbol 或动态函数名结合使用

计算属性名也支持 Symbol 作为键，或配合方法定义实现动态方法名：

• [Symbol('id')]: 123 创建唯一私有键
• [`handle${event}`]: function(){...} 批量注册事件处理器

示例（动态事件处理器）：

const event = 'Click';
const handlers = {
  [`on${event}`]() {
    console.log('触发点击');
  }
};

handlers.onClick(); // 输出：触发点击

注意事项：不能省略方括号，且只在对象字面量中有效

计算属性名仅在对象初始化时起作用，不适用于已存在对象的属性赋值（此时要用中括号赋值语法）：

• ✅ 正确：const obj = { [key]: value };
• ❌ 错误：obj.[key] = value;（语法错误）
• ✅ 替代写法：obj[key] = value;（这是属性访问语法，非计算属性名）

另外，若表达式结果为 undefined 或 null，会被自动转为字符串 "undefined" 或 "null"，需提前校验。