计算属性名允许在对象字面量中用方括号包裹表达式动态生成属性名，表达式求值结果自动转为字符串作为键名，如[key]、[${prefix}Id]、[getKeyName()]等，不可加引号。
在对象字面量中，可以用方括号 [] 包裹表达式来动态生成属性名，这种写法叫“计算属性名”（Computed Property Names）。
语法格式：用方括号包裹表达式
在对象字面量的键位置，直接写 [表达式]，JavaScript 会在创建对象时求值该表达式，并将其结果作为属性名。
- 表达式可以是变量、字符串拼接、函数调用、模板字符串等
- 表达式结果会被自动转为字符串（遵循 ToString 抽象操作）
- 必须使用方括号，不能加引号（否则就变成字面量字符串键了）
常见使用场景和例子
1. 使用变量作为键名
const key = 'userName';
const obj = {
[key]: 'Alice',
age: 30
};
// 结果：{ userName: 'Alice', age: 30 }
2. 拼接字符串生成键名
const prefix = 'user';
const id = 123;
const obj = {
[`${prefix}Id`]: id,
[`is${prefix}Active`]: true
};
// 结果：{ userId: 123, isUserActive: true }
3. 调用函数获取键名
function getKeyName() {
return 'status';
}
const obj = {
[getKeyName()]: 'online',
name: 'Bob'
};
// 结果：{ status: 'online', name: 'Bob' }
注意事项
- 计算属性名不能出现在对象解构赋值的左侧（即不能用于解构时动态取值）
- 如果表达式结果为
undefined或null，会转成字符串"undefined"或"null"作为键名 - Symbol 也可以作为计算属性名，且不会被字符串化：
[Symbol('id')]: 42 - 与普通字面量键共存时，计算属性名需与其他键用逗号分隔，顺序不影响执行
对比：错误写法 vs 正确写法
❌ 错误：加了引号，变成固定字符串键
const key = 'name';
const obj = { ['key']: 'Alice' }; // 键名就是字符串 'key'，不是变量值
✅ 正确：不加引号，方括号内是表达式
const key = 'name';
const obj = { [key]: 'Alice' }; // 键名是 'name'
