!和 !! 的區(qū)別用法
js中!的用法是比較靈活的,他除了做邏輯運算常常會用!做類型判斷,還可以用!與上對象來求得一個布爾值
1、!可將變量轉(zhuǎn)換成boolean類型,null、undefined和空字符串取反都為true,其余都為false
!null = true;
!undefined = true
!'' = true
!'aa' = false
2、!! 是將表達式強制轉(zhuǎn)化為boolean值運算,運算結(jié)果為true或者false,表達式是什么值,結(jié)果就是對應的bool值,不再取非,不是取非再取非的意思
!!false = false;
!!'false' = true
!!true = true
!!(NaN || undefined || null || 0) = false
var o = {flag: true};
var test = !!o.flag
等價于
var test = o.flag || false
由于對null和undefined 用!操作符時都會產(chǎn)生true的結(jié)果,所以用兩個感嘆號的作用就在于,如果明確設(shè)置了o中flag的值(非undefined/null/0)自然test就會取跟o.flag一樣的值;如果沒有設(shè)置,test就會默認為false,而不是null、undefined
可選鏈(.?)
如果一個值為null、或者是undefined.那么我們再去用點操作符去調(diào)用一個方法或者訪問一個屬性會發(fā)生什么?
下面展示一些 內(nèi)聯(lián)代碼片。
let a;
let b = a.name;
如果是上面的這樣的代碼,那么我們能得到一個報錯
其實這種情況就相當于直接在undefined上面訪問name屬性.undefined和null是兩個比較特殊的數(shù)據(jù)類型,是不能用點操作符去訪問屬性的.那么在一個變量可能為null、或者undefined的時候,恰巧我又需要訪問這個變量的一個屬性,那我們應該這樣做
下面展示一些 內(nèi)聯(lián)代碼片。
let a;
let b;
if(!!a){
b = a.name;
}else{
b = undefined;
}
只有當a存在的時候,我才會去訪問a的name屬性,如果你想再進一步處理,還可以繼續(xù)判斷以下a的數(shù)據(jù)類型.可是這不是我們今天的重點,就不多講了.我們可以看到,這樣一個簡單的邏輯,我們就要寫這么多的東西,那么有沒有簡單的寫法呢?看下面的例子
let a;
let b = a?.name;
我們終于看到.?這個東西了,其實這個就叫做可選鏈,表達的意思,就和剛才if else的例子是一個意思,只有當a存在,同時a具有name屬性的時候,才會把值賦給b,否則就會將undefined賦值給b.重要的是,不管a存在與否,這么做都不會報錯.
當然我們還可以這么干
let a;
let b;
b = a?.name?.age?.haha?.就是不報錯
a?.b?.c(“還是不報錯”)
我們看到,你后面可以無限接龍下去,不論有多少屬性,只要有最后可以訪問到屬性,訪問到最終的結(jié)果,就會賦值給b,否則,就把undefined賦值給b.(這樣才有資格叫鏈式結(jié)構(gòu)嘛)
空值合并運算符(??)
有了上面的例子,接下來我們簡單一點,直接上舉例
let b;
let a = 0;
let c = { name:'buzhimingqianduan' }
if(!!a || a === 0 ){
b = a;
}else{
b = c;
}
對就是上面那個例子,當我們想判斷一個值存在,但是它等于0的時候,我們也需要當作它存在,于是就有了上面那樣的例子,其實我們還可以這樣做
let b;
let a = 0;
let c = { name:'buzhimingqianduan' }
b = a ?? c;
上面的例子,當a除了undefined、或者null之外的任何值,b都會等于a,否則就等于c.
空值賦值運算符(??=)
和上面的例子類似
let b = '你好';
let a = 0
let c = null;
let d = ’123‘
b ??= a; // b = “你好”
c ??= d // c = '123'
當??=左側(cè)的值為null、undefined的時候,才會將右側(cè)變量的值賦值給左側(cè)變量.其他所有值都不會進行賦值.同樣在一些場景下,可以省略很多代碼
原文:https://blog.csdn.net/u012930360/article/details/126135019