JavaScript中访问对象属性的点符号与方括号符号有何差异

核心差异 #

点操作符后接的属性名会被JS直接识别为固定的字符串字面量，不会解析为变量取值；方括号操作符内的内容会先执行计算，将最终的计算结果作为属性名访问。

针对示例代码的解释 #

你给出的代码中，update函数的两行赋值逻辑分别对应两种完全不同的行为：

1. record.prop = "cannot"：不管prop参数传的是什么值，这行代码始终会给record对象新增/修改一个键名为prop的属性，所以运行结果里才会出现"prop": "cannot"这一项。
2. record[prop] = "woof"：方括号会先取出prop形参的实际传入值"anotherbark"，再给record对象新增/修改键名为"anotherbark"的属性，对应结果里的"anotherbark": "woof"。

两种写法的等价场景 #

你提到“二者在函数外使用时输出结果一致”，是因为你在外部直接写固定属性名时，方括号里传的是字符串字面量，这时候和点写法效果完全等价：

// 以下两种写法作用完全一致
ourDog.bark = "bow-wow";
ourDog["bark"] = "bow-wow";

适用场景区分 #

• 当要访问的属性名是固定已知的常量时，优先用点写法，代码更简洁易读
• 遇到以下场景必须使用方括号写法：
  • 属性名存储在变量中
  • 属性名包含空格、中文、特殊符号，或是数字开头
  • 属性名需要动态计算得到

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