聊聊 ?? 运算符:一个懂得 "分寸" 的默认值高手
在 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等有效假值 "手下留情",不随意替换 -
和
?.搭配,能优雅处理嵌套数据和默认值场景
如果你常和接口数据打交道,?? 绝对能减少不少 "数据处理翻车" 的情况 ------ 毕竟,不是所有 "空" 都需要被填补。