如何在JavaScript中使用变量的值作为对象的属性名？

解决方案 #

使用ES6的计算属性名语法，将需要作为属性名的变量、表达式包裹在方括号[]中，就能读取变量的值作为最终的属性名。

正确代码示例 #

var categoria = "Carros";
var obj       = {
    categorias: {}
};
obj.categorias = {...obj.categorias, [categoria]: {}}
console.log(obj.categorias)
// 输出结果：{ Carros: {} }

原写法问题说明 #

• 第一种写法中直接写categoria: {}属于对象字面量的常规键声明，JS会默认将键名视为固定字符串，不会读取对应变量的值
• 第二种写法直接在对象字面量中写${categoria}: {}不符合JS语法规范：模板字符串属于表达式，要作为属性名使用时同样需要包裹在方括号中，你的场景不需要额外拼接字符串，直接把变量放在方括号里即可。

如果有拼接属性名的需求，也可以结合模板字符串使用：

// 拼接属性名示例
obj.categorias = {...obj.categorias, [`prefix_${categoria}_suffix`]: {}}
// 最终生成的属性名为 prefix_Carros_suffix

内容的提问来源于stack exchange，提问作者Otavio Fagundes