前端必看：JS 可选链？. 与空值合并？？超详细讲解本文讲解 JavaScript中可选链 (?.) 和空值合并 (??

同学们好，我是 Eugene（尤金），一个拥有多年中后台开发经验的前端工程师~

（Eugene 发音很简单，/juːˈdʒiːn/，大家怎么顺口怎么叫就好）

你是否也有过：明明学过很多技术，一到关键时候却讲不出来、甚至写不出来？

你是否也曾怀疑自己，是不是太笨了，明明感觉会，却总差一口气？

就算想沉下心从头梳理，可工作那么忙，回家还要陪伴家人。

一天只有24小时，时间永远不够用，常常感到力不从心。

技术行业，本就是逆水行舟，不进则退。

如果你也有同样的困扰，别慌。

从现在开始，跟着我一起心态归零，利用碎片时间，来一次彻彻底底的基础扫盲。

这一次，我们一起慢慢来，扎扎实实变强。

不搞花里胡哨的理论堆砌，只分享看得懂、用得上的前端干货，

咱们一起稳步积累，真正摆脱“面向搜索引擎写代码”的尴尬。

引言

这是一段我看从别人的Axios代码里看到的代码片段

const msg = error.response?.data?.msg ?? error.response?.data?.message ?? error.message

起初这个?的用法，我只在定义接口的时候用过

export interface UserInfo {
  id: string 
  pwd: string  // 密码
  nickname: string // 用户名称
  wechatCode?: string  // 微信号
}

表示：wechatCode是可选的，有也行没有也行。其他的都是一定要有的。

error.response?.data 我还能理解，表示error中是否有response，如果有就再.data如果没有就返回空嘛。但是??我就不能理解啦。怀揣着好奇心学习了一下，分享给同样不知道的同学们。

可选链操作符 ?. 作用：安全地访问嵌套对象的属性，如果访问路径上的某个属性是 null 或 undefined，不会报错，而是直接返回 undefined。

传统写法：如果直接写 error.response.data.msg，如果 error.response 是 undefined，会抛出 Cannot read properties of undefined (reading 'data') 错误。
可选链写法：error.response?.data?.msg 会先检查 error.response 是否存在（非 null/undefined），存在才继续访问 data，再检查 data 存在才访问 msg，任何一步不存在就返回 undefined。

2.空值合并操作符 ??

作用：只在左边的值是 null 或 undefined 时，才返回右边的值（区别于 ||，|| 会把 ''、0、false 等 “假值” 也判定为无效）。

例子：
- undefined ?? '默认值' → 返回 '默认值'；
- '' ?? '默认值' → 返回 ''（因为 '' 不是 null/undefined）。
对比 ||：'' || '默认值' → 返回 '默认值'，这是两者的核心区别。

const msg = error.response?.data?.msg ?? error.response?.data?.message ?? error.message

这行代码的核心目的是：按优先级从 error 对象中提取错误提示信息，确保最终拿到一个有效的、非空的错误文本，查找优先级如下：

1、第一优先级：error.response?.data?.msg 先尝试从 error 的 response.data 里找 msg 属性（很多后端接口返回的错误信息字段是 msg）。

2、第二优先级：error.response?.data?.message 如果第一步的结果是 null/undefined（比如接口返回的错误字段是 message 而不是 msg），就尝试找 response.data 里的 message 属性。

3、最后兜底：error.message 如果前两步都没找到（比如没有 response 层级，比如前端自身抛出的错误），就取 error 本身的 message 属性（JS 原生 Error 对象默认有 message 字段）。

const msg = error.response?.data?.msg ?? error.response?.data?.message ?? error.message

还是这个代码，用三种不同的接口情况返回让你更好的理解。下面的三个例子要和这条代码对照起来看。

假设有三种不同的 error 结构，看 msg 的取值结果：

例子 1：接口返回 msg 字段

const error = {
  response: {
    data: { msg: '用户名已存在' }
  }
};
// 执行代码后，msg = '用户名已存在'（取第一优先级）

例子 2：接口返回 message 字段

const error = {
  response: {
    data: { message: '密码错误' }
  }
};
// 第一步 msg 是 undefined → 第二步取 message → msg = '密码错误'

例子 3：前端原生错误（无 response 层级）

const error = new Error('网络请求超时');
// 前两步都是 undefined → 取 error.message → msg = '网络请求超时'

const msg = error.response?.data?.msg ?? error.response?.data?.message ?? error.message

通过本次学习，再结合案例分析一下。我发现这个写法似乎是前端处理异步请求（如 Axios）错误信息的常用最佳实践，能兼容不同格式的错误返回，保证代码的健壮性。

学习本就是一场持久战，不需要急着一口吃成胖子。哪怕今天你只记住了一点点，这都是实打实的进步。

后续我还会继续用这种大白话、讲实战方式，带大家扫盲更多前端基础。

关注我，不迷路，咱们把那些曾经模糊的知识点，一个个彻底搞清楚。

如果你觉得这篇内容对你有帮助，不妨点赞+收藏，下次写代码卡壳时，拿出来翻一翻，比搜引擎更靠谱。

我是 Eugene，你的电子学友，我们下一篇干货见～