狠狠色丁香婷婷综合尤物/久久精品综合一区二区三区/中国有色金属学报/国产日韩欧美在线观看 - 国产一区二区三区四区五区tv

LOGO OA教程 ERP教程 模切知識交流 PMS教程 CRM教程 開發(fā)文檔 其他文檔  
 
網(wǎng)站管理員

JavaScript 中處理 `null` 和 `undefined` 的演進

admin
2024年12月24日 22:15 本文熱度 249

在 JavaScript 引入可選鏈(optional chaining)和空值合并運算符(nullish coalescing operator)之前,開發(fā)者需要使用多種方法來安全地訪問對象的嵌套屬性以及處理可能為 null 或 undefined 的值。這些方法雖然有效,但存在一些痛點。ES2020 引入的可選鏈和空值合并運算符則極大地簡化了這些問題的處理。

1. 使用邏輯與運算符 (&&)

在早期,判斷對象是否包含某個屬性并且該屬性不是 null 或 undefined,通常使用邏輯與運算符:

var value = obj && obj.prop;

但這種方法僅適用于一層屬性檢查,對于深層次的嵌套屬性,代碼會變得冗長且難以維護。

2. 使用邏輯或運算符 (||)

為了提供一個默認值,當變量可能是 null 或 undefined 時,可以使用邏輯或運算符:

var value = obj && obj.prop || defaultValue;

這種方式不僅會在 null 和 undefined 時返回 defaultValue,還會在 false0'' (空字符串) 等其他假值情況下返回 defaultValue,這可能導致不期望的行為。

3. 嵌套檢查

對于更深層次的嵌套屬性,需要進行多層檢查以確保每一層都不是 null 或 undefined

var value = obj && obj.level1 && obj.level1.level2 && obj.level1.level2.level3;

盡管可以這樣使用,但代碼會變得冗長、難以閱讀,并且容易出錯。每次添加或修改屬性層級時都需要調(diào)整代碼。

當對象嵌套層級較深或者屬性可能不存在時,我們需要進行一系列的條件判斷來避免程序報錯。為了簡化這些復雜的邏輯,JavaScript 引入了兩個非常實用的操作符:可選鏈操作符(?.) 和 空值合并操作符(??)。今天介紹下這兩個操作符的使用方法以及它們背后的原理。

什么是可選鏈操作符(?.)

基本概念

可選鏈操作符(?.)用于簡化訪問嵌套對象的屬性或調(diào)用函數(shù)時的檢查過程。它允許我們在訪問可能為 null 或 undefined 的對象屬性時避免拋出錯誤。

使用場景

假設(shè)我們有一個用戶對象 user,其中包含地址信息 address,而地址信息中又包含城市信息 city

const user = {
   address: {
       city: "Beijing"
   }
};

如果我們直接訪問 user.address.city,這是安全的。但如果 user.address 不存在,則會拋出錯誤。這時我們可以使用可選鏈操作符來避免這種情況:

console.log(user.address?.city); // 輸出 "Beijing"
console.log(user.unknown?.city); // 輸出 undefined

工作原理

當使用可選鏈操作符時,如果左側(cè)的操作數(shù)為 null 或 undefined,則整個表達式的值立即變?yōu)?nbsp;undefined,而不會繼續(xù)嘗試訪問右側(cè)的屬性或調(diào)用方法。

console.log(null?.prop); // 輸出 undefined
console.log(undefined?.prop); // 輸出 undefined

空值合并操作符(??)

基本概念

空值合并操作符(??)用于提供一個默認值給一個可能為 null 或 undefined 的變量。它只會在操作數(shù)為 null 或 undefined 時返回右側(cè)的值,否則返回左側(cè)的操作數(shù)。

在以往,

var value = obj && obj.prop || defaultValue;

但是要注意,這種方式不僅會在 null 和 undefined 時返回 defaultValue,也會在 false0'' (空字符串) 等其他假值情況下返回 defaultValue,這可能不是你想要的行為。

使用場景

當我們希望為某個變量設(shè)置一個默認值時,可以使用空值合并操作符。例如,假設(shè)我們有一個可能為空的字符串變量 name,我們希望在它為空時使用一個默認名字:

let name = null;
const defaultName = "Guest";
console.log(name ?? defaultName); // 輸出 "Guest"

工作原理

空值合并操作符僅在左側(cè)的操作數(shù)為 null 或 undefined 時返回右側(cè)的操作數(shù),否則返回左側(cè)的操作數(shù)。這使得我們可以優(yōu)雅地處理缺失數(shù)據(jù)的情況。

console.log(null ?? "default"); // 輸出 "default"
console.log(undefined ?? "default"); // 輸出 "default"
console.log("Hello" ?? "default"); // 輸出 "Hello"

結(jié)合使用

在實際開發(fā)中,我們經(jīng)常需要結(jié)合使用這兩種操作符來處理復雜的數(shù)據(jù)結(jié)構(gòu)。例如,我們可能需要從一個深度嵌套的對象中獲取一個值,并為其提供一個默認值:

const user = {
   address: {
       city: null
   }
};

const cityName = user.address?.city ?? "Unknown City";
console.log(cityName); // 輸出 "Unknown City"

在這個例子中,首先使用可選鏈操作符檢查 user.address.city 是否存在,如果不存在則返回 undefined。然后,空值合并操作符確保最終結(jié)果是 "Unknown City" 而不是 undefined

通過使用可選鏈操作符和空值合并操作符,我們可以大大簡化對可能為 null 或 undefined 的數(shù)據(jù)的處理邏輯,使代碼更加簡潔和易于維護。這兩種操作符在處理復雜對象和默認值時提供了強大的支持,是現(xiàn)代JavaScript開發(fā)中的重要工具。


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