可选链（?.）和空值合并（??）是已落地的 JavaScript 特性，Chrome 80+/Node.js 14+ 原生支持；?. 仅在左侧为 null/undefined 时短路，不处理属性存在但值为空的情况；?? 仅在左侧为 null/undefined 时取右侧值，区别于 || 对所有 falsy 值生效。
可选链（?.）和空值合并（??）不是“新教程”，而是 JavaScript 已落地的语法特性，Chrome 80+、Node.js 14+ 原生支持，无需 Babel 转译即可用——但直接套用容易在对象为 null 或 undefined 时出错。
为什么 ?. 不能代替所有点号访问
可选链只在左侧操作数为 null 或 undefined 时短路返回 undefined，其余情况照常取值。它不处理“属性存在但值为 null”这类逻辑判断。
-
obj?.user?.name安全：若obj为null，整个表达式立即返回undefined，不报错 -
obj?.user?.name?.length合法：连用多个?.是允许的 -
obj?.user?.getName?.()支持方法调用，但仅当getName存在且为函数才执行 -
arr?.[index]支持数组索引访问，arr?.[0]?.id是常见写法 - ⚠️ 错误用法：
obj?.user.name—— 中间user若为null，仍会触发Cannot read property 'name' of null
?? 和 || 的本质区别在哪
?? 只在左侧为 null 或 undefined 时取右侧值；|| 在左侧为任意 falsy 值（0、''、false）时都会切换，这常导致意料外的行为。
const count = 0; const name = ''; count || 10; // → 10（错误！0 是有效计数值） count ?? 10; // → 0（正确） name || 'N/A'; // → 'N/A'（错误！空字符串可能是合法输入） name ?? 'N/A'; // → ''（保留原值）
- 适合用
??的场景：配置默认值、接口字段兜底、解构赋值默认项 - 不要用
??判断布尔开关，比如enabled ?? true—— 若后端传false，它不会被覆盖，但你可能本意是“没传才启用” -
??优先级低于&&和||，混用必须加括号：(a ?? b) && c
嵌套组合时的典型写法与陷阱
两者常配合使用，但顺序和括号位置直接影响结果。深层结构访问最易出错的地方不是语法，而是对“哪里可能空”的预判偏差。
立即学习“Java免费学习笔记（深入）”；
const data = { user: { profile: null } };
// ✅ 安全：先可选链取 profile，再空值合并兜底
data?.user?.profile?.avatarUrl ?? '/default.png'
// ❌ 危险：profile 是 null，但 ?.profile?.avatarUrl 返回 undefined，
// 然后 ?? 生效 —— 这看似没问题，但若 avatarUrl 字段本身是 '' 或 0，
// 就不该被替换成默认图
data?.user?.profile?.avatarUrl ?? '/default.png'
// ✅ 更严谨：只对整个 profile 对象做空值合并，再取其属性
(data?.user?.profile ?? { avatarUrl: '' }).avatarUrl || '/default.png'
- 别假设“只要用了
?.就绝对安全”——它只防TypeError，不防业务逻辑错误 - 对数字、字符串等原始值做默认处理，优先用
??；对对象结构做兜底，常需结合解构或三元 - TypeScript 用户注意：
?.不会改变类型推导，obj?.user?.name类型是string | undefined，仍需检查
真正难的不是记住两个运算符怎么写，而是每次访问深层属性时，得想清楚：这个值可能在哪一层坍塌？是数据缺失（null/undefined），还是语义性空值（''、0、false）？选错运算符，bug 会藏得比以前更深。
