详解JS的?.（可选链操作符）和 ??（空值合并操作符）

引言

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

ts 复制代码

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

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

ts 复制代码

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）。
对比 ||：'' || '默认值' → 返回 '默认值'，这是两者的核心区别。

ts 复制代码

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 字段）。

ts 复制代码

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

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

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

例子 1：接口返回 msg 字段

js 复制代码

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

例子 2：接口返回 message 字段

js 复制代码

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

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

js 复制代码

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

ts 复制代码

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

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

以上就是本次对JS的?.（可选链操作符）和 ??（空值合并操作符）的学习分享。欢迎大家指正讨论，与大家共勉。