JavaScript中.?、??、??=的用法及含義是什么

今天小編給大家分享一下JavaScript中.?、??、??=的用法及含義是什么的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

可選鏈(.?)

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

let a;
let b = a.name;

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

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

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

只有當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 = { 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'

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

趣味問答時間:

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

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

結果是什么呢???

哈哈一堆的問號.

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

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

以上就是“JavaScript中.?、??、??=的用法及含義是什么”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。