引用和未引用的JavaScript对象属性之间的区别

在JavaScript中，引用和未引用的对象属性（通常称为"点表示法"和"方括号表示法"）在功能上等价，但存在以下关键区别：

1. 基础概念

• 点表示法（未引用）：obj.property
• 方括号表示法（引用）：obj["property"]

两者均可访问/修改对象属性，但方括号表示法允许动态属性名和非常规标识符。

2. 核心区别

| 对比项 | 点表示法 (obj.prop) | 方括号表示法 (obj["prop"]) | |------------------|------------------------------------------|----------------------------------------| | 属性名类型 | 必须是有效标识符（如字母、_、$开头） | 可以是任意字符串或表达式 | | 动态访问 | 不支持 | 支持动态计算属性名（如变量、表达式） | | 特殊字符 | 无法直接访问（如 obj.my-prop 会报错） | 支持（如 obj["my-prop"]） | | 性能 | 略快（引擎静态优化） | 略慢（需运行时解析） |

3. 应用场景

优先使用点表示法的情况

• 属性名是已知的合法标识符
• 代码可读性要求高（更简洁）

const user = { name: "Alice" };
console.log(user.name); // 推荐

必须使用方括号表示法的情况

1. 动态属性名
2. 动态属性名
3. 非常规属性名
4. 非常规属性名
5. 访问数组元素（数组本质是对象）
6. 访问数组元素（数组本质是对象）

4. 常见问题与解决

问题1：尝试用点表示法访问带空格的属性

const obj = { "user name": "Bob" };
console.log(obj.user name); // 语法错误

解决：必须使用方括号表示法

console.log(obj["user name"]); // 正确

问题2：混淆变量和字面量

const prop = "color";
const car = { color: "red" };

console.log(car[prop]);    // 正确："red"（访问变量prop的值）
console.log(car["prop"]);  // undefined（尝试访问字面量属性"prop"）

问题3：性能敏感场景

• 在循环或高频调用的代码中，优先使用点表示法（性能优化）。

5. 底层原理

• 点表示法在编译阶段会被转换为静态引用。
• 方括号表示法在运行时解析，可能触发额外的字符串计算和哈希查找。

总结建议

• 默认使用点表示法：提高可读性和性能。
• 必要时用方括号表示法：处理动态或特殊属性名时。
• 两种方式无功能差异，选择取决于具体场景需求。