JavaScript可选链是什么_它如何安全访问嵌套属性
JavaScript可选链操作符?.用于安全访问嵌套属性或方法，左侧为null/undefined时立即返回undefined；适用于API响应等不确定数据，常与??组合提供默认值，不支持赋值、delete等操作，IE不支持。
什么是 JavaScript 可选链操作符 ?.
它是一种短路求值语法，用于安全读取深度嵌套对象属性或调用可能为 null 或 undefined 的对象方法。当左侧操作数为 null 或 undefined 时，整个表达式立即返回 undefined，不再继续访问右侧属性或执行调用。
什么时候该用 ?. 而不是传统点号 .
当你不能 100% 确保中间某个对象存在时，比如处理 API 响应、表单数据、用户配置等外部输入——这些值在运行时可能缺失或结构不一致。
- API 返回
data?.user?.profile?.avatarUrl比data && data.user && data.user.profile && data.user.profile.avatarUrl更简洁 - 调用可能不存在的方法：
obj?.method?.()，如果obj或method是undefined，不会报TypeError: Cannot read property 'xxx' of undefined - 访问数组元素时也可用：
list?.[0]?.name，避免Cannot read p
roperty 'name' of undefined
roperty 'name' of undefined
?. 和空值合并操作符 ?? 经常一起用
可选链只解决“访问不崩溃”，但不提供默认值；?? 用来兜底。两者组合是处理不确定数据的常见模式。
const avatar = user?.profile?.avatarUrl ?? '/default-avatar.png';
注意不要和逻辑或 || 混用：user?.age || 0 在 age === 0 时也会 fallback，而 ?? 只在 undefined 或 null 时生效。
容易忽略的限制和坑
?. 不适用于赋值、删除或 in 操作；也不能跳过非对象类型的中间值（比如数字、字符串）。
- ❌ 错误写法：
obj?.a = 1（赋值不支持可选链） - ❌ 错误写法：
delete obj?.a（delete不支持） - ❌ 错误写法：
obj?.toString()—— 如果obj是数字，?.toString()会直接返回undefined，因为数字不是对象，不满足“对象属性访问”前提 - ✅ 正确写法：
obj != null ? obj.toString() : undefined或显式转换：String(obj)?.toString()
浏览器兼容性需留意：IE 完全不支持，现代 Chrome/Firefox/Edge/Safari 均支持，Node.js 14+ 支持。如果项目需兼容旧环境，得靠 Babel 转译。
