JavaScript中Dot Notation与Bracket Notation属性访问的性能及原理探究

底层原理 #

点符号（Dot Notation） #

点符号要求属性名是合法标识符——不能含空格、不能以数字开头、不能是JS关键字等。JS引擎解析时，会直接把.后的标识符当作属性名，去对象的属性列表中查找。因为属性名是固定的，引擎能在编译阶段提前做优化：比如利用对象的「形状（Shape）」机制缓存属性的内存偏移量，后续访问时直接通过偏移量读取，省去不少查找开销。

方括号符号（Bracket Notation） #

方括号内可以放任意表达式，引擎必须先计算出表达式的结果，拿到最终的属性名字符串后，再去对象中查找对应属性。这种动态计算的特性，让引擎无法在编译阶段提前确定属性名，自然没法做前置优化，只能在运行时一步步解析表达式、获取属性名、执行查找逻辑。

如果属性名是动态生成的（比如变量、字符串拼接结果），方括号是唯一可选的方式，这是它的专属场景，但也带来了额外的计算步骤。

性能表现 #

• 在访问固定属性的场景下，点符号性能略优——得益于编译阶段的提前优化，减少了运行时的查找步骤。不过现代JS引擎（如V8、SpiderMonkey）优化能力极强，这种性能差异在绝大多数业务场景里几乎感知不到，只有在极端高频循环或性能敏感的核心代码中，才可能体现出细微差距。
• 在访问动态属性的场景下，方括号是唯一可用的方式，此时不存在与点符号的性能对比，因为点符号无法完成这类操作。

代码示例 #

方括号符号用法 #

const a = { b: { c: 'Bracket Notation' } }
console.log(a['b']['c'])

点符号用法 #

const a = { b: { c: 'Dot Notation' } }
console.log(a.b.c)

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