本文介绍如何利用 ES6 计算属性名（Computed Property Names）语法，将一个对象的属性值（如 element.name）作为另一个对象的动态键名，实现灵活、可维护的键值对构建。
本文介绍如何利用 es6 计算属性名（computed property names）语法，将一个对象的属性值（如 `element.name`）作为另一个对象的动态键名，实现灵活、可维护的键值对构建。
在 JavaScript 中，对象字面量默认只支持静态键名（如 name: 'John'），无法直接将变量或表达式用作键名。例如，以下写法是非法的，会导致语法错误：
const element = {
name: 'first_name',
value: 'Joe Blow',
};
// ❌ 错误：element.name 被当作字面字符串处理，而非变量
const data = {
element.name: element.value, // 实际创建的是键名为 "element.name" 的属性
};
console.log(data); // { 'element.name': 'Joe Blow' }正确的方式是使用 ES6 引入的计算属性名语法：将表达式包裹在方括号 [ ] 中，置于对象字面量的键位置。JavaScript 会在运行时求值该表达式，并将其结果作为属性键名：
const element = {
name: 'first_name',
value: 'Joe Blow',
};
// ✅ 正确：[element.name] 是计算属性名
const data = {
[element.name]: element.value,
};
console.log(data); // { first_name: 'Joe Blow' }
console.log(data.first_name); // 'Joe Blow'
console.log(data['first_name']); // 'Joe Blow'该语法不仅支持简单变量，还可用于任意表达式，例如：
JavaStoryDevelop
下载
你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。 它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在
const prefix = 'user';
const id = 123;
const userObj = {
[`${prefix}_id`]: id,
[`is${capitalize('active')}`]: true,
['data-' + Date.now()]: 'snapshot',
};
function capitalize(str) {
return str.charAt(0).toUpperCase() + str.slice(1);
}
console.log(userObj);
// { 'user_id': 123, 'isActive': true, 'data-1718234567890': 'snapshot' }⚠️ 注意事项：
立即学习“Java免费学习笔记（深入）”；
- 计算属性名中的表达式必须返回字符串、数字或 Symbol 类型；若返回
undefined或null，会被自动转为字符串（如[null]→'null'），易引发隐式错误； - 若需批量构建对象（如从数组映射），可结合
Object.fromEntries()与map()使用：const elements = [ { name: 'email', value: 'joe@example.com' }, { name: 'age', value: 32 }, ]; const data = Object.fromEntries( elements.map(el => [el.name, el.value]) ); // { email: 'joe@example.com', age: 32 }
✅ 总结：动态键名是现代 JavaScript 开发中的高频需求，掌握 [expression] 这一计算属性语法，能显著提升对象构造的灵活性与代码可读性，避免冗余的 obj[key] = value 赋值语句，让逻辑更声明式、更健壮。
