JavaScript中调用对象属性时如何用变量替代静态键名

错误原因说明 #

你提供的示例代码中使用obj.x赋值时，点运算符会将后方的x识别为固定的属性名字面量，而非你提前定义的变量x，因此最终会在obj上新增一个名为x的属性，而非修改car属性的值，无法实现动态调用的需求。

正确实现方案 #

使用方括号语法包裹变量即可，方括号内的内容会先执行计算，将返回值作为属性名访问对象：

const obj = { car : "a" , bus: "b" };
const x = "car" ;
// 方括号内直接传入变量，不需要加引号
obj[x] = "some value"
console.log(obj.car) // 输出结果为 "some value"

提示：如果此前使用方括号语法未生效，可检查是否误给变量加了引号，比如obj["x"]会直接识别为访问名为x的属性，不会解析变量x，去掉引号直接传入变量名即可。

两种属性访问方式的区别 #

• 点语法：仅支持访问固定字面量的属性名，属性名需要符合JS标识符命名规范，无法动态传入变量或表达式
• 方括号语法：支持传入变量、表达式、特殊字符/数字开头的属性名，方括号内的内容会先计算结果，再作为属性名使用

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