ES6 允许在对象字面量中直接用方括号 [] 包裹表达式来生成属性名，无需先创建空对象再赋值——这是最简洁、最常用的动态属性名写法。
基础写法：变量或字符串拼接作属性名
只要把表达式放进 [ ] 里，它就会在对象定义时求值，并作为属性键使用：
-
变量名直接使用：
const key = 'title'; const obj = { [key]: '首页' };→{ title: '首页' } -
字符串拼接构造键：
const prefix = 'user_'; const obj = { [prefix + 'id']: 1001, [prefix + 'role']: 'admin' };→{ user_id: 1001, user_role: 'admin' } -
函数调用返回键名：
const getProp = () => 'data-time'; const obj = { [getProp()]: Date.now() };
进阶用法：动态方法名也支持
方法名同样可用表达式，语法一致，只是后面跟的是函数体：
-
const action = 'fetch'; const api = { ['on' + action.charAt(0).toUpperCase() + action.slice(1)]() { return 'done'; } };
→api.onFetch()可调用 const verb = 'save'; const handler = { [`do${verb}`]() { console.log('saved'); } };
关键注意事项
这些细节不处理好，容易引发静默错误或覆盖问题：
-
对象/数组/undefined/null 会自动转成字符串：
{ [{}]: 'a', [null]: 'b' }实际是{ '[object Object]': 'b' }（后者覆盖前者） -
数字自动转字符串：
{ [42]: 'answer' }等价于{ '42': 'answer' } -
不能和属性简写混用：
const k = 'name'; { [k] }报错；必须写全{ [k]: value } -
Symbol 类型可作键，但不会被 for...in 遍历，需用
Object.getOwnPropertySymbols()获取
对比 ES5：为什么推荐 ES6 写法
ES5 中只能分两步：先声明空对象，再用方括号赋值；ES6 把逻辑收敛到一行，语义更清晰，也避免中间状态：
- ES5：
var obj = {}; obj[key] = value; - ES6：
const obj = { [key]: value };（一步到位，可读性强，适合配置对象、映射表等场景）
