快捷導航

ES 空值合并運算符??與可選鏈?.的使用小結(jié)

更新時間：2026年03月18日 09:19:14 作者：兆子龍

本文主要介紹了ES 空值合并運算符??與可選鏈?.的使用小結(jié),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧

一、為什么需要??和?.

在日常開發(fā)中，我們經(jīng)常需要處理變量可能為 null 或 undefined 的情況。傳統(tǒng)的做法是使用邏輯或運算符 || 來提供默認值，但這種做法有一個隱蔽的陷阱。

const count = 0;
const total = count || 10;
console.log(total); // 輸出 10，而不是預(yù)期的 0

上面的代碼中，count 的值是 0，這是一個有效的數(shù)值，但 || 會把它當作「假值」處理，返回默認值 10。這顯然不是我們想要的結(jié)果。

空值合并運算符 ?? 和可選鏈 ?. 的出現(xiàn)，正是為了解決這類問題。它們只會在值為 null 或 undefined 時才進行默認值的處理，而不會誤傷 0、false、'' 這樣的「假值」。

二、空值合并運算符??

2.1 基本用法

空值合并運算符 ?? 會在左側(cè)表達式值為 null 或 undefined 時返回右側(cè)的默認值，否則返回左側(cè)的值。

const count = 0;
const total = count ?? 10;
console.log(total); // 輸出 0，正確！

const name = null;
const displayName = name ?? 'Anonymous';
console.log(displayName); // 輸出 'Anonymous'

const age = undefined;
const userAge = age ?? 18;
console.log(userAge); // 輸出 18

2.2 與||的區(qū)別

讓我們通過一個對比表格來清晰展示兩者的區(qū)別：

| 左側(cè)值 | a ?? b 結(jié)果 | a || b 結(jié)果 | |--------|---------------|---------------| | null | b | b | | undefined | b | b | | 0 | 0 | b | | false | false | b | | '' | '' | b | | 'hello' | 'hello' | 'hello' |

從表格可以看出，?? 只會對 null 和 undefined 「過敏」，而 || 會對所有假值過敏。在需要保留 0、false、'' 這樣的有效值的場景下，?? 是更安全的選擇。

2.3 鏈式使用

?? 可以鏈式使用，但需要注意優(yōu)先級問題：

const a = null;
const b = undefined;
const c = 0;
const d = '';

const result1 = a ?? b ?? c ?? 'default';
console.log(result1); // 輸出 0

const result2 = a ?? b ?? d ?? 'default';
console.log(result2); // 輸出 ''

鏈式使用時，?? 會從左到右找到第一個非 null/undefined 的值就返回。

2.4 注意事項

?? 不能與 && 或 || 直接混用，需要使用括號明確優(yōu)先級：

// 錯誤寫法 - 會拋出 SyntaxError
const invalid = null || undefined ?? 'default';

// 正確寫法 - 使用括號明確優(yōu)先級
const valid1 = (null || undefined) ?? 'default';
const valid2 = null || (undefined ?? 'default');

三、可選鏈?.

3.1 基本用法

可選鏈運算符 ?. 允許你安全地訪問嵌套對象的屬性，即使中間某個屬性不存在也不會報錯。

const user = {
  name: 'Alice',
  address: {
    city: 'Beijing'
  }
};

// 傳統(tǒng)寫法 - 需要先判斷每一層
const city1 = user && user.address && user.address.city;

// 使用可選鏈 - 簡潔安全
const city2 = user?.address?.city;
console.log(city2); // 輸出 'Beijing'

// 訪問不存在的屬性
const country = user?.address?.country;
console.log(country); // 輸出 undefined，不會報錯

3.2 多種用法

可選鏈不僅可以用在屬性訪問上，還支持方法調(diào)用和數(shù)組索引：

// 方法調(diào)用
const result = obj?.method?.();

// 數(shù)組索引
const firstItem = arr?.[0];

// 動態(tài)屬性名
const value = obj?.[key];

3.3 實際應(yīng)用場景

在實際開發(fā)中，可選鏈特別適合處理以下場景：

// 1. 處理表單數(shù)據(jù)
const formData = {
  user: {
    profile: {
      name: 'Bob'
    }
  }
};

// 安全獲取用戶名，即使中間某層不存在
const userName = formData?.user?.profile?.name ?? 'Guest';

// 2. 處理 API 響應(yīng)
async function fetchUser() {
  const response = await fetch('/api/user');
  const data = await response.json();
  
  // 安全訪問嵌套數(shù)據(jù)
  const email = data?.user?.contact?.email ?? 'no-email';
  const avatar = data?.user?.profile?.avatar ?? '/default-avatar.png';
  
  return { email, avatar };
}

