聊聊JavaScript中.-、-、-=的用法以及含義

第聊聊JavaScript中.?、??、??=的用法以及含義目錄前言可選鏈(.)空值合并運算符()空值賦值運算符(=)趣味問答時間:值得注意的是：是忽視null,undefined等錯誤的值最后

前言

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

可選鏈(.)

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

leta;

letb=;

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

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

leta;

letb;

if(!!a){

b=;

}else{

b=undefined;

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

leta;

letb=;

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

當然我們還可以這么干

leta;

letb;

b=.age.haha.就是不報錯

a.b.c(“還是不報錯”)

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

空值合并運算符()

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

letb;

leta=0;

letc={name:'buzhimingqianduan'}

if(!!a||a===0){

b=a;

}else{

b=c;

}

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

letb;

leta=0;

letc={name:'buzhimingqianduan'}

b=ac;

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

空值賦值運算符(=)

和上面的例子類似

letb='你好';

leta=0

letc=null;

letd='123‘

b=a;//b=“你好”

c=d//c='123'

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

趣味問答時間:

leta;

letb="不知名前端"

letc=null;

letd=0;

lete;

e=a.bcd.ab;

console.log(e)

結果是什么呢

哈哈一堆的問號.

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

varibo={}

console.log(ibo.a111)//

111

varibo={a:{b:1}}

console.log(ibo.a.b111)//1

console.log(1'2')//

1

console.log(null"xx")//xx

undefined

console.log(undefined"xx")//

xx

consol