为什么JavaScript中函数参数作为键时dot notation访问对象属性不生效

你遇到的执行结果差异，本质是两种属性访问方式的底层解析规则不同导致的，具体原理如下：

1. 点表示法的解析规则 #

• 点符号后的内容会被JavaScript引擎直接视为固定的字面量属性名，不会做任何变量解析、表达式计算。
  你代码中写foods.scannedItem时，引擎会直接在foods对象中查找名为scannedItem的属性，而你的foods对象中没有这个key，所以最终返回undefined，完全不会读取scannedItem这个参数存储的实际值。

2. 方括号表示法的解析规则 #

• 方括号内部的内容会先做表达式计算，将计算结果转为字符串后，再作为属性名去对象中查找对应值。
  你代码中写foods[scannedItem]时，引擎会先解析scannedItem这个参数，拿到传入的实际值字符串"apples"，再去foods对象中查找apples属性，因此能正确返回25。

两种表示法的适用场景 #

• 点表示法仅适用于访问属性名固定、且符合JavaScript标识符命名规则的属性（属性名不能有空格、不能以数字开头、不能是JS关键字等），写法更简洁。
• 方括号表示法适用于以下场景：
  • 需要动态读取变量存储的属性名（也就是你当前的库存查询这类动态属性访问场景）
  • 属性名包含空格、特殊字符、以数字开头等不符合标识符规则的情况，比如foods["fresh apples"]
  • 属性名需要拼接生成的情况，比如foods["orange" + "s"]

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