目錄
JavaScript雙問號操作符（??）詳解，解決使用||時因類型轉換帶來的問題
一、雙問號操作符??的基礎用法
1、傳統方式的痛點
2、雙問號操作符??的精確判斷
3、雙問號操作符??與邏輯或操作符||的對比
二、復雜場景下的空值處理
1、深層嵌套對象的默認值
2、函數參數的默認值陷阱
3、多條件回退策略
三、實戰案例解析
1、Vue組件中的Prop處理
2、表單驗證
四、雙問號操作符的性能優勢
五、結語
????????作者：watermelo37
? ? ? ? CSDN萬粉博主、華為云云享專家、阿里云專家博主、騰訊云、支付寶合作作者，全平臺博客昵稱watermelo37。
? ? ? ? 一個假裝是giser的coder，做不只專注于業務邏輯的前端工程師，Java、Docker、Python、LLM均有涉獵。
---------------------------------------------------------------------
溫柔地對待溫柔的人，包容的三觀就是最大的溫柔。
---------------------------------------------------------------------
JavaScript雙問號操作符（??）詳解，解決使用||時因類型轉換帶來的問題
????????在現代JavaScript開發中，處理變量默認值是一個常見但容易引發bug的操作。很多開發者可能都遇到過這樣的問題：使用||設置默認值時，意外覆蓋了0、''等合法值。這時候，ES2020引入的雙問號操作符（??）就能完美解決這類問題。本文將帶您全面掌握這個操作符的使用場景和高級技巧。
一、雙問號操作符??的基礎用法
1、傳統方式的痛點
const count = 0;
const result = count || 10; // 得到10，但0可能是有效值????????使用||時，會把所有假值 （falsy values）視為無效值，包括：0、''、false、NaN、null、undefined。這在處理數字表單、開關狀態等場景時會引發問題。
? ? ? ? 以上述案例來說，我想要count被賦值的情況下就使用count的值，要是沒有被賦值就使用默認值10，但是當count被初始化并賦值為0的時候，邏輯或操作符||依然會認為是無效值，并將result賦值為10，這顯然和我預期的結果相悖。這是因為JavaScript是一門弱類型語言，會進行強制類型轉換。
2、雙問號操作符??的精確判斷
? ? ? ? 同樣還是這個例子：
const count = 0;
const result = count ?? 10; // 得到0，完美保留有效值????????此時result的結果就是10，因為??操作符只對null和undefined這兩個原始值進行判斷，其他假值都會被保留。這種特性使其特別適合處理以下場景：
- 表單輸入值（允許0或空字符串）
- 布爾類型配置項
- 數字類型參數（允許0）
3、雙問號操作符??與邏輯或操作符||的對比
| 特性 | ?? 操作符 | ?|| 操作符 |
|---|---|---|
| 觸發條件 | 僅?null/undefined | 所有假值 |
| 適用場景 | 精準空值判斷 | 快速默認值設置 |
| 處理 0 和 '' | 保留有效值 | 覆蓋為默認值 |
| 處理 false | 保留布爾值 | 覆蓋為默認值 |
二、復雜場景下的空值處理
1、深層嵌套對象的默認值
????????結合可選鏈操作符（?.），可以安全地處理多層嵌套對象的屬性訪問。
const config = {api: {v1: {endpoint: ''}}
};// 傳統寫法（需要逐層判斷）
const endpoint = config.api?.v1?.endpoint || 'default';// 使用??的改進寫法
const endpoint = config.api?.v1?.endpoint ?? 'default';2、函數參數的默認值陷阱
????????當函數參數需要接收布爾值時，使用??可以避免意外覆蓋用戶傳入的false值。
function createPost(data) {// 錯誤寫法：會覆蓋有效布爾值const isPublic = data.isPublic || true;// 正確寫法：僅處理null/undefinedconst isPublic = data.isPublic ?? true;
}3、多條件回退策略
????????通過鏈式使用??，可以實現多層級的配置回退機制，這種模式在讀取環境變量時特別實用。
const theme = userConfig.theme ?? systemConfig.theme ?? process.env.THEME ?? 'light';三、實戰案例解析
1、Vue組件中的Prop處理
? ? ? ? 如果disabled接收的值為false，如果使用邏輯或操作符，就會被認為是無效值，從而使用默認的true值。如果使用雙問號操作符就可以避免這種情況。
<template><input :disabled="isDisabled" />
</template><script>
export default {props: {disabled: {type: Boolean,default: undefined}},computed: {isDisabled() {return this.disabled ?? true;}}
}
</script>2、表單驗證
? ? ? ? 就算你不允許用戶輸入空格，起碼要允許用戶輸入0和引號吧？如果使用邏輯或操作符，根本無法通過表單驗證，使用雙問號操作符就可以避免這種情況。
function validateForm(formData) {const errors = [];if (formData.username?.trim() ?? false) {errors.push('用戶名不能為空');}if (formData.age ?? false) {errors.push('年齡必須填寫');}return errors;
}四、雙問號操作符的性能優勢
????????實際測試顯示，??在性能上與||基本持平，但在處理復雜對象時更具優勢。這是因為雙問號操作符只檢查null和undefined，比||操作符的類型轉換操作更高效。
? ? ? ? 當然，這部分差異很小，更多的作用是展示開發者的思維能力。
// 測試環境：Chrome 112，100萬次運算
console.time('||');
for (let i = 0; i < 1000000; i++) null || 10;
console.timeEnd('||'); // 2.1msconsole.time('??');
for (let i = 0; i < 1000000; i++) null ?? 10;
console.timeEnd('??'); // 1.8ms五、結語
????????雙問號操作符（??）這個看似簡單的語法糖，實則蘊含著提升代碼健壯性的強大能力。在實際項目中，建議結合TypeScript的嚴格空值檢查，構建更可靠的類型安全體系。
????????只有鍛煉思維才能可持續地解決問題，只有思維才是真正值得學習和分享的核心要素。如果這篇博客能給您帶來一點幫助，麻煩您點個贊支持一下，還可以收藏起來以備不時之需，有疑問和錯誤歡迎在評論區指出~
????????其他熱門文章，請關注：
? ? ? ??極致的靈活度滿足工程美學：用Vue Flow繪制一個完美流程圖
???? ? ?你真的會使用Vue3的onMounted鉤子函數嗎？Vue3中onMounted的用法詳解
????????DeepSeek：全棧開發者視角下的AI革命者
??? ? ??通過array.filter()實現數組的數據篩選、數據清洗和鏈式調用
??? ? ??通過Array.sort() 實現多字段排序、排序穩定性、隨機排序洗牌算法、優化排序性能
??? ? ??TreeSize：免費的磁盤清理與管理神器，解決C盤爆滿的燃眉之急
??? ? ??通過MongoDB Atlas 實現語義搜索與 RAG——邁向AI的搜索機制
???? ? ?深入理解 JavaScript 中的 Array.find() 方法：原理、性能優勢與實用案例詳解
???? ? ?el-table實現動態數據的實時排序，一篇文章講清楚elementui的表格排序功能
??? ? ??MutationObserver詳解+案例——深入理解 JavaScript 中的 MutationObserver
????????JavaScript中通過array.map(）實現數據轉換、創建派生數組、異步數據流處理、DOM操作等
????????高效工作流：用Mermaid繪制你的專屬流程圖；如何在Vue3中導入mermaid繪制流程圖
??? ? ??Dockerfile全面指南：從基礎到進階，掌握容器化構建的核心工具
????????在線編程實現！如何在Java后端通過DockerClient操作Docker生成python環境
??? ? ??干貨含源碼！如何用Java后端操作Docker（命令行篇）
)
