javascript中可用计算属性名在对象字面量中动态设置键名,语法为[expression],支持字符串拼接、函数调用等,适用于配置映射、api响应处理等场景,但不适用于解构赋值左侧。

JavaScript中可以用计算属性名(Computed Property Names)在对象字面量中动态设置键名,语法是在方括号 [] 内写表达式,该表达式会在对象创建时求值并作为键名使用。
基本语法和写法
在对象字面量中,用 [expression] 替代静态键名即可:
-
const key = 'name'; const obj = {[key]: 'Alice'};→{name: 'Alice'} - 支持任意表达式,如字符串拼接、函数调用、模板字符串:
{[`user_${id}`]: data} - 可与普通键、展开运算符、方法简写等共存,顺序无限制
常见使用场景
计算属性名特别适合需要运行时决定键名的场合:
-
配置映射:根据环境或类型生成不同字段名,比如
{[`${prefix}Enabled`]: true} -
API响应处理:把后端返回的动态字段名(如带版本号的字段
status_v2)直接映射到对象中 -
表单数据组装:将多个输入框的
name属性值作为键,值为用户输入:{[input.name]: input.value}
注意事项和限制
虽然灵活,但需注意几点:
- 计算属性名只在对象字面量中生效,
obj[key] = value是赋值操作,不属于“计算属性名”语法 - 表达式必须返回字符串、Symbol 或数字;其他类型会隐式转为字符串(如
{[null]: 1}得到{'null': 1}) - 不能用于对象解构赋值左侧(即
const {[key]: val} = obj是语法错误) - 类中的方法/访问器不支持计算名(ES2022 起支持类中计算属性名,但需注意兼容性)
与 Object.defineProperty 对比
计算属性名适用于对象初始化阶段;若需在已有对象上动态添加带特殊描述符(如不可枚举、只读)的属性,仍需用 Object.defineProperty(obj, key, descriptor)。
两者定位不同:前者是声明式、简洁的键名构造;后者是命令式、精细的属性控制。
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











