17370845950

空值合并运算符??是ES2025引入的二元操作符，仅当左操作数为null或undefined时返回右操作数，对0、false、''、NaN等falsy值仍返回左操作数；其与||的关键区别在于??只检测nullish值，而||检测所有falsy值。

空值合并运算符 ?? 是什么

它是一个二元操作符，只在左操作数为 null 或 undefined 时返回右操作数；其他任何值（包括 0、false、''、NaN）都会原样返回左操作数。

?? 和 || 的关键区别在哪里

很多人误以为 ?? 是“更安全的 ||”，其实它们的判断逻辑完全不同：

• || 检查的是“falsy 值”：只要左值是 false、0、''、null、undefined、NaN，就取右边
• ?? 只检查“nullish 值”：仅当左值严格等于 null 或 undefined 才取右边

这意味着你写 count ?? 10，哪怕 count 是 0，结果也是 0；而 count || 10 在 count === 0 时会错误地返回 10。

常见误用场景和修复建议

典型问题出现在处理 API 返回的可选数值或布尔字段时：

立即学习“Java免费学习笔记（深入）”；

• 后端返回 { price: 0 }，但代码写成 item.price || 99 → 错误覆盖为 99
• 正确写法应为 item.price ?? 99，保留 0 的业务含义
• 嵌套访问如 user?.profile?.age ?? 18 安全且简洁；不用再写 (user && user.profile && user.profile.age) || 18
• 注意优先级：a ?? b || c 等价于 (a ?? b) || c，不是 a ?? (b || c)；混用时建议加括号明确意图

浏览器兼容性和替代方案

?? 是 ES2025 特性，现代浏览器（Chrome 80+、Firefox 74+、Safari 13.1+）已原生支持。如果需兼容旧环境：

• 用 Babel + @babel/plugin-proposal-nullish-coalescing-operator
• TypeScript 3.7+ 默认支持，并在编译时降级为三元表达式（如 a !== null && a !== void 0 ? a : b）
• 手写兼容写法： (val === null || val === undefined) ? defaultValue : val，但别为了省几字节牺牲可读性

const config = {
  timeout: response.data.timeout ?? 5000,
  retries: response.data.retries ?? 3,
  enabled: response.data.enabled ?? true // 即使后端没传 enabled 字段，也不影响默认 true
};

真正容易被忽略的是：它不解决深层属性缺失导致的 TypeError，必须配合可选链 ?. 使用；单独写 obj.items[0].name ?? 'N/A' 在 obj.items 为空时仍会报错。