现代 JavaScript 引擎已对点号（.）和方括号（[]）两种属性访问方式做了深度优化，二者在实际运行中性能几乎无差异；选择应基于语义需求——点号适用于静态、合法标识符属性名，方括号则专为动态、非法或运行时计算的键名设计。
现代 javascript 引擎已对点号（`.`）和方括号（`[]`）两种属性访问方式做了深度优化，二者在实际运行中性能几乎无差异；选择应基于语义需求——点号适用于静态、合法标识符属性名，方括号则专为动态、非法或运行时计算的键名设计。
在 JavaScript 中，访问对象属性主要有两种语法：点号表示法（dot notation）和方括号表示法（bracket notation）。表面上看，它们功能相似，但底层机制、适用场景及历史性能表现存在本质区别。
一、语法本质与运行时行为
点号访问（如 obj.prop）要求属性名是合法的标识符（identifier），即必须符合变量命名规则：以字母、$ 或 _ 开头，后续可跟字母、数字、$、_。它在语法解析阶段即可确定访问路径，属于静态属性访问。
方括号访问（如 obj['prop'] 或 obj[computedKey]）将属性名视为表达式求值结果，支持任意字符串（包括含空格、短横线、数字开头等非法标识符），也支持变量、函数调用甚至模板字符串。它是动态属性访问的核心机制。
const user = {
'full-name': 'Alice Smith',
'1st-login': true,
age: 30
};
console.log(user.age); // ✅ 合法：点号访问静态属性
console.log(user['full-name']); // ✅ 必须用方括号（含连字符）
console.log(user['1st-login']); // ✅ 必须用方括号（数字开头）
console.log(user[Object.keys(user)[0]]); // ✅ 动态计算键名 —— 点号无法实现二、性能：历史差异已基本消失
早期（如 IE8–V8 4.x 时代），点号因无需字符串解析与哈希查找，在某些基准测试中略快于方括号（约 5–10%）。其优势源于：
立即学习“Java免费学习笔记（深入）”；
- 点号可被 JIT 编译器直接内联为固定内存偏移访问；
- 方括号需执行字符串求值 → 哈希计算 → 属性表查找三步流程。
但自 ES2015 后，主流引擎（V8、SpiderMonkey、JavaScriptCore）均引入了属性键缓存（property key cache） 和隐藏类（hidden class）快速路径优化。当方括号中使用字面量字符串（如 obj['name']）时，引擎会将其等价于点号处理；仅当涉及变量或复杂表达式（如 obj[key + suffix]）时，才触发完整动态查找。
✅ 实测验证（Chrome 128 / Node.js 22）：
const obj = { x: 42, y: 'hello' };
const key = 'x';
console.time('dot');
for (let i = 0; i < 1e7; i++) obj.x;
console.timeEnd('dot'); // ~12ms
console.time('bracket-literal');
for (let i = 0; i < 1e7; i++) obj['x'];
console.timeEnd('bracket-literal'); // ~12.2ms（误差范围内）
console.time('bracket-variable');
for (let i = 0; i < 1e7; i++) obj[key];
console.timeEnd('bracket-variable'); // ~18ms（因需变量查表）⚠️ 注意：性能差异仅在极端高频循环（千万级/秒）且键名非字面量时才可能显现，对业务代码完全无影响。盲目“优化”为点号而牺牲可读性或灵活性，是典型的过早优化。
三、工程实践建议
| 场景 | 推荐写法 | 原因 |
|---|---|---|
| 访问已知静态属性（如 user.name, config.timeout） | obj.prop | 语义清晰、编辑器友好、自动补全支持好 |
| 键名含特殊字符或空格（如 data['user-id']） | obj['key'] | 点号语法非法，别无选择 |
| 键名来自变量、API 响应或计算逻辑（如 fields[i], map.get(key)） | obj[key] | 唯一可行方案 |
| 构建通用工具函数（如 get(obj, 'a.b.c')） | 必须依赖方括号递归 | 点号无法动态解析嵌套路径 |
四、总结
- 性能不是决策依据：现代引擎下二者差距可忽略，不应作为选型标准；
- 语义决定语法：点号表达「确定的结构访问」，方括号表达「动态的键名解析」；
- 可维护性优先：清晰的意图比微秒级速度更重要——user.profile?.avatarUrl 比 user?.['profile']?.['avatarUrl'] 更易读，也更安全（结合可选链）；
- 警惕陷阱：obj['toString'] 不会调用原型方法（除非显式绑定），而 obj.toString() 会——这是行为差异，非性能问题。
最终，掌握二者原理是为了写出正确、清晰、可演进的代码，而非纠结于早已消弭的性能幻影。
