引言

這是一段我看從別人的Axios代碼里看到的代碼片段

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

起初這個(gè)?的用法，我只在定義接口的時(shí)候用過

export interface UserInfo {
  id: string 
  pwd: string  // 密碼
  nickname: string // 用戶名稱
  wechatCode?: string  // 微信號(hào)
}

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

error.response?.data 我還能理解，表示error中是否有response，如果有就再.data如果沒有就返回空嘛。但是??我就不能理解啦。懷揣著好奇心學(xué)習(xí)了一下，分享給同樣不知道的同學(xué)們。

一、關(guān)鍵語(yǔ)法講解

1.可選鏈操作符 ?.

• 作用：安全地訪問嵌套對(duì)象的屬性，如果訪問路徑上的某個(gè)屬性是 null 或 undefined，不會(huì)報(bào)錯(cuò)，而是直接返回 undefined。
• 傳統(tǒng)寫法：如果直接寫 error.response.data.msg，如果 error.response 是 undefined，會(huì)拋出 Cannot read properties of undefined (reading 'data') 錯(cuò)誤。
• 可選鏈寫法：error.response?.data?.msg 會(huì)先檢查 error.response 是否存在（非 null/undefined），存在才繼續(xù)訪問 data，再檢查 data 存在才訪問 msg，任何一步不存在就返回 undefined。

2.空值合并操作符 ??

作用：只在左邊的值是 null 或 undefined 時(shí)，才返回右邊的值（區(qū)別于 ||，|| 會(huì)把 ''、0、false 等 “假值” 也判定為無效）。

• 例子：
  • undefined ?? '默認(rèn)值' → 返回 '默認(rèn)值'；
  • '' ?? '默認(rèn)值' → 返回 ''（因?yàn)?'' 不是 null/undefined）。
• 對(duì)比 ||：'' || '默認(rèn)值' → 返回 '默認(rèn)值'，這是兩者的核心區(qū)別。

二、整行代碼分析

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

這行代碼的核心目的是：按優(yōu)先級(jí)從 error 對(duì)象中提取錯(cuò)誤提示信息，確保最終拿到一個(gè)有效的、非空的錯(cuò)誤文本，查找優(yōu)先級(jí)如下：

1、第一優(yōu)先級(jí)：error.response?.data?.msg 先嘗試從 error 的 response.data 里找 msg 屬性（很多后端接口返回的錯(cuò)誤信息字段是 msg）。

2、第二優(yōu)先級(jí)：error.response?.data?.message 如果第一步的結(jié)果是 null/undefined（比如接口返回的錯(cuò)誤字段是 message 而不是 msg），就嘗試找 response.data 里的 message 屬性。

3、最后兜底：error.message 如果前兩步都沒找到（比如沒有 response 層級(jí)，比如前端自身拋出的錯(cuò)誤），就取 error 本身的 message 屬性（JS 原生 Error 對(duì)象默認(rèn)有 message 字段）。

三、舉例子講解加深印象

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

還是這個(gè)代碼，用三種不同的接口情況返回讓你更好的理解。下面的三個(gè)例子要和這條代碼對(duì)照起來看。

假設(shè)有三種不同的 error 結(jié)構(gòu)，看 msg 的取值結(jié)果：

例子 1：接口返回 msg 字段

const error = {
  response: {
    data: { msg: '用戶名已存在' }
  }
};
// 執(zhí)行代碼后，msg = '用戶名已存在'（取第一優(yōu)先級(jí)）

例子 2：接口返回 message 字段

const error = {
  response: {
    data: { message: '密碼錯(cuò)誤' }
  }
};
// 第一步 msg 是 undefined → 第二步取 message → msg = '密碼錯(cuò)誤'

例子 3：前端原生錯(cuò)誤（無 response 層級(jí)）

const error = new Error('網(wǎng)絡(luò)請(qǐng)求超時(shí)');
// 前兩步都是 undefined → 取 error.message → msg = '網(wǎng)絡(luò)請(qǐng)求超時(shí)'

四、總結(jié)

• ?. 是為了安全訪問嵌套屬性，避免因某個(gè)屬性不存在導(dǎo)致代碼報(bào)錯(cuò)；
• ?? 是為了精準(zhǔn)判斷 “無值”（僅 null/undefined），優(yōu)先使用接口返回的錯(cuò)誤信息，兜底用原生錯(cuò)誤信息；
• 整行代碼的核心邏輯是：按 msg → message（接口層級(jí)）→ message（錯(cuò)誤對(duì)象層級(jí)）的優(yōu)先級(jí)，提取有效的錯(cuò)誤提示文本。

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

通過本次學(xué)習(xí)，再結(jié)合案例分析一下。這個(gè)寫法似乎是前端處理異步請(qǐng)求（如 Axios）錯(cuò)誤信息的常用最佳實(shí)踐，能兼容不同格式的錯(cuò)誤返回，保證代碼的健壯性。

到此這篇關(guān)于一文詳解JavaScript中?.(可選鏈操作符)和??(空值合并操作符)的用法的文章就介紹到這了,更多相關(guān)JavaScript ?.和??用法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論