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

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

本文介绍如何利用 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' }

⚠️ 注意事项：

计算属性名中的表达式必须返回字符串、数字或 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 赋值语句，让逻辑更声明式、更健壮。