聊聊 ?? 运算符：一个懂得 "分寸" 的默认值高手

聊聊 `??` 运算符：一个懂得 "分寸" 的默认值高手

在 JavaScript 里处理默认值时，你是不是也遇到过这种尴尬：明明用户输入了 0，结果被代码 "自作主张" 换成了默认值？这时候，?? 运算符就能派上用场了 ------ 它就像个有分寸感的助理，不会乱替你做决定。

先说说老问题：`||` 的 "过度热心"

过去我们常用 || 设置默认值：

javascript

运行

ini 复制代码

// 想给未输入的情况设默认值 60
const score = userInput || 60;

但 || 有个毛病：它把 0、''、false 这些 "有效假值" 都当成了 "无值"。比如用户明明考了 0 分，score 却会变成 60------ 这就像老师把交了白卷的学生直接判成及格，显然不合理。

介绍一下今天的主角

空值合并运算符 ?? 是 JavaScript（ES2020 引入）的一种逻辑运算符，用于处理变量为 null 或 undefined 的情况，返回第一个 "已定义" 的值。它的语法和行为如下：

基本语法

运行

javascript 复制代码

表达式1 ?? 表达式2

如果 表达式1 是 null 或 undefined，则返回 表达式2
否则，返回 表达式1
如果 表达式1 是 null 或 undefined，则返回 表达式2
否则，返回 表达式1

核心特点：只判断 `null`/`undefined`

与 ||（逻辑或）不同，?? 只对 null 和 undefined 敏感，对其他 "假值"（如 0、''、false）不敏感。

`??` 的核心原则：只认两种 "真・空值"

??（空值合并运算符）就理性多了，它的判断标准很明确：只有当左边是 null 或 undefined 时，才会返回右边的默认值。

看几个例子就懂了：

ini 复制代码

const a = null ?? '默认值';      // '默认值'（左边是 null）
const b = undefined ?? '默认值'; // '默认值'（左边是 undefined）
const c = 0 ?? 60;              // 0（左边是有效数字，不替换）
const d = '' ?? '空字符串';      // ''（空字符串是有效输入，不替换）

这就好比：只有当快递明确显示 "无此件"（null）或 "地址错误"（undefined）时，?? 才会给你发备用快递；如果只是快递里装了个空盒子（''）或数字 0，它会原封不动交给你。

实用技巧：和 `?.` 组成 "安全组合"

?? 常和可选链运算符 ?. 搭配，处理接口返回的复杂数据：

javascript

运行

ini 复制代码

// 从可能不完整的接口数据中取用户城市，无数据时显示"未知"
const city = response?.data?.user?.city ?? '未知城市';

?. 负责 "安全导航"：遇到 null/undefined 就停止访问，避免报错
?? 负责 "兜底方案"：确认前面真的没数据时，才用默认值

这种组合比传统的 && 嵌套（response && response.data && ...）简洁太多，还能避免漏写判断导致的报错。

注意事项：别和 `&&`/`||` 瞎混搭

?? 不能直接和 && 或 || 连用，需要用括号明确优先级，否则会报错：

ini 复制代码

// 错误写法
const result = a || b ?? c;

// 正确写法（用括号明确逻辑）
const result = (a || b) ?? c;

总结一下

?? 是个 "有原则" 的运算符：

只在左边是 null 或 undefined 时，才返回右边的默认值
对 0、''、false 等有效假值 "手下留情"，不随意替换
和 ?. 搭配，能优雅处理嵌套数据和默认值场景

如果你常和接口数据打交道，?? 绝对能减少不少 "数据处理翻车" 的情况 ------ 毕竟，不是所有 "空" 都需要被填补。

聊聊 ?? 运算符：一个懂得 "分寸" 的默认值高手