前言

在現(xiàn)代JavaScript開發(fā)中，處理變量默認(rèn)值是一個常見但容易引發(fā)bug的操作。很多開發(fā)者可能都遇到過這樣的問題：使用||設(shè)置默認(rèn)值時，意外覆蓋了0、''等合法值。這時候，ES2020引入的雙問號操作符（??）就能完美解決這類問題。本文將帶您全面掌握這個操作符的使用場景和高級技巧。

一、雙問號操作符??的基礎(chǔ)用法

1、傳統(tǒng)方式的痛點(diǎn)

const count = 0;
const result = count || 10; // 得到10，但0可能是有效值

使用||時，會把所有假值 （falsy values）視為無效值，包括：0、''、false、NaN、null、undefined。這在處理數(shù)字表單、開關(guān)狀態(tài)等場景時會引發(fā)問題。

以上述案例來說，我想要count被賦值的情況下就使用count的值，要是沒有被賦值就使用默認(rèn)值10，但是當(dāng)count被初始化并賦值為0的時候，邏輯或操作符||依然會認(rèn)為是無效值，并將result賦值為10，這顯然和我預(yù)期的結(jié)果相悖。這是因?yàn)镴avaScript是一門弱類型語言，會進(jìn)行強(qiáng)制類型轉(zhuǎn)換。

2、雙問號操作符??的精確判斷

同樣還是這個例子：

const count = 0;
const result = count ?? 10; // 得到0，完美保留有效值

此時result的結(jié)果就是10，因?yàn)??操作符只對null和undefined這兩個原始值進(jìn)行判斷，其他假值都會被保留。這種特性使其特別適合處理以下場景：

• 表單輸入值（允許0或空字符串）
• 布爾類型配置項(xiàng)
• 數(shù)字類型參數(shù)（允許0）

3、雙問號操作符??與邏輯或操作符||的對比

二、復(fù)雜場景下的空值處理

1、深層嵌套對象的默認(rèn)值

結(jié)合可選鏈操作符（?.），可以安全地處理多層嵌套對象的屬性訪問。

const config = {
  api: {
    v1: {
      endpoint: ''
    }
  }
};

// 傳統(tǒng)寫法（需要逐層判斷）
const endpoint = config.api?.v1?.endpoint || 'default';

// 使用??的改進(jìn)寫法
const endpoint = config.api?.v1?.endpoint ?? 'default';

2、函數(shù)參數(shù)的默認(rèn)值陷阱

當(dāng)函數(shù)參數(shù)需要接收布爾值時，使用??可以避免意外覆蓋用戶傳入的false值。

function createPost(data) {
  // 錯誤寫法：會覆蓋有效布爾值
  const isPublic = data.isPublic || true;
  
  // 正確寫法：僅處理null/undefined
  const isPublic = data.isPublic ?? true;
}

3、多條件回退策略

通過鏈?zhǔn)绞褂??，可以實(shí)現(xiàn)多層級的配置回退機(jī)制，這種模式在讀取環(huán)境變量時特別實(shí)用。

const theme = userConfig.theme 
  ?? systemConfig.theme 
  ?? process.env.THEME 
  ?? 'light';

三、實(shí)戰(zhàn)案例解析

1、Vue組件中的Prop處理

如果disabled接收的值為false，如果使用邏輯或操作符，就會被認(rèn)為是無效值，從而使用默認(rèn)的true值。如果使用雙問號操作符就可以避免這種情況。

<template>
  <input :disabled="isDisabled" />
</template>

<script>
export default {
  props: {
    disabled: {
      type: Boolean,
      default: undefined
    }
  },
  computed: {
    isDisabled() {
      return this.disabled ?? true;
    }
  }
}
</script>

2、表單驗(yàn)證

就算你不允許用戶輸入空格，起碼要允許用戶輸入0和引號吧？如果使用邏輯或操作符，根本無法通過表單驗(yàn)證，使用雙問號操作符就可以避免這種情況。

function validateForm(formData) {
  const errors = [];
  
  if (formData.username?.trim() ?? false) {
    errors.push('用戶名不能為空');
  }
  
  if (formData.age ?? false) {
    errors.push('年齡必須填寫');
  }
  
  return errors;
}

四、雙問號操作符的性能優(yōu)勢

實(shí)際測試顯示，??在性能上與||基本持平，但在處理復(fù)雜對象時更具優(yōu)勢。這是因?yàn)?strong>雙問號操作符只檢查null和undefined，比||操作符的類型轉(zhuǎn)換操作更高效。

當(dāng)然，這部分差異很小，更多的作用是展示開發(fā)者的思維能力。

// 測試環(huán)境：Chrome 112，100萬次運(yùn)算
console.time('||');
for (let i = 0; i < 1000000; i++) null || 10;
console.timeEnd('||'); // 2.1ms

console.time('??');
for (let i = 0; i < 1000000; i++) null ?? 10;
console.timeEnd('??'); // 1.8ms

五、結(jié)語

 雙問號操作符（??）這個看似簡單的語法糖，實(shí)則蘊(yùn)含著提升代碼健壯性的強(qiáng)大能力。在實(shí)際項(xiàng)目中，建議結(jié)合TypeScript的嚴(yán)格空值檢查，構(gòu)建更可靠的類型安全體系。

到此這篇關(guān)于JavaScript雙問號操作符(??)詳解及如何解決使用||時因類型轉(zhuǎn)換帶來的問題的文章就介紹到這了,更多相關(guān)JS雙問號操作符及||類型轉(zhuǎn)換問題內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論