快捷導(dǎo)航

JavaScript雙問(wèn)號(hào)操作符(??)的驚人用法總結(jié)大全

更新時(shí)間：2025年06月30日 11:39:51 投稿：daisy

雙問(wèn)號(hào)操作符是ES2020引入的一個(gè)用于處理變量默認(rèn)值的新特性,與傳統(tǒng)的邏輯或操作符||不同,這篇文章主要介紹了JavaScript雙問(wèn)號(hào)操作符(??)詳解及如何解決使用||時(shí)因類(lèi)型轉(zhuǎn)換帶來(lái)的問(wèn)題,需要的朋友可以參考下

前言

JavaScript作為一門(mén)不斷發(fā)展的語(yǔ)言，總是在引入新特性來(lái)解決開(kāi)發(fā)者的痛點(diǎn)。其中，ES2020引入的空值合并操作符（Nullish Coalescing Operator），即雙問(wèn)號(hào)操作符(??)，是一個(gè)簡(jiǎn)單卻極其強(qiáng)大的工具，徹底改變了我們處理默認(rèn)值和空值的方式。

1. 基本概念：什么是??操作符

雙問(wèn)號(hào)操作符(??)是一個(gè)邏輯操作符，當(dāng)左側(cè)操作數(shù)為null或undefined時(shí)，返回右側(cè)操作數(shù)，否則返回左側(cè)操作數(shù)。這看似簡(jiǎn)單，但與我們常用的邏輯或操作符(||)有著本質(zhì)區(qū)別。

const value1 = null ?? 'default';        // 'default'
const value2 = undefined ?? 'default';    // 'default'
const value3 = false ?? 'default';        // false
const value4 = 0 ?? 'default';            // 0
const value5 = '' ?? 'default';           // ''

2. ??與||的關(guān)鍵區(qū)別

在了解??操作符的強(qiáng)大之前，我們需要理解它與||操作符的區(qū)別：

// 使用||
const count = userCount || 10;  // 當(dāng)userCount為0時(shí)，count將為10

// 使用??
const count = userCount ?? 10;  // 當(dāng)userCount為0時(shí)，count將為0

||操作符會(huì)將所有"假值"（如0、''、false、NaN等）都視為需要使用默認(rèn)值的情況，而??操作符只在值為null或undefined時(shí)才使用默認(rèn)值。

3. 實(shí)際應(yīng)用

(1) 表單處理中的默認(rèn)值

function processForm(data) {
  // 只有當(dāng)值真正缺失時(shí)才使用默認(rèn)值
  const username = data.username ?? 'guest';
  const items = data.items ?? [];
  const quantity = data.quantity ?? 1;  // 允許quantity為0
  
  // 處理表單邏輯...
}

(2) 配置對(duì)象的深層默認(rèn)值

const config = {
  server: {
    port: 0,  // 有效值，但為"假值"
    host: ''  // 有效值，但為"假值"
  }
};

const userConfig = {};

// 正確處理深層配置
const port = userConfig?.server?.port ?? config.server.port;  // 0
const host = userConfig?.server?.host ?? config.server.host;  // ''

(3) API響應(yīng)處理

(4) 鏈?zhǔn)侥J(rèn)值

??操作符可以鏈?zhǔn)绞褂茫瑒?chuàng)建一個(gè)"默認(rèn)值瀑布"：

(5) 與可選鏈操作符(?.)完美配合

當(dāng)與可選鏈操作符(?.)結(jié)合使用時(shí)，處理復(fù)雜嵌套對(duì)象變得異常優(yōu)雅：

const userName = user?.profile?.preferences?.displayName ?? 'Guest';

這行代碼可以安全地深入訪問(wèn)一個(gè)可能不存在的嵌套屬性，并在任何一層為null或undefined時(shí)提供默認(rèn)值。

(6) 條件性執(zhí)行函數(shù)

// 僅當(dāng)handler存在時(shí)才執(zhí)行，否則使用默認(rèn)處理函數(shù)
(customHandler ?? defaultHandler)(event);

(7) 數(shù)組元素的默認(rèn)值處理

4. 高級(jí)技巧

(1) 結(jié)合解構(gòu)賦值

const { name, age, title = 'Developer', company = 'Unknown' } = employee ?? {};

這個(gè)模式不僅能處理employee為null/undefined的情況，還為解構(gòu)出的個(gè)別屬性提供默認(rèn)值。

(2) 在類(lèi)中使用

class UserPreferences {
  constructor(settings) {
    this.theme = settings?.theme ?? 'light';
    this.fontSize = settings?.fontSize ?? 16;
    this.notifications = settings?.notifications ?? true;
    
    // 即使settings.volume為0也會(huì)被保留
    this.volume = settings?.volume ?? 0.5;
  }
}

5. 性能考慮

??操作符不僅語(yǔ)法簡(jiǎn)潔，在某些情況下還能帶來(lái)性能優(yōu)勢(shì)。由于它只檢查null和undefined，比||操作符的類(lèi)型轉(zhuǎn)換操作更高效。

雙問(wèn)號(hào)操作符(??)雖然看似簡(jiǎn)單，卻解決了JavaScript中一個(gè)長(zhǎng)期存在的痛點(diǎn)：如何正確處理"空值"與"假值"的區(qū)別。

總結(jié)

到此這篇關(guān)于JavaScript雙問(wèn)號(hào)操作符(??)驚人用法的文章就介紹到這了,更多相關(guān)JS 雙問(wèn)號(hào)操作符??用法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: