午夜视频在线观看区二区-午夜视频在线观看视频-午夜视频在线观看视频在线观看-午夜视频在线观看完整高清在线-午夜视频在线观看网站-午夜视频在线观看亚洲天堂

LOGO OA教程 ERP教程 模切知識交流 PMS教程 CRM教程 開發文檔 其他文檔  
 
網站管理員

JavaScript雙問號操作符(??)的驚人用法,太強大了

admin
2025年3月8日 16:28 本文熱度 156

JavaScript作為一門不斷發展的語言,總是在引入新特性來解決開發者的痛點。其中,ES2020引入的空值合并操作符(Nullish Coalescing Operator),即雙問號操作符(??),是一個簡單卻極其強大的工具,徹底改變了我們處理默認值和空值的方式。

基本概念:什么是??操作符

雙問號操作符(??)是一個邏輯操作符,當左側操作數為nullundefined時,返回右側操作數,否則返回左側操作數。這看似簡單,但與我們常用的邏輯或操作符(||)有著本質區別。

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

??與||的關鍵區別

在了解??操作符的強大之前,我們需要理解它與||操作符的區別:

// 使用||
const count = userCount || 10;  // 當userCount為0時,count將為10

// 使用??
const count = userCount ?? 10;  // 當userCount為0時,count將為0

||操作符會將所有"假值"(如0、''、falseNaN等)都視為需要使用默認值的情況,而??操作符只在值為nullundefined時才使用默認值。

實際應用

1. 表單處理中的默認值

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

2. 配置對象的深層默認值

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

const userConfig = {};

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

3. API響應處理

4. 鏈式默認值

??操作符可以鏈式使用,創建一個"默認值瀑布":

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

當與可選鏈操作符(?.)結合使用時,處理復雜嵌套對象變得異常優雅:

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

這行代碼可以安全地深入訪問一個可能不存在的嵌套屬性,并在任何一層為null或undefined時提供默認值。

6. 條件性執行函數

// 僅當handler存在時才執行,否則使用默認處理函數
(customHandler ?? defaultHandler)(event);

7. 數組元素的默認值處理

高級技巧

結合解構賦值

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

這個模式不僅能處理employee為null/undefined的情況,還為解構出的個別屬性提供默認值。

在類中使用

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

性能考慮

??操作符不僅語法簡潔,在某些情況下還能帶來性能優勢。由于它只檢查null和undefined,比||操作符的類型轉換操作更高效。

雙問號操作符(??)雖然看似簡單,卻解決了JavaScript中一個長期存在的痛點:如何正確處理"空值"與"假值"的區別。


閱讀原文:原文鏈接


該文章在 2025/3/10 14:55:14 編輯過
關鍵字查詢
相關文章
正在查詢...
點晴ERP是一款針對中小制造業的專業生產管理軟件系統,系統成熟度和易用性得到了國內大量中小企業的青睞。
點晴PMS碼頭管理系統主要針對港口碼頭集裝箱與散貨日常運作、調度、堆場、車隊、財務費用、相關報表等業務管理,結合碼頭的業務特點,圍繞調度、堆場作業而開發的。集技術的先進性、管理的有效性于一體,是物流碼頭及其他港口類企業的高效ERP管理信息系統。
點晴WMS倉儲管理系統提供了貨物產品管理,銷售管理,采購管理,倉儲管理,倉庫管理,保質期管理,貨位管理,庫位管理,生產管理,WMS管理系統,標簽打印,條形碼,二維碼管理,批號管理軟件。
點晴免費OA是一款軟件和通用服務都免費,不限功能、不限時間、不限用戶的免費OA協同辦公管理系統。
Copyright 2010-2025 ClickSun All Rights Reserved

主站蜘蛛池模板: 高清无码在线观看越南专区 | 国产一区二区三区高潮老年人 | 91preon国产在线观看 | 大香蕉日韩一区二区三区 | 国产欧美成人xxx视频 | 国产成人无码a区在线观看视频免费 | 国产精品精品一级av片免费 | 国产精品不卡无码av在线播 | 国产成a人片在线观看网站 国产成a人亚洲精ⅴ品无码性色 | 国产女人喷水视频在线观看 | 国产激情无码av片免费看 | 国产超高清麻豆精品传媒麻豆精品 | 国产无你高清在线观看av | 国产熟女亚洲精品麻豆 | 国产福利视频 | 91麻豆国产高清产精品第一页 | 成人黄色大片 | 国产v无码专区亚洲v桃花庵 | 成人国内精品久久久久一区 | 丰满人妻无码aⅴ一区二区 丰满人妻系列无码专区 | 国产欧美二区三区 | 精品人妻av综合一区二区 | 精品国产a毛片久久久av蜜桃 | 国产三级国产经典国产av | 91精品国产91久久久久福利 | 国产美女被遭高潮免费网站 | 精品亚洲日韩国产成人av在线 | 国产熟女高潮视频 | 国产大学生喷水流白浆视频 | 成人免费aⅴ视频一区二区 成人免费aa片 | 岛国av无码免费无禁网站麦芽 | 国产精品无码一区二区三区在 | 国产自产视频在线观看香蕉 | 精品久久久久久无码专区不卡 | 国产福利电影 | 国产呦精品一区二区三区图片 | 精品国产高清在线看国产 | 国产专区自拍 | 91精品国产成人久久久久久 | av男人的天堂在线观看第三区 | av潮喷大喷水系列无码番号 |