一、核心概念

1. 作用
   當左側表達式為 null 或 undefined 時，返回右側的默認值；否則返回左側的值。

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

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

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

二、語法規(guī)則

leftExpr ?? rightExpr

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

三、使用場景

1. 變量默認值

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

2. 函數參數默認值

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. 結合可選鏈?.使用

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

四、進階用法

1. 多級空值合并

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

2. 與解構賦值結合

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

3. 動態(tài)默認值

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

五、注意事項

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

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

2. 與 || 混用時的優(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 轉譯。

六、性能優(yōu)化

• 避免重復計算：若右側是復雜表達式，用函數封裝避免副作用。

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

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

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

總結

掌握 ?? 能顯著提升代碼可讀性，尤其在處理 API 響應、配置項等場景時，能更精準地控制默認值邏輯。

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

最新評論