本文介绍如何利用 ES6 的计算属性语法，将一个对象的属性值（如 element.name）作为另一个对象的动态键名，从而灵活构建键值对。

本文介绍如何利用 es6 的计算属性语法，将一个对象的属性值（如 `element.name`）作为另一个对象的动态键名，从而灵活构建键值对。

在 JavaScript 中，若想用变量或表达式的值作为对象字面量的属性名，不能直接写 obj.varName: value——这种写法会将 varName 视为字面量字符串键，而非其值。正确方式是使用 ES6 引入的计算属性名（Computed Property Names），即用方括号 [] 包裹表达式。

例如，给定源对象：

const element = {
    name: 'first_name',
    value: 'Joe Blow',
};

要以 element.name 的值 'first_name' 为键、element.value 的值 'Joe Blow' 为值创建新对象，应这样书写：

const data = {
    [element.name]: element.value,
};

console.log(data); // { first_name: 'Joe Blow' }
console.log(data.first_name); // 'Joe Blow'

✅ 关键点：[element.name] 是一个计算属性，JavaScript 会在对象初始化时求值并将其结果（字符串 'first_name'）用作属性名。

JavaStoryDevelop

你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。 它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在

下载

⚠️ 注意事项：

• 计算属性仅在对象字面量中生效（即 { [expr]: value }），不适用于点号访问（如 obj.element.name）或传统赋值（如 obj.element.name = value）；
• 表达式可以是任意合法 JS 表达式，例如：[${prefix}_${suffix}]: value、[Object.keys(obj)[0]]: val；
• 若 element.name 为 undefined 或 null，计算后键名为 "undefined" 或 "null" 字符串，需提前校验；
• 动态键也支持在 Object.defineProperty() 或 Reflect.set() 中实现，但计算属性是最简洁、声明式的方案。

? 扩展示例：批量转换数组为键值对对象

const elements = [
    { name: 'email', value: 'joe@example.com' },
    { name: 'age', value: 32 },
    { name: 'active', value: true },
];

const userData = Object.fromEntries(
    elements.map(el => [el.name, el.value])
);
// 或使用计算属性逐个合并（适合复杂逻辑）
const result = elements.reduce((acc, el) => ({
    ...acc,
    [el.name]: el.value,
}), {});

console.log(userData); // { email: 'joe@example.com', age: 32, active: true }

掌握计算属性是编写可维护、数据驱动型 JavaScript 对象操作的关键基础。

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南