动态设置对象属性名的常见场景
在实际开发中，我们经常会遇到属性名无法提前确定的情况，比如从接口返回的动态字段名、根据用户操作生成的属性标识等，这时候就需要动态设置对象的属性名。比如我们需要根据用户输入的字段名来给对象添加对应的属性，或者根据循环中的索引来生成不同的属性名。
基础方法：方括号语法
JavaScript中对象属性的访问除了点语法之外，还支持方括号语法，方括号内部可以放变量或者表达式，这就是动态设置属性名最基础的方式。点语法后面只能跟固定的属性名字符串，无法使用变量，所以动态设置属性时必须使用方括号语法。
下面是方括号语法动态设置属性的示例：
// 定义基础对象
const user = {};
// 动态属性名变量
const propName = 'age';
// 使用方括号动态设置属性
user[propName] = 25;
console.log(user.age); // 输出 25
console.log(user[propName]); // 输出 25
// 方括号内也可以是表达式
const index = 1;
user[`score_${index}`] = 90;
console.log(user.score_1); // 输出 90
方括号语法的注意事项
- 方括号内的变量如果是数字，会被自动转换为字符串，所以
user[1]和user['1']是等价的 - 如果方括号内是表达式，会先计算表达式的结果，再将结果作为属性名
- 如果属性名包含特殊字符或者是保留字，也必须使用方括号语法设置，比如
user['first-name'] = '张三'
ES6新增：对象字面量中的计算属性名
在ES6之前，如果要在对象字面量中定义动态属性名，只能先创建对象再使用方括号添加属性，ES6新增了计算属性名语法，允许在对象字面量定义时直接使用方括号包裹变量或表达式作为属性名，让代码更简洁。
计算属性名的使用示例如下：
const key = 'address';
const value = '北京市朝阳区';
// 对象字面量中直接使用计算属性名
const person = {
name: '李四',
[key]: value, // 等价于 address: '北京市朝阳区'
[`${key}_detail`]: '具体街道信息' // 表达式作为属性名
};
console.log(person.address); // 输出 北京市朝阳区
console.log(person.address_detail); // 输出 具体街道信息
计算属性名的使用限制
- 计算属性名的方括号内部只能是表达式，不能是语句，比如不能写
if判断 - 计算属性名可以和普通固定属性名混合使用，没有顺序限制
- 如果计算属性名的结果是
undefined或者null，会被转换为字符串'undefined'或者'null'作为属性名
常见误区和避坑技巧
误区1：使用点语法拼接变量
很多新手会尝试用点语法拼接变量来设置属性，比如user.propName = 25，这种写法实际是给对象添加了名为propName的固定属性，而不是变量propName对应的值作为属性名，这是最常见的错误。
误区2：动态属性名重复覆盖
如果动态设置的属性名已经存在，那么新的属性值会覆盖原有的值，所以在设置前如果需要保留原有值，可以先判断属性是否存在。
const obj = { a: 1 };
const key = 'a';
// 覆盖原有属性
obj[key] = 2;
console.log(obj.a); // 输出 2
// 避免覆盖的判断逻辑
if (!obj.hasOwnProperty(key)) {
obj[key] = 3;
}
console.log(obj.a); // 仍然输出 2
技巧：动态设置多个属性
如果需要动态设置多个属性，可以结合Object.assign或者循环来实现，比如从接口返回的动态键值对对象，可以直接合并到目标对象中。
const target = { name: '测试' };
// 动态键值对对象
const dynamicProps = {
age: 20,
gender: '男'
};
// 合并动态属性到目标对象
Object.assign(target, dynamicProps);
console.log(target); // 输出 { name: '测试', age: 20, gender: '男' }
// 循环设置动态属性
const keys = ['a', 'b', 'c'];
const values = [1, 2, 3];
const result = {};
keys.forEach((key, index) => {
result[key] = values[index];
});
console.log(result); // 输出 { a: 1, b: 2, c: 3 }
不同场景的选择建议
如果是已经创建好的对象，需要动态添加属性，优先使用方括号语法；如果是在定义对象字面量时就需要动态属性名，优先使用ES6的计算属性名语法，代码可读性更高。对于需要兼容ES5及以下环境的项目，只能使用方括号语法，因为计算属性名是ES6新增的特性。
JavaScript动态设置对象属性对象属性名computed_property_names修改时间：2026-07-09 06:39:32