什么是JavaScript中的可选链与空值合并_简化深层属性访问的新运算符【教程】_技术教程

可选链（?.）和空值合并（??）是已落地的 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

嵌套组合时的典型写法与陷阱

两者常配合使用，但顺序和括号位置直接影响结果。深层结构访问最易出错的地方不是语法，而是对“哪里可能空”的预判偏差。

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'