javascript中可用方括号语法动态设置对象属性名:创建后用obj[variable]=value赋值,或es6中在字面量内用[variable]:value定义计算属性名;注意变量值会转为字符串,null/undefined易致意外属性。

在 JavaScript 中,可以通过方括号语法([])为对象动态设置属性名,从而实现用变量作为属性名来初始化对象属性。
使用方括号语法设置动态属性名
对象字面量中不能直接写变量名作为键,但可以在创建后或创建时用方括号动态赋值:
- 创建空对象后,用
obj[variable] = value赋值 - 在对象字面量中结合计算属性名(ES6+),即用
[variable]: value的形式
计算属性名:在对象字面量中直接使用变量名
ES6 引入了“计算属性名”语法,允许在对象定义时用方括号包裹表达式作为属性名:
示例:const key = 'userName';
const value = 'Alice';
const user = {
[key]: value, // 动态生成属性 userName: 'Alice'
age: 25
};
console.log(user); // { userName: 'Alice', age: 25 }
运行时动态添加多个属性
若需批量用变量初始化多个属性,可结合 Object.assign() 或循环赋值:
- 用
Object.assign({}, ...)合并多个带计算属性的对象 - 或先建空对象,再遍历键值对,用
obj[key] = val设置
const props = { name: 'Bob', role: 'admin' };
const dynamicKeys = Object.keys(props);
const obj = {};
dynamicKeys.forEach(key => {
const dynamicKey = `data_${key}`; // 构造新属性名
obj[dynamicKey] = props[key];
});
console.log(obj); // { data_name: 'Bob', data_role: 'admin' }
注意点与常见陷阱
动态属性名本质是字符串,所以需确保变量值为有效、非空的字符串:
-
null、undefined会被转成字符串"null"、"undefined",容易引发意外属性 - 数字会自动转字符串(如
[42]: 'value'→ 属性名为"42") - Symbol 类型也可作为属性名,但需显式使用
Symbol()变量,且不会被for...in遍历
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











