ES2020鏈判斷運算符?.和Null判斷運算符??

鏈判斷運算符 ?. 

業務場景：

// 假設data是個數組，如果data沒有值，為undefinded，則直接復制會報錯，因為沒有length這個屬性

const dateCount = data.length // 報錯

// 正常的處理情況是，加個判斷
if (data) {
    const dateCount = data.length
}


// 使用鏈判斷符，就可一步到位
const dataCount = data?.length  // data不存在時，直接返回undefined

上面代碼使用了?.運算符，直接在鏈式調用的時候判斷，左側的對象是否為null或undefined。如果是的，就不再往下運算，而是返回undefined。

這樣好像沒有鏈的感覺，再舉個例子

const name = (data && data.person && data.person.name) || 'no name'
// 這樣的判斷機制非常麻煩

// 使用鏈判斷符
const name = data?.Person?.Name || 'no name'
// 非常精簡

注意點：

一、短路

a?.[++x]
// 等同於
a == null ? undefined : a[++x]

// 假如為Ture，右側永不執行

由於短路的機制，使用delete運算符時，如果為true，則無法執行。

二、括號影響

const name = (data?.person).name
// 不管data是否為空，.name一定會執行，所以不推薦使用鏈運算符的時候使用括號

三、右側不能是十進制數值

這是為了兼容三元與運算符。a ? .3 : 0,如果按照?.作為鏈運算符的話，就會沖突到

四、禁止場合

1、禁止在構造函數（new）的時候使用

2、？.右側有模板字符串``

3、?.左側是super

4、?.用於賦值運算的左側。（右側可）

 

null 判斷運算符？？

業務場景：

設置變量默認值的時候，正常使用||進行賦值。

const name = data.name || 'tom'

原意是data,name為空，則使用tom這個默認值，但是如果data.name為false或者0, 默認值也會生效

 const name = data.name ?? 'tom' 

使用??來處理，則data.name必須是null或者undefined時，才會使用默認值