// 3. 處理可選的回調(diào)函數(shù)
function handleClick(event) {
  // 某些情況下 onClick 可能未定義
  event?.preventDefault?.();
  callback?.(event);
}

3.4 短路求值

可選鏈具有短路求值的特性：如果 ?. 左側(cè)的值為 null 或 undefined，右側(cè)的表達式不會被執(zhí)行。

const obj = null;
let count = 0;

// 不會執(zhí)行，因為 obj 為 null
const result = obj?.method(() => count++);

console.log(count); // 輸出 0，callback 沒有被執(zhí)行

這個特性在包含副作用的表達式中特別有用，可以避免不必要的函數(shù)調(diào)用。

四、組合使用?.??

?. 和 ?? 可以組合使用，處理更復(fù)雜的場景：

const config = {
  database: {
    host: null,
    port: 5432
  }
};

// 安全獲取數(shù)據(jù)庫配置，主機為空時使用默認值
const dbHost = config?.database?.host ?? 'localhost';
const dbPort = config?.database?.port ?? 3306;

console.log(dbHost); // 輸出 'localhost'
console.log(dbPort); // 輸出 5432

// 處理深層嵌套的配置對象
const settings = {
  ui: {
    theme: {
      colors: null
    }
  }
};

const primaryColor = settings?.ui?.theme?.colors?.primary ?? '#1890ff';
console.log(primaryColor); // 輸出 '#1890ff'

五、TypeScript 中的使用

在 TypeScript 中使用 ?? 和 ?. 時，類型系統(tǒng)能夠正確推斷出可能的類型：

interface User {
  name: string;
  address?: {
    city: string;
    zipCode?: string;
  };
}

const user: User = {
  name: 'Alice'
};

// 可選鏈返回 undefined 或 string，類型為 string | undefined
const city = user.address?.city;

// 空值合并確保最終類型為 string
const zipCode = user.address?.zipCode ?? '000000';

六、瀏覽器兼容性

截至 2026 年，?? 和 ?. 已經(jīng)在所有主流瀏覽器中得到支持，包括 Chrome、Firefox、Safari 和 Edge 的最新版本。對于需要兼容舊版瀏覽器的項目，可以使用 Babel 或 TypeScript 進行轉(zhuǎn)譯。

// .babelrc 或 babel.config.js
{
  "plugins": [
    "@babel/plugin-proposal-optional-chaining",
    "@babel/plugin-proposal-nullish-coalescing-operator"
  ]
}

七、常見誤區(qū)

第一個誤區(qū)是認為 ?? 可以完全替代 ||。實際上，|| 在需要區(qū)分「未設(shè)置」和「設(shè)置了假值」的場景下仍然有用。比如表單驗證中，空字符串可能是一個有效的輸入值。

第二個誤區(qū)是過度使用可選鏈。雖然可選鏈很方便，但在確定某屬性一定存在的情況下，使用普通屬性訪問（.）性能更好，代碼意圖也更清晰。

第三個誤區(qū)是在條件判斷中混用 ?? 和 &&/||。由于運算符優(yōu)先級不同，混用時必須使用括號來明確意圖。

總結(jié)

?? 和 ?. 是 ES2020 引入的兩個非常實用的語法糖。?? 解決了 || 在處理假值時的誤傷問題，?. 讓深層嵌套對象的訪問變得安全簡潔。合理使用這兩個特性，可以讓你的 JavaScript 代碼更加健壯和優(yōu)雅。

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

您可能感興趣的文章:

ES2020系列之空值合并運算符 ''??''

相關(guān)文章

微信小程序?qū)崿F(xiàn)點擊按鈕后修改顏色
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)點擊按鈕后修改顏色,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2019-12-12
全面解析JavaScript里的循環(huán)方法之forEach，for-in，for-of
這篇文章主要介紹了全面解析JavaScript里的循環(huán)方法之forEach，for-in，for-of的相關(guān)資料,非常不錯具有參考借鑒價值，需要的朋友可以參考下
2016-06-06
使用JavaScript 編寫簡單計算器
這篇文章主要介紹了使用JavaScript 編寫簡單計算器,需要的朋友可以參考下
2014-11-11
微信小程序?qū)崿F(xiàn)橫向增長表格的方法
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)橫向增長表格的方法,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下
2018-07-07
這篇文章主要介紹了JavaScript基礎(chǔ)教程之a(chǎn)lert彈出提示框?qū)嵗?本文重點在于講解了JavaScript基本語法、基本使用方法,需要的朋友可以參考下
2014-10-10