面试题：JavaScript属性访问表达式的性能优化与底层机制

点号（.)
- 实现原理：在JavaScript引擎中，当使用点号访问对象属性时，引擎会直接在对象的属性列表中查找对应名称的属性。这是一种相对直接的查找方式，因为属性名是固定的标识符，引擎可以通过内部的数据结构快速定位。例如：
```
const obj = {name: 'John'};
console.log(obj.name);
```
- 适用场景：适用于属性名是确定的、符合标识符命名规则（不能以数字开头，不能包含特殊字符等）的情况。
方括号（[])
- 实现原理：方括号访问表达式更加灵活，它允许使用变量或表达式来指定属性名。当使用方括号时，JavaScript引擎首先计算方括号内的表达式的值，然后根据这个值在对象的属性列表中查找属性。例如：
```
const obj = {name: 'John'};
const propName = 'name';
console.log(obj[propName]);
```
- 适用场景：适用于属性名不确定，需要通过变量或表达式动态获取的情况，比如属性名可能是数字开头或者包含特殊字符等不符合标识符命名规则的情况。

减少不必要的动态访问：如果属性名是固定的，始终使用点号访问，因为它的查找效率更高。避免在不必要的情况下使用方括号，例如：
```
const obj = {age: 30};
// 不好的做法，不必要的动态访问
const prop = 'age';
console.log(obj[prop]);
// 好的做法，使用点号
console.log(obj.age);
```

缓存属性访问结果：如果在循环等频繁操作中需要多次访问同一个对象属性，可以先将属性值缓存起来。例如：

const obj = {data: [1, 2, 3, 4, 5]};
// 缓存属性值
const data = obj.data;
for (let i = 0; i < data.length; i++) {
    console.log(data[i]);
}

属性名固定且符合标识符规则：在高性能场景下，如果对象的属性名是固定且符合标识符规则的，应优先使用点号访问。例如在游戏开发中，一个表示游戏角色的对象，其属性如health、speed等固定属性，使用点号访问会更高效。
属性名动态变化：如果属性名需要动态变化，比如根据用户输入或者不同的业务逻辑来获取不同的属性，只能使用方括号访问。但要注意尽量减少动态计算的复杂性，例如提前计算好属性名变量的值，而不是在每次访问时都进行复杂的表达式计算。例如在一个多语言国际化的应用中，根据用户选择的语言动态获取对应的文本属性，此时使用方括号访问。
对象属性数量多且查找频繁：对于属性数量较多且查找频繁的对象，可以考虑使用Map数据结构替代普通对象。Map的查找性能在大数据量下表现更优，并且它的键可以是任何类型，类似于方括号访问对象属性的灵活性，但性能更好。例如：
```
const myMap = new Map();
myMap.set('name', 'John');
console.log(myMap.get('name'));
```

星途面试题库