JS使用可選鏈操作符 (?.) 進(jìn)行空值檢查的操作
傳統(tǒng)空值檢
假設(shè)我們有一個(gè)嵌套的對(duì)象結(jié)構(gòu)，想要訪問 user.address.city，但不確定 user、address 或 city 是否存在。傳統(tǒng)的空值檢查方法如下：
let city = null;
if (user && user.address && user.address.city) {
city = user.address.city;
}
// let city = user ? (user.address ? user.address.city : null) : null;
這些方法不僅冗長(zhǎng)，而且容易出錯(cuò).
使用可選鏈操作符 (?.)
可選鏈操作符 (?.) 提供了一種更簡(jiǎn)潔的方式來處理這些情況。它允許我們?cè)谠L問對(duì)象屬性之前檢查對(duì)象是否存在，從而避免運(yùn)行時(shí)錯(cuò)誤。
基本用法
let city = user?.address?.city;
如果 user 或 address 為 null 或 undefined，整個(gè)表達(dá)式會(huì)短路并返回 undefined，而不會(huì)拋出錯(cuò)誤。
示例
假設(shè)我們有以下對(duì)象結(jié)構(gòu)：
const user = {
name: "Alice",
address: {
street: "123 Main St",
city: "Wonderland"
}
};
使用可選鏈操作符訪問 city：
let city = user?.address?.city; // "Wonderland" let country = user?.address?.country; // undefined
處理數(shù)組
const users = [
{ name: "Alice", age: 25 },
{ name: "Bob", age: 30 }
];
let secondUserAge = users[1]?.age; // 30
let thirdUserAge = users[2]?.age; // undefined
結(jié)合函數(shù)調(diào)用
const obj = {
method: function() {
return "Hello";
}
};
let result = obj?.method(); // "Hello"
let nonExistentResult = obj?.nonExistentMethod(); // undefined
優(yōu)點(diǎn)
- 簡(jiǎn)潔性: 減少了代碼量，提高了可讀性。
- 安全性: 避免了因訪問不存在的屬性而導(dǎo)致的運(yùn)行時(shí)錯(cuò)誤。
- 靈活性: 可以方便地處理復(fù)雜的嵌套結(jié)構(gòu)
總結(jié)
可選鏈操作符 (?.) 是 ES2020 引入的一個(gè)強(qiáng)大特性，它簡(jiǎn)化了空值檢查的過程，提高了代碼的安全性和可讀性。在現(xiàn)代 JavaScript 開發(fā)中，合理使用可選鏈操作符可以顯著減少潛在的錯(cuò)誤，并使代碼更加簡(jiǎn)潔優(yōu)雅。
注意事項(xiàng)
可選鏈操作符只能用于訪問屬性或調(diào)用方法，不能用于賦值。 在某些舊版本的瀏覽器或環(huán)境中可能不支持，需要使用 Babel 等工具進(jìn)行轉(zhuǎn)譯。
到此這篇關(guān)于JS使用可選鏈操作符 (?.) 進(jìn)行空值檢查的操作的文章就介紹到這了,更多相關(guān)JS可選鏈操作符空值檢內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本文對(duì)JavaScript中對(duì)象的本質(zhì)、對(duì)象與類的關(guān)系、對(duì)象與引用類型的關(guān)系;對(duì)象屬性如何進(jìn)行分類;屬性中特性進(jìn)行介紹。感興趣的朋友可以看下2016-12-12
Javascript中匿名函數(shù)的多種調(diào)用方式總結(jié)
這篇文章主要是對(duì)Javascript中匿名函數(shù)的多種調(diào)用方式進(jìn)行了詳細(xì)的總結(jié)介紹。需要的朋友可以過來參考下，希望對(duì)大家有所幫助2013-12-12
這篇文章主要為大家詳細(xì)介紹了bootstrap select下拉搜索插件的使用方法，動(dòng)態(tài)加載自己數(shù)據(jù)的二級(jí)聯(lián)動(dòng)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
JavaScript判斷是否為數(shù)字的幾種方式匯總(推薦!)
有時(shí)候需要根據(jù)輸入的內(nèi)容來進(jìn)行計(jì)算,這個(gè)時(shí)候就需要判斷輸入的內(nèi)容是否是數(shù)字,下面這篇文章主要給大家介紹了關(guān)于JavaScript判斷是否為數(shù)字的幾種方式,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06
behaviors是小程序中，用于實(shí)現(xiàn)組件間代碼共享的特性，類似于 Vue.js 中的 “mixins”，這篇文章主要介紹了微信小程序組件通信和behavior使用,需要的朋友可以參考下2022-08-08
詳解webpack的clean-webpack-plugin插件報(bào)錯(cuò)
這篇文章主要介紹了詳解webpack的clean-webpack-plugin插件報(bào)錯(cuò)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10
HTML<video>元素用于在HTML或者XHTML文檔中嵌入媒體播放器,用于支持文檔內(nèi)的視頻播放,你也可以將<video>標(biāo)簽用于音頻內(nèi)容,在前端中實(shí)現(xiàn)音頻和視頻播放通常涉及使用HTML5的<audio>和<video>元素以及JavaScript來控制這些媒體元素的播放、暫停、音量等屬性2023-10-10
眾所周知，剛剛開源的「鴻蒙 2.0」以 JavaScript 作為 IoT 應(yīng)用開發(fā)的框架語(yǔ)言。作為科普，這篇文章不會(huì)拿著放大鏡找出代碼中的槽點(diǎn)來吹毛求疵，而是希望通俗地講清楚它所支持的 GUI 到底是怎么一回事。2020-09-09
如何根據(jù)百度地圖計(jì)算出兩地之間的駕駛距離(兩種語(yǔ)言js和C#)
本文給大家介紹分別使用js和c#兩種語(yǔ)言實(shí)現(xiàn)根據(jù)百度地圖計(jì)算出兩地之間的駕駛距離，需要用戶指定出發(fā)城市和到達(dá)城市。對(duì)百度地圖計(jì)算兩地距離感興趣的朋友可以參考下本篇文章2015-10-10
上一篇的目的只是讓大家簡(jiǎn)單的理解自定事件是如何模擬出來的，大家不難發(fā)現(xiàn)會(huì)有很多缺陷,本篇主要已解決上一篇的問題為主，感興趣的朋友可以參考，或許本文對(duì)你有所幫助2013-02-02