计算属性名允许用方括号内表达式动态生成对象键名，如[prefix + 'Id']；支持变量拼接、环境区分、数组映射，并可与展开运算符、解构等协同使用，但需注意undefined/null转字符串及TS类型约束。
JavaScript 中的计算属性名（Computed Property Names）让对象字面量能用表达式动态生成键名，这在需要根据变量、函数返回值或运行时条件设置对象键时非常实用。
基础语法：用方括号包裹表达式
在对象字面量中，把键名写在方括号 [] 内，JS 就会在创建对象时求值并用结果作为实际键名：
例如：
const prefix = 'user';
const id = 123;
const obj = {
[prefix + 'Id']: id, // 键名为 'userId'
[`data_${Date.now()}`]: 'temp' // 键名含时间戳，如 'data_1715624012345'
};
注意：方括号内必须是合法表达式，不能是纯字符串字面量（那样就失去“计算”意义了）。
立即学习“Java免费学习笔记（深入）”；
配合变量和常量灵活构造键名
常见于配置拼接、API 字段映射、表单字段动态绑定等场景：
- 用变量控制命名空间：const namespace = 'admin'; const config = { [`api.${namespace}.timeout`]: 5000 };
- 区分环境字段：const env = process.env.NODE_ENV; const settings = { [`baseUrl_${env}`]: 'https://dev.example.com' };
- 从数组批量生成键：['name', 'email', 'role'].reduce((acc, key) => ({ ...acc, [`${key}Required`]: true }), {});
与解构、Object.assign、展开运算符协同使用
计算属性名本身只影响对象字面量定义阶段，但它可自然融入现代 JS 对象操作流程：
- 添加新键到已有对象：const base = { id: 1 }; const extended = { ...base, [`timestamp_${Date.now()}`]: new Date() };
- 动态重命名解构赋值（需配合别名）：const key = 'userName'; const { [key]: name } = { userName: 'Alice' }; // name === 'Alice'
- 在 class 或函数返回对象中按需定制键：function makeField(key, value) { return { [key]: value, [`${key}Valid`]: true }; }
注意事项与常见陷阱
计算属性名虽灵活，但容易出错：
- 方括号内表达式若为 undefined 或 null，会被转成字符串 "undefined" 或 "null"，不是报错；
- 不支持在对象方法简写中直接用于方法名（{ [key]() {} } 是合法的，但 { [key]: () => {} } 才是常规写法）；
- JSON.stringify() 会正常序列化计算所得的键名，无需额外处理；
- TypeScript 中需确保表达式类型能被推导为 string | number | symbol，否则会报错。
