ES6计算属性名允许用变量、表达式或模板字符串动态生成对象键名，需用方括号包裹，如[key]；不支持与简洁属性语法混用，常用于配置映射、API适配等场景。
ES6 计算属性名允许你在对象字面量中直接用变量、表达式甚至模板字符串生成键名，不用先创建空对象再赋值。
基本写法：用方括号包裹变量
变量名必须放在 [] 里，JavaScript 会自动将其转为字符串作为属性名：
-
const key = 'userName'; const obj = { [key]: 'Alice' };→ 得到{ userName: 'Alice' } - 如果变量是
null或undefined，会被转成字符串"null"或"undefined"，容易引发意外，建议提前校验
支持任意表达式，不只是变量
方括号内可以是拼接、函数调用、模板字符串等可计算出字符串的表达式：
-
const prefix = 'user_'; const obj = { [prefix + 'id']: 1001 };→{ user_id: 1001 } -
const suffix = 'Name'; const obj = { ['first' + suffix]: 'John', ['last' + suffix]: 'Doe' };→{ firstName: 'John', lastName: 'Doe' } -
const id = 2; const obj = { [`item${id}`]: 'Banana' };→{ item2: 'Banana' }
注意不能和简洁属性语法混用
像 { key } 这种简写（自动把变量名当键）和计算属性名 { [key]: value } 是两套机制，不能合并写：
- ✅ 正确：
const name = 'title'; const obj = { [name]: 'ES6' }; - ❌ 错误：
const name = 'title'; const obj = { [name] };（语法报错，缺少冒号和值） - ⚠️ 混淆点：
{ name }是“属性简写”，它等价于{ name: name }；而{ [name] }不合法，必须写成{ [name]: value }
常见用途场景
适合配置驱动、表单字段映射、API 响应适配等需要动态构造键名的地方：
- 统一加前缀：
const fields = { email: 'a@b.com', phone: '123' }; const mapped = { [`api_${k}`]: v for (let [k, v] of Object.entries(fields)) };（需配合循环） - 与方法结合：
const method = 'fetch'; const api = { [`handle${method.charAt(0).toUpperCase() + method.slice(1)}`]() { return 'done'; } };→api.handleFetch() - 避免硬编码键名，提升可维护性，比如将后端返回字段
user_name映射为前端用的userName
