ES2020新特性

1. 可選鏈操作符

• 可選鏈操作符 ?. 可以按照操作符之前的屬性是否有效，鏈式讀取對象的屬性或者使整個對象鏈返回 undefined。
• ?. 運算符的作用與 . 運算符類似，不同之處在於，如果對象鏈上的引用是 nullish (null 或者 undefined)，. 操作符會拋出一個錯誤，而 ?. 操作符則會按照短路計算的方式進行處理，返回 undefined。
• 可選鏈操作符也可用於函數調用，如果操作符前的函數不存在，也將會返回 undefined。

應用

在這之前，針對一個對象：obj。查找一個深度嵌套的子屬性時，需要使用如下方式取值：

const nestedProp = obj && obj.first && obj.first.second;

為了避免報錯，在訪問obj.first.second之前，要保證 obj.first 的值既不是 null，也不是 undefined。如果只是直接訪問 obj.first.second，而不對 obj.first 進行校驗，則有可能拋出錯誤:

報錯： Uncaught TypeError: Cannot read property 'second' of undefined

有了可選鏈操作符（?.），在訪問 obj.first.second 之前，不再需要明確地校驗 obj.first 的狀態，再並用短路計算獲取最終結果：

let nestedProp = obj?.first?.second;

2. 空位合並操作符

當查詢某個屬性時，為防止該屬性為空通常會設置一個默認的值，比如下面兩種方式：

let c = a ? a : b // 方式1
let c = a || b // 方式2

這兩種方式有個明顯的弊端，它都會覆蓋所有的假值，如(0, '', false)，這些值可能是在某些情況下有效的輸入。

let x = {
  profile: {
    name: 'cedric',
    age: ''
  }
}
console.log(x.profile.age || 18) //18

上例中age的屬性為空字符串，卻被等同為假值。
為了解決這個問題，ES2020誕生了個新特性--空位合並操作符，用 ?? 表示。
如果表達式在??的左側運算符求值為 undefined 或 null，才會返回其右側默認值：

var a = null, b = false;
console.log(a ?? '默認值') // "默認值"
console.log(b ?? '測試') // false