前言

在項目中我們往往要做很多很多的空值判斷進行容錯處理,往往伴隨著三目運算、與或、if else來使用,不僅要寫很多冗余的代碼,后期維護起來也是滿屏的if else可以說是非常的痛苦了.今天分享幾個處理空值簡單的方法,希望可以解決大家的一些問題.

可選鏈(.?)

如果一個值為null、或者是undefined.那么我們再去用點操作符去調(diào)用一個方法或者訪問一個屬性會發(fā)生什么?

let a;
let b = a.name;

如果是上面的這樣的代碼,那么我們能得到一個報錯

其實這種情況就相當(dāng)于直接在undefined上面訪問name屬性.undefined和null是兩個比較特殊的數(shù)據(jù)類型,是不能用點操作符去訪問屬性的.那么在一個變量可能為null、或者undefined的時候,恰巧我又需要訪問這個變量的一個屬性,那我們應(yīng)該這樣做

let a;
let b;
if(!!a){
    b = a.name;
}else{
    b = undefined;
}

只有當(dāng)a存在的時候,我才會去訪問a的name屬性,如果你想再進一步處理,還可以繼續(xù)判斷以下a的數(shù)據(jù)類型.可是這不是我們今天的重點,就不多講了.我們可以看到,這樣一個簡單的邏輯,我們就要寫這么多的東西,那么有沒有簡單的寫法呢?看下面的例子

let a;
let b = a?.name;

我們終于看到.?這個東西了,其實這個就叫做可選鏈,表達的意思,就和剛才if else的例子是一個意思,只有當(dāng)a存在,同時a具有name屬性的時候,才會把值賦給b,否則就會將undefined賦值給b.重要的是,不管a存在與否,這么做都不會報錯.

當(dāng)然我們還可以這么干

let a;
let b;
b = a?.name?.age?.haha?.就是不報錯
a?.b?.c(“還是不報錯”)

我們看到,你后面可以無限接龍下去,不論有多少屬性,只要有最后可以訪問到屬性,訪問到最終的結(jié)果,就會賦值給b,否則,就把undefined賦值給b.(這樣才有資格叫鏈?zhǔn)浇Y(jié)構(gòu)嘛)

空值合并運算符(??)

有了上面的例子,接下來我們簡單一點,直接上舉例

let b;
let a = 0;
let c = { name:'buzhimingqianduan' }

if(!!a || a === 0 ){
?? ?b = a;
}else{
?? ?b = c;
}

對就是上面那個例子,當(dāng)我們想判斷一個值存在,但是它等于0的時候,我們也需要當(dāng)作它存在,于是就有了上面那樣的例子,其實我們還可以這樣做

let b;
let a = 0;
let c = { name:'buzhimingqianduan' }

b = a ?? c;

上面的例子,當(dāng)a除了undefined、或者null之外的任何值,b都會等于a,否則就等于c.

空值賦值運算符(??=)

和上面的例子類似

let b = '你好';
let a = 0
let c = null;
let d = '123‘
b ??= a;  // b = “你好”
c ??= d  // c = '123'

當(dāng)??=左側(cè)的值為null、undefined的時候,才會將右側(cè)變量的值賦值給左側(cè)變量.其他所有值都不會進行賦值.同樣在一些場景下,可以省略很多代碼.

趣味問答時間:

let a;
let b = "不知名前端"
let c = null;
let d = 0;
let e;

e ??= a?.b ?? c ?? d?.a ?? b;
console.log(e)

結(jié)果是什么呢???

哈哈一堆的問號.

值得注意的是 ：?? 是忽視 null ,undefined 等錯誤的值

var ibo = {}
console.log(ibo?.a ?? 111) // ?111
var ibo = {a:{b:1}}
console.log(ibo?.a?.b ?? 111) //1

console.log(1??'2') // ?1
console.log(null ?? "xx") // xx
undefined
console.log(undefined ?? "xx") // ?xx
console.log( ' '?? "xx") ?// ?空值

最后

希望對大家有用,如果方便的話,關(guān)注一下,后面我會分享更多前端相關(guān)的知識,如果有朋友有想了解的內(nèi)容,也可以私信我.后面我會找時間分享

到此這篇關(guān)于JavaScript中.?、??、??=的用法以及含義的文章就介紹到這了,更多相關(guān)js中.?、??、??=用法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論