【Javascript】属性访问方法的区别（a.b和a[b]）

JavaScript 中属性访问的两种主要方法是 点符号（.） 和 方括号符号（[]），两者在语法、灵活性、应用场景等方面存在显著差异。以下是具体区别和适用场景的总结：

---

一、语法差异

1. 点符号（.）

   • 语法：object.propertyName

   • 要求属性名必须是合法的 JavaScript 标识符（如字母、数字、下划线，且不能以数字开头）。

   • 示例：

     const hero = { name: "Batman" };
     console.log(hero.name);  // "Batman"
     

2. 方括号符号（[]）

   • 语法：object[expression]

   • 属性名可以是字符串、变量或表达式，支持动态属性名和特殊字符。

   • 示例：

     const key = "name";
     console.log(hero[key]);  // "Batman"
     console.log(hero["prop-3"]);  // 访问特殊字符属性 
     

---

二、灵活性与动态性

点符号	方括号符号
静态属性名（硬编码）	动态属性名（运行时决定）
无法处理包含空格、连字符等特殊字符的属性名	支持任意字符串作为属性名，包括特殊字符（如 "data-value"）
无法直接使用变量或表达式	可通过变量或表达式动态计算属性名

示例对比：

// 点符号限制 
const obj = { "data-age": 30 };
// obj.data-age;  // 报错：无法识别连字符 
 
// 方括号符号解决 
console.log(obj["data-age"]);  // 30 

---

三、性能与代码风格

1. 性能差异
   • 点符号的性能略优于方括号符号，因为后者需要额外解析字符串或表达式67。但在大多数场景下，差异可忽略不计。
2. 代码可读性
   • 点符号更简洁直观，适合静态属性名；方括号适合动态场景或特殊需求。

---

四、适用场景总结

场景	推荐方法	示例
已知且合法的属性名	点符号（.）	user.age
动态属性名或变量	方括号（[]）	user[key]（key 是变量）
特殊字符属性名	方括号（[]）	obj["data-id"]
属性名是保留字或关键字	方括号（[]）	obj["class"]

---

五、其他相关方法

除了直接访问属性，还可通过以下方法操作属性：

1. Object.keys(obj) ：获取对象所有自有属性名（数组）。
2. Object.values(obj) ：获取对象所有属性值（数组）。
3. in 操作符：检查属性是否存在（包括原型链）。
4. hasOwnProperty()：检查是否为对象自身属性28。

---

总结

• 优先使用点符号：静态属性名且符合标识符规则时，点符号更简洁高效。
• 选择方括号符号：需处理动态属性名、特殊字符或保留字时。
• 结合其他方法（如 Object.keys() ）可更灵活地操作对象属性。

具体选择需根据实际场景权衡可读性和灵活性。