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

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

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

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

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

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

同樣還是這個(gè)例子：

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

此時(shí)result的結(jié)果就是10，因?yàn)??操作符只對null和undefined這兩個(gè)原始值進(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ù)需要接收布爾值時(shí)，使用??可以避免意外覆蓋用戶傳入的false值。

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

3、多條件回退策略

通過鏈?zhǔn)绞褂??，可以實(shí)現(xiàn)多層級的配置回退機(jī)制，這種模式在讀取環(huán)境變量時(shí)特別實(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ù)雜對象時(shí)更具優(yōu)勢。這是因?yàn)殡p問號操作符只檢查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é)語

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

拓展：雙問號（??）和或運(yùn)算符（||）的區(qū)別和使用

1.?? 和 || 的區(qū)別

在 JavaScript 中，雙問號（??）和或運(yùn)算符（||）都可以用來設(shè)置默認(rèn)值，但是它們處理 Falsy 值的方式不同。

|| 運(yùn)算符在遇到 Falsy 值時(shí)會返回第一個(gè)真值（Truthy）操作數(shù)，否則返回最后一個(gè)操作數(shù)。例如：

const x = null;
const y = x || "default";
console.log(y); // "default"

在上面的代碼中，變量 y 的值將是 “default”，因?yàn)?x 的值為 null，null 是一個(gè) Falsy 值，所以 y 的值返回了 “default”。

而雙問號運(yùn)算符（??）只在左側(cè)的值為 null 或 undefined 時(shí)返回右側(cè)的值，否則返回左側(cè)的值。例如：

const x = null;
const y = x ?? "default";
console.log(y); // null

在上面的代碼中，變量 y 的值將是 null，因?yàn)?x 的值為 null，而 ?? 運(yùn)算符只會在左側(cè)的值為 null 或 undefined 時(shí)返回右側(cè)的默認(rèn)值。

因此，雙問號運(yùn)算符和或運(yùn)算符的區(qū)別在于它們在處理 Falsy 值時(shí)的行為不同。或運(yùn)算符會將 Falsy 值視為假，而雙問號運(yùn)算符只在左側(cè)的值為 null 或 undefined 時(shí)才返回右側(cè)的默認(rèn)值。

在實(shí)際使用中，當(dāng)需要設(shè)置默認(rèn)值時(shí)，可以使用雙問號運(yùn)算符來避免將 Falsy 值視為默認(rèn)值。例如：

const x = 0;
const y = x ?? 42;
console.log(y); // 0

在上面的代碼中，變量 y 的值將是 0，因?yàn)?x 的值為 0，而 0 不是 Falsy 值，所以 y 的值返回了 0。如果使用或運(yùn)算符來設(shè)置默認(rèn)值，那么 y 的值將會是 42，這可能不是我們期望的結(jié)果。

總之，雙問號運(yùn)算符可以更加準(zhǔn)確地設(shè)置默認(rèn)值，避免將 Falsy 值視為默認(rèn)值。

2.?? 和 || 的使用

在 JavaScript 中，雙問號（“??”）被稱為 Nullish Coalescing 運(yùn)算符，它用于處理變量值為 null 或 undefined 的情況。

具體來說，雙問號運(yùn)算符返回其左側(cè)的操作數(shù)，如果它的值是 null 或 undefined，則返回右側(cè)的操作數(shù)。例如：

const x = null;
const y = x ?? "default";
console.log(y); // "default"

在上面的代碼中，變量 y 的值將是 “default”，因?yàn)?x 的值為 null，而雙問號運(yùn)算符會返回右側(cè)的默認(rèn)值。

請注意，雙問號運(yùn)算符僅在其左側(cè)的值為 null 或 undefined 時(shí)才返回右側(cè)的默認(rèn)值。如果左側(cè)的值為 “”（空字符串）、0 或 false，則左側(cè)的值仍然被視為有效值，雙問號運(yùn)算符不會返回右側(cè)的默認(rèn)值。

例如：

const a = "";
const b = a ?? "default";
console.log(b); // ""

在上面的代碼中，變量 b 的值將是 “”，因?yàn)?a 的值為 “”，而雙問號運(yùn)算符會將其視為有效值，不會返回右側(cè)的默認(rèn)值。

以上就是JavaScript雙問號(??)操作符用法詳解的詳細(xì)內(nèi)容，更多關(guān)于JavaScript雙問號??用法的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論