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

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

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

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

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

javascript

运行

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

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

介绍一下今天的主角

空值合并运算符 ?? 是 JavaScript(ES2020 引入)的一种逻辑运算符,用于处理变量为 nullundefined 的情况,返回第一个 "已定义" 的值。它的语法和行为如下:

基本语法

运行

javascript 复制代码
表达式1 ?? 表达式2
  • 如果 表达式1nullundefined,则返回 表达式2

  • 否则,返回 表达式1

  • 如果 表达式1nullundefined,则返回 表达式2

  • 否则,返回 表达式1

核心特点:只判断 null/undefined

||(逻辑或)不同,?? 只对 nullundefined 敏感,对其他 "假值"(如 0''false)不敏感。

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

??(空值合并运算符)就理性多了,它的判断标准很明确:只有当左边是 nullundefined 时,才会返回右边的默认值

看几个例子就懂了:

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;

总结一下

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

  • 只在左边是 nullundefined 时,才返回右边的默认值

  • 0''false 等有效假值 "手下留情",不随意替换

  • ?. 搭配,能优雅处理嵌套数据和默认值场景

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

相关推荐
Baklib梅梅9 分钟前
探码科技再获“专精特新”认定:Baklib引领AI内容管理新方向
前端·ruby on rails·前端框架·ruby
南方以南_15 分钟前
Chrome开发者工具
前端·chrome
YiHanXii22 分钟前
this 输出题
前端·javascript·1024程序员节
楊无好28 分钟前
React中ref
前端·react.js
维他命Coco29 分钟前
js常见开发学习
javascript
程琬清君31 分钟前
vue3 confirm倒计时
前端·1024程序员节
歪歪1001 小时前
在C#中详细介绍一下Visual Studio中如何使用数据可视化工具
开发语言·前端·c#·visual studio code·visual studio·1024程序员节
唔661 小时前
flutter实现web端实现效果
前端·flutter
csj501 小时前
前端基础之《React(2)—webpack简介-使用Babel》
前端·react
!win !2 小时前
分享二个实用正则
javascript·正则表达式