JavaScript中变量结合点符号获取对象属性值失效原因解析

先看你给出的代码示例：

var obb = {name : "Charlie", Age : 28 , Location : "London" , Job : "Detective"} ;

var x = "name";
console.log(obb.name); // 输出 "Charlie"
console.log(obb.x);    // 点符号：返回 undefined
console.log(obb[x]);   // 方括号：返回正确值 "Charlie"

核心原因：两种语法的解析逻辑完全不同 #

• 点符号（.）：后面必须跟字面量形式的属性名，JS会直接把这个字面量当作属性名去对象里查找。比如obb.x会直接找对象中名为x的属性，而不会解析变量x的值。你的对象里没有x这个属性，所以返回undefined。
• 方括号（[]）：会先计算方括号内的表达式（这里就是变量x的值"name"），再用计算结果作为属性名去对象中查找，所以能正确匹配到name属性并返回对应值。

额外补充 #

• 点符号只能用于合法标识符属性名：属性名不能包含空格、不能以数字开头、不能是JS关键字等，比如obb["user age"]这种带空格的属性，只能用方括号访问。
• 当属性名需要动态生成（比如存在变量中、或通过表达式计算得到），必须使用方括号语法。

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