空值合并运算符 ?? ，|| 的替代方案

我有一棵树2025-12-30 14:38

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Nullish_coalescinghttps://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing

空值合并运算符在前端中的正确打开方式

在 JavaScript 中，处理"空值默认值"是一个非常高频的需求。为了更精确地控制兜底逻辑，ES2020 引入了 ?? ------ 空值合并运算符（Nullish Coalescing Operator）。

1. `??` 的核心行为

?? 只在左侧的值为 null 或 undefined 时，才会返回右侧的默认值，其余情况保持原值。

javascript 复制代码

const a = null ?? 100  // 100
const b = 0 ?? 100     // 0（不会被误伤）
const c = '' ?? 100    // ''（不会被误伤）

2. 与 `||` 的关键区别

|| 适用于所有 falsy 值兜底，但会误覆盖 0、''、false 等有效值；?? 更加精确，只针对真正的空值。

javascript 复制代码

0 || 100      // 100（误覆盖）
0 ?? 100      // 0（正确保留）
'' || 100     // 100（误覆盖）
'' ?? 100     // ''（正确保留）
false || 100  // 100（误覆盖）
false ?? 100  // false（正确保留）

3. 适用场景

需要保留 0、空字符串等合法业务数据
解析流式数据、配置合并、参数默认值、字段回填
避免大量 if (x == null) 判断
提高代码语义清晰度和健壮性

4. 兼容性

?? 在现代浏览器和 Node.js 14+ 环境均被广泛支持，已经是前端项目的主流推荐写法。

5. 注意事项

?? 不能与 && / || 直接混用，需加括号
javascript 复制代码
```
(a || b) ?? c  // 正确
a || b ?? c    // 报错
```

总结

?? 让默认值兜底逻辑更精准、安全、不误覆盖业务有效值，是现代 JavaScript 代码中不可或缺的语法能力。

在前端开发中，推荐优先使用 ?? 处理空值合并，使代码更可靠、更易维护。