计算属性名是JavaScript中通过[expression]动态生成对象键名的官方机制，支持变量、字符串拼接、函数调用等表达式，结果转为字符串或Symbol，适用于表单映射、配置合并等运行时确定键名的场景。
在 JavaScript 对象字面量中，计算属性名（Computed Property Names）是让键名真正“动起来”的核心机制。它不是语法糖，而是解决动态键名问题的官方、简洁且可靠的方案。
基础写法：方括号包裹表达式
必须用 [expression] 形式，不能加引号，也不能省略方括号。引擎会在对象创建时立即求值表达式，并将结果转为字符串（或 Symbol）作为键名。
- 变量直接使用：
{ [key]: value }——key是已声明变量，值为"id"，结果就是{ id: value } - 拼接字符串：
{ [`user_${id}`]: data }—— 适合生成带前缀、ID 或时间戳的键，如user_123 - 函数调用：
{ [getPropName()]: "active" }—— 函数返回字符串即可，比如返回"status"，键就是status
组合使用：与简写语法共存
计算属性名可以和属性简写、方法简写同时出现在同一个对象字面量中，互不干扰，但需用逗号分隔。
- 变量 + 简写：
const name = "Tom"; const obj = { [name + "Age"]: 25, name };→{ TomAge: 25, name: "Tom" } - 动态键 + 方法简写：
{ [prefix + "Handler"]() { return "done"; }, init() { ... } } - 注意：不能在一个属性里混用，比如
{ [key]: value, name }是合法的，但{ [key]name: value }语法错误
避坑要点：常见误用与隐性风险
看似简单，但几个细节处理不好会引发静默错误或不符合预期的行为。
立即学习“Java免费学习笔记（深入）”；
-
undefined / null 会被转成字符串键：若
key是undefined，{ [key]: "x" }实际生成的是{ "undefined": "x" }，不是报错 -
不能用于解构左侧：你不能写
const { [dynamicKey]: val } = obj，这会语法报错；解构只支持静态键或 rest 模式 -
Symbol 键完全支持：如
{ [Symbol("id")]: 42 }是合法的，且该键不会被Object.keys()返回，适合私有属性场景 -
避免在字面量中调用可能抛错的函数：比如
{ [unsafeFn()]: "val" }，若unsafeFn报错，整个对象创建失败
适用场景：什么情况下必须用它？
不是所有动态需求都适合计算属性名——它专用于对象创建那一刻就确定键名的场景。
- 表单字段映射：根据 input 的
name属性动态生成提交数据对象 - 配置合并：把用户传入的 key 前缀注入到默认配置对象中
- API 响应适配：后端返回字段名含版本号或环境标识（如
v2_user_name），需按规则构造键 - 缓存键生成：
{ [`cache_${Date.now()}`]: data }，配合时间戳确保唯一性
不复杂但容易忽略。关键就一条：只要键名依赖运行时值，就得用 [ ] 包住那个值或表达式，别试图用模板字符串直接当键，也别指望变量名自动展开。
