2023-04-04 整理js中!、!!、.?、??、??=、的用法和含義

!和 !! 的區(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;

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


image.png

其實這種情況就相當于直接在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

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 227,488評論 6 531
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 98,034評論 3 414
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 175,327評論 0 373
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,554評論 1 307
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,337評論 6 404
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 54,883評論 1 321
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 42,975評論 3 439
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 42,114評論 0 286
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 48,625評論 1 332
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 40,555評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,737評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,244評論 5 355
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 43,973評論 3 345
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,362評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,615評論 1 280
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,343評論 3 390
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,699評論 2 370

推薦閱讀更多精彩內(nèi)容