如何在 JavaScript 中动态使用对象属性值作为新对象的键-js教程-PHP中文网

如何在 JavaScript 中动态使用对象属性值作为新对象的键

本文介绍了在 JavaScript 中如何将一个对象的属性值（如 element.name）作为另一个对象的键名，核心方法是使用 ES6 的计算属性名语法 [key]，配合方括号实现动态键名赋值。

本文介绍了在 javascript 中如何将一个对象的属性值（如 `element.name`）作为另一个对象的键名，核心方法是使用 es6 的计算属性名语法 `[key]`，配合方括号实现动态键名赋值。

在 JavaScript 中，对象字面量的键名默认是静态字符串，无法直接使用变量或表达式（如 element.name）作为键。若尝试写成 const data = { element.name: element.value }，JavaScript 会将 element.name 视为字面键名（即字符串 "element.name"），而非其实际值 "first_name"，因此无法达到预期效果。

正确做法是使用 ES6 计算属性名（Computed Property Names）：在对象字面量中用方括号 [] 包裹表达式，该表达式会在运行时求值，并将其结果作为属性键名。

以下是一个完整示例：

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

// ✅ 正确：使用计算属性名
const data = {
    [element.name]: element.value,
};

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

你还可以在更复杂的场景中组合使用，例如：

JavaStoryDevelop

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

下载

const prefix = 'user';
const element = { name: 'email', value: 'joe@example.com' };

const data = {
    [`${prefix}_${element.name}`]: element.value,
    id: 123,
};

console.log(data); // { user_email: 'joe@example.com', id: 123 }

⚠️ 注意事项：

计算属性名中的表达式必须返回字符串、Symbol 或能被隐式转换为字符串的值（如数字）；若返回 undefined 或 null，会转为 "undefined" 或 "null" 字符串，可能引发意外行为；
不支持在对象解构或 Object.keys() 等静态分析场景中“预测”计算键名——它们仅在运行时生效；
若需批量构建对象（如从数组映射），可结合 reduce() 或 Object.fromEntries() 进一步封装：

const elements = [
    { name: 'first_name', value: 'Joe' },
    { name: 'last_name',  value: 'Blow' },
    { name: 'age',        value: 35 },
];

const data = Object.fromEntries(
    elements.map(el => [el.name, el.value])
);
// → { first_name: 'Joe', last_name: 'Blow', age: 35 }

掌握计算属性名是编写灵活、可配置对象结构的关键技能，广泛应用于表单数据收集、API 请求参数构造、状态管理等实际开发场景。