js空值合并运算符??

2026-05-12 14:00:27 912阅读 0评论

别再被 `||` 误伤！JS 空值合并运算符 `??` 才是默认值的救星

在写前端配置或处理接口数据时，我们总习惯给变量设个兜底值。以前大家最常用的手法是逻辑或运算符 ||，比如 const size = pageSize || 10。但你是否遇到过这种尴尬场景：用户特意把每页条数设为 0，或者金额字段为 0 元，结果代码却莫名其妙返回了默认值 10 或其他值？

这就是典型的 “假值陷阱”。

JavaScript 的 || 运算符判定标准是“真假”。只要左侧值是 false、0、""、null、undefined 或 NaN，它都会认为左侧无效，转而取右侧的值。这在大多数时候没问题，可一旦业务逻辑里允许 0 或空字符串作为合法状态（比如折扣力度、库存数量），|| 就会无情地覆盖掉这些真实数据。

这时候，ES2020 推出的 空值合并运算符 ?? 就显得尤为关键。

`??` 到底解决了什么问题？

?? 的逻辑非常纯粹：只有当左侧值为 null 或 undefined 时，才会返回右侧的默认值。 其他任何假值（如 0、false、""）都会被视作有效值保留下来。

来看一个具体的对比案例：

const count = 0;
const resultOr = count || 10;   // 结果是 10，0 被视为假值
const resultNullish = count ?? 10; // 结果是 0，0 被视为有效值

在实际开发中，这种区别往往决定了一个功能的可用性。比如在配置对象里，如果某个开关参数明确关闭（false），用 || 可能会导致功能被强制开启；如果某个输入框允许留空（""），用 || 可能会回退到默认提示词，掩盖用户的真实意图。只有 ?? 能精准区分“没有值”和“值为空”。

使用时的致命红线

虽然 ?? 好用，但直接替换旧代码有时会报错。这是因为它的优先级比 && 和 || 低。如果你尝试这样写：

// ❌ 语法错误
let val = condition && config ?? defaultValue;

浏览器会抛出 SyntaxError。想要混合使用，必须显式加上括号来明确结合顺序：

// ✅ 正确写法
let val = (condition && config) ?? defaultValue;

这要求我们在编写复杂表达式时更加小心，宁可多加括号，也不要让解析器猜谜。建议养成习惯，涉及条件组合时优先保证逻辑清晰，避免嵌套过深导致难以维护。

与可选链操作符的完美搭档

提到 ??，就不能不提可选链操作符 ?.。两者配合往往是处理深层对象数据的最佳实践。

以前我们可能需要一层层判断是否存在，现在一行搞定：

const userName = user?.profile?.name ?? '访客';

这里不仅避免了访问 undefined 属性导致的崩溃，还确保了如果 name 存在且不为空字符串（即使它是 ""），都能正确显示。只有当整个链路断裂或最终结果为 null/undefined 时，才会启用 “访客” 这个兜底文案。这种组合拳极大地减少了防御性代码的体积，让逻辑看起来更像自然语言。