JavaScript对象访问：点语法与方括号语法的使用差异疑问

核心结论 #

当你用变量存储属性名时，只能使用方括号语法，点语法无法实现这个需求。

为什么两种语法表现不同？ #

• 点语法：.后面必须跟字面量形式的属性名，JS会直接把.后的内容当作字符串来匹配对象的键。比如lookup.val实际是在查找lookup对象中名为"val"的属性，而不是变量val的值对应的属性。
• 方括号语法：[]内部可以放任意表达式，JS会先计算表达式的结果，再用这个结果作为属性名去查找。比如lookup[val]会先获取变量val的实际值（比如"alpha"），再去匹配lookup["alpha"]对应的属性值。

结合你的示例分析 #

示例1

const lookup = {
  alpha : 'Adams',
  bravo : 'Boston',
  charlie : 'Chicago',
  delta : 'Denver',
  echo : 'Easy',
  foxtrot : 'Frank'
}

result = lookup[val]; // 有效
// lookup.val 无效

lookup.val是在找lookup里键为"val"的属性，而你的对象里根本没有这个键，所以无法生效；lookup[val]则会解析变量val的值，再匹配对应的属性。

示例2

const testObj = {
  12: "Namath",
  16: "Montana",
  19: "Unitas"
};
const playerNumber = 16;  
const player = testObj[playerNumber]; // 有效
// testObj.playerNumber 无效

testObj.playerNumber是在找testObj里键为"playerNumber"的属性，显然对象里不存在这个键，所以返回undefined；而testObj[playerNumber]会先计算playerNumber的值为16，再去匹配testObj[16]（JS会自动把数字属性名转为字符串，等价于testObj["16"]），因此能正确获取到"Montana"。

额外补充 #

方括号语法还能处理点语法搞不定的特殊属性名：

• 带空格或特殊字符的属性：比如obj["my property"]，点语法obj.my property是语法错误
• 数字开头的属性：比如obj[123]，点语法obj.123会报错

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