JS 如何使用可选链安全访问嵌套属性？

Question

JS 如何使用可选链安全访问嵌套属性？

仓乃文 · Accepted Answer

访问深层嵌套对象属性时，中间任何一层为 null 或 undefined 都会报错。可选链操作符 ?. 可以安全地访问，遇到空值直接返回 undefined 而不报错。

属性访问：
```javascript
const user = { profile: { address: { city: "北京" } } };

// 传统写法
const city = user && user.profile && user.profile.address && user.profile.address.city;

// 可选链写法
const city = user?.profile?.address?.city;  // "北京"
const street = user?.profile?.address?.street;  // undefined，不报错
```

方法调用和数组访问：
```javascript
obj?.method?.();      // 安全调用方法
arr?.[0]?.name;       // 安全访问数组元素
user?.["profile"];    // 动态属性名
```

补充说明：
- ?. 仅在值为 null 或 undefined 时短路，对 0、false、NaN、空字符串不会短路
- 可选链不能用在赋值语句左侧：obj?.name = "test" 会报语法错误
- 与空值合并 ?? 搭配效果最佳：user?.name ?? "匿名"
- 浏览器兼容性已很好，Chrome 80+、Firefox 72+、Safari 13.1+ 均支持