一、核心概念

1. 作用
   當(dāng)左側(cè)表達(dá)式為 null 或 undefined 時(shí)，返回右側(cè)的默認(rèn)值；否則返回左側(cè)的值。

2. 與 || 的區(qū)別

   • || 會對 所有假值（如 0、''、false、NaN）觸發(fā)默認(rèn)值。
   • ?? 僅對 null 或 undefined 觸發(fā)默認(rèn)值，保留其他假值的語義。

   console.log(0 || 5);    // 5（0 是假值）
   console.log(0 ?? 5);    // 0（0 不是 null/undefined）
   

二、語法規(guī)則

leftExpr ?? rightExpr

• 短路特性：若 leftExpr 不是 null/undefined，直接返回左側(cè)值，不計(jì)算右側(cè)。
• 優(yōu)先級：低于 || 和 &&，但高于三元運(yùn)算符 ? :。建議用 () 明確優(yōu)先級。

三、使用場景

1. 變量默認(rèn)值

const userInput = null;
const name = userInput ?? "Anonymous"; // "Anonymous"

2. 函數(shù)參數(shù)默認(rèn)值

function greet(message) {
  const text = message ?? "Hello";
  console.log(text);
}
greet(null);    // "Hello"
greet(undefined); // "Hello"
greet("");      // ""（保留空字符串）

3. 對象屬性安全訪問

const config = {
  apiUrl: null,
  timeout: 0
};

const url = config.apiUrl ?? "https://default.api";
const timeout = config.timeout ?? 5000; // 0 被保留

4. 結(jié)合可選鏈?.使用

const user = {
  profile: null
};
const username = user?.profile?.name ?? "Guest"; // "Guest"

四、進(jìn)階用法

1. 多級空值合并

const a = null;
const b = undefined;
const c = "Fallback";
const result = a ?? b ?? c; // "Fallback"

2. 與解構(gòu)賦值結(jié)合

const settings = { theme: null };
const { theme = "light", fontSize = 16 } = settings;
// theme 使用 ?? 邏輯，fontSize 使用 = 默認(rèn)值

3. 動(dòng)態(tài)默認(rèn)值

let defaultPort;
const port = process.env.PORT ?? (defaultPort = 3000);

五、注意事項(xiàng)

1. 不可直接用于未聲明的變量

   // 錯(cuò)誤示例（需確保變量已聲明）
   const value = undeclaredVar ?? 10; // ReferenceError
   

2. 與 || 混用時(shí)的優(yōu)先級

   const a = null || undefined ?? "default"; // SyntaxError
   const b = (null || undefined) ?? "default"; // "default"
   

3. 瀏覽器兼容性

   • 支持 ES2020+ 的環(huán)境（Chrome 80+, Firefox 72+, Node.js 14+）。
   • 舊環(huán)境需通過 Babel 插件 @babel/plugin-proposal-nullish-coalescing-operator 轉(zhuǎn)譯。

六、性能優(yōu)化

• 避免重復(fù)計(jì)算：若右側(cè)是復(fù)雜表達(dá)式，用函數(shù)封裝避免副作用。

  const value = input ?? computeDefault(); // computeDefault() 僅在需要時(shí)執(zhí)行
  

七、替代方案（舊代碼兼容）

// 使用三元運(yùn)算符模擬 ??
const value = (left !== null && left !== undefined) ? left : right;

總結(jié)

掌握 ?? 能顯著提升代碼可讀性，尤其在處理 API 響應(yīng)、配置項(xiàng)等場景時(shí)，能更精準(zhǔn)地控制默認(rèn)值邏輯。

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

最新評論