前言

在項(xiàng)目中我們往往要做很多很多的空值判斷進(jìn)行容錯(cuò)處理,往往伴隨著三目運(yùn)算、與或、if else來(lái)使用,不僅要寫(xiě)很多冗余的代碼,后期維護(hù)起來(lái)也是滿屏的if else可以說(shuō)是非常的痛苦了.今天分享幾個(gè)處理空值簡(jiǎn)單的方法,希望可以解決大家的一些問(wèn)題.

可選鏈(.?)

如果一個(gè)值為null、或者是undefined.那么我們?cè)偃ビ命c(diǎn)操作符去調(diào)用一個(gè)方法或者訪問(wèn)一個(gè)屬性會(huì)發(fā)生什么?

let a;
let b = a.name;

如果是上面的這樣的代碼,那么我們能得到一個(gè)報(bào)錯(cuò)

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

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

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

let a;
let b = a?.name;

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

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

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

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

空值合并運(yùn)算符(??)

有了上面的例子,接下來(lái)我們簡(jiǎn)單一點(diǎn),直接上舉例

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

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

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

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

b = a ?? c;

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

空值賦值運(yùn)算符(??=)

和上面的例子類似

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

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

趣味問(wèn)答時(shí)間:

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

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

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

哈哈一堆的問(wèn)號(hào).

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

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") ?// ?空值

最后

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

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

最新評(píng)論