js中的用法和含義

前言

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

如果乙個值為null、或者是undefined.那麼我們再去用點操作符去呼叫乙個方法或者訪問乙個屬性會發生什麼?

let a;
let b = a.name;

如果是上面的這樣的**,那麼我們能得到乙個報錯

其實這種情況就相當於直接在undefined上面訪問name屬性.undefined和null是兩個比較特殊的資料型別,是不能用點操作符去訪問屬性的.那麼在乙個變數可能為null、或者undefined的時候,恰巧我又需要訪問這個變數的乙個屬性,那我們應該這樣做

let a;
let b;
if(!!a)else

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

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(「還是不報錯」)

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

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

let b;
let a = 0;
let c = 
if(!!a || a === 0 )else

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

let b;
let a = 0;
let c = 
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'

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

let a;
let b = "不知名前端"
let c = null;
let d = 0;
let e;
e ??= a?.b ?? c ?? d?.a ?? b;
console.log(e)

結果是什麼呢???

哈哈一堆的問號.

js中 的用法和含義