在 TypeScript 中，合并運(yùn)算符（??） 是一種邏輯運(yùn)算符，用于在變量為 null 或 undefined 時(shí)提供默認(rèn)值。它讓代碼在處理“空值”場景時(shí)更加簡潔、清晰、可預(yù)測。

一、語法說明

合并運(yùn)算符由兩個(gè)問號組成：

變量 ?? 默認(rèn)值

該運(yùn)算符的邏輯是：如果左側(cè)的值是 null 或 undefined，則返回右側(cè)的默認(rèn)值；否則返回左側(cè)的值本身。

?? 注意：與邏輯或運(yùn)算符（||）不同，??不會將 0、false 或空字符串 "" 視為“空值”。

二、實(shí)用示例

示例 1：函數(shù)中的默認(rèn)值設(shè)置

以下函數(shù)通過 Nullish 合并運(yùn)算符為 input 參數(shù)設(shè)置了默認(rèn)值 100：

function displayValue(input?: number) {
  const value = input ?? 100;
  console.log(value);
}
displayValue();     // 輸出 100
displayValue(50);   // 輸出 50

在 displayValue() 中未傳入?yún)?shù)，input 是 undefined，因此使用了默認(rèn)值 100。而在傳入 50 時(shí)，使用的是實(shí)際值。

示例 2：對象屬性默認(rèn)值設(shè)置（常用于 JSON）

當(dāng)從 JSON 或其他外部數(shù)據(jù)源獲取對象時(shí)，某些字段可能缺失?？梢允褂??? 為這些屬性設(shè)定默認(rèn)值。

interface Settings {
  volume?: number;
  brightness?: number;
}
const userSettings: Settings = {
  volume: 0
};
const volume = userSettings.volume ?? 50;
const brightness = userSettings.brightness ?? 75;
console.log(`Volume: ${volume}`);         // 輸出 Volume: 0
console.log(`Brightness: ${brightness}`); // 輸出 Brightness: 75

volume 的值為 0，雖然是假值，但不是 null 或 undefined，因此不會使用默認(rèn)值 50。
brightness 沒有定義，因此使用了默認(rèn)值 75。

三、瀏覽器支持情況

Nullish 合并運(yùn)算符在大多數(shù)現(xiàn)代瀏覽器中已經(jīng)得到支持：

• ? Google Chrome 80+
• ? Microsoft Edge 80+
• ? Firefox 72+
• ? Safari 13.1+
• ? Opera 67+

?? TypeScript 會將 ?? 編譯為兼容 JavaScript 語法，確保在較老環(huán)境中依然可運(yùn)行（需配置合適的編譯目標(biāo)）。

四、總結(jié)

合并運(yùn)算符（??）是 TypeScript 中處理 null 與 undefined 值的利器，特別適合用于：

• 函數(shù)參數(shù)默認(rèn)值
• 對象屬性默認(rèn)值
• 用戶配置合并

它使得代碼更加健壯，避免不必要的類型判斷。是開發(fā)現(xiàn)代前端和后端應(yīng)用時(shí)不可或缺的一部分。

如果你正在使用 TypeScript 開發(fā)項(xiàng)目，建議立刻開始使用 ?? 運(yùn)算符，讓你的代碼更簡潔，更可控！

到此這篇關(guān)于TypeScript 中合并運(yùn)算符??的文章就介紹到這了,更多相關(guān)TypeScript 合并運(yùn)算符內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論