可选链?.是ES2020正式引入的运算符，用于安全访问嵌套属性或调用方法，遇null/undefined即停止并返回undefined，不提供默认值，仅适用于读取操作且不可用于赋值左侧。
可选链 ?. 是什么
可选链不是语法糖，而是 JavaScript 正式引入的运算符（ES2020），用来避免在访问嵌套属性时因某一层为 null 或 undefined 而抛出 TypeError。它不会“自动兜底”成空对象或默认值，只是在遇到 null 或 undefined 时立即停止访问、返回 undefined。
怎么用 ?. 安全访问对象属性
核心规则：只在你**不确定某个中间对象是否存在**时才加 ?.，不是所有点都要换。常见误用是给根对象也加 ?.，但根变量本身没被声明或为 undefined 时，obj?.a 仍会报错——因为 obj 不在作用域里，根本轮不到可选链生效。
-
user?.profile?.avatar?.url✅ 安全：任一环节为null/undefined，整个表达式返回undefined -
user.profile?.avatar.url❌ 危险：若user为undefined，直接报Cannot read property 'profile' of undefined -
arr?.[0]?.name✅ 支持数组索引访问 -
fn?.(arg)✅ 支持安全调用函数（但注意：fn是null时不会执行，也不会报错）
可选链和空值合并 ?? 配合使用
可选链自己不提供默认值，常和空值合并运算符 ?? 组合来补缺。注意别和逻辑或 || 混用：?? 只在左侧为 null 或 undefined 时生效；|| 会在 0、''、false 时也触发，默认行为不符合预期。
const displayName = user?.name ?? 'Anonymous'; const avatarSize = user?.settings?.avatarSize ?? 48; // 即使 avatarSize 是 0，也会用 48 吗？不会 —— 0 是有效值，?? 不触发
容易踩的坑
可选链不能跨函数作用域，也不能用于赋值左侧；它只对「读取」操作有效。另外，V8 和现代浏览器支持良好，但 IE 完全不支持，Node.js 需 v14+（且需启用 ES2020）。
立即学习“Java免费学习笔记（深入）”；
-
user?.name = 'Alice'❌ 语法错误：可选链不能出现在赋值左侧 -
user?.[key]✅ 支持动态属性名，但key必须已定义（否则key为undefined会导致user?.[undefined]，结果仍是undefined，不报错） - 链中混用括号易出错：
obj?.method()?.data表示先安全调用method()，再读data；而(obj?.method)()?.data是另一种语义，慎用
?. 不增加安全性，反而掩盖数据结构问题；少一层，运行时就崩。 
