​

一、可選連結運算子【？.】

可選連結運算子（Optional Chaining Operator） 處於ES2020提案的第4階段，因此應將其新增到規範中。它改變了訪問物件內部屬性的方式，尤其是深層巢狀的屬性。它也可以作為TypeScript 3.7+中的功能使用。

相信大部分開發前端的的小夥伴們都會遇到null和未定義的屬性。JS語言的動態特性使其無法不碰到它們。特別是在處理巢狀物件時，以下程式碼很常見：

if (data && data.children && data.children[0] && data.children[0].title) {
    // I have a title!
} 
 

上面的程式碼用於API響應，我必須解析JSON以確保名稱存在。但是，當物件具有可選屬性或某些配置物件具有某些值的動態對映時，可能會遇到類似情況，需要檢查很多邊界條件。

​

這時候，如果我們使用可選連結運算子，一切就變得更加輕鬆了。它為我們檢查巢狀屬性，而不必顯式搜尋梯形圖。我們所要做的就是使用“？” 要檢查空值的屬性之後的運算子。我們可以隨意在表示式中多次使用該運算子，並且如果未定義任何項，它將盡早返回。

對於靜態屬性用法是：

object?.property

對於動態屬性將其更改為：

object?.[expression] 

上面的程式碼可以簡化為：

let title = data?.children?.[0]?.title;
 

然後，如果我們有:

 let data;
console.log(data?.children?.[0]?.title) // undefined

data  = {children: [{title:'codercao'}]}
console.log(data?.children?.[0]?.title) // codercao

這樣寫是不是更加簡單了呢？由於操作符一旦為空值就會終止，因此也可以使用它來有條件地呼叫方法或應用條件邏輯

 const conditionalProperty = null;
let index = 0;

console.log(conditionalProperty?.[index++]); // undefined
console.log(index);  // 0
 

對於方法的呼叫你可以這樣寫

object.runsOnlyIfMethodExists?.()

例如下面的parent物件，如果我們直接呼叫parent.getTitle(),則會報Uncaught TypeError: parent.getTitle is not a function錯誤，parent.getTitle?.()則會終止不會執行

let parent = {
    name: "parent",
    friends: ["p1", "p2", "p3"],
    getName: function() {
      console.log(this.name)
    }
  };
  
  parent.getName?.()   // parent
  parent.getTitle?.()  //不會執行 

與無效合併一起使用

提供了一種方法來處理未定義或為空值和表達提供預設值。我們可以使用??運算子，為表示式提供預設值

console.log(undefined ?? 'codercao'); // codercao

因此，如果屬性不存在，則可以將無效的合併運算子與可選連結運算子結合使用以提供預設值。

let title = data?.children?.[0]?.title ?? 'codercao';
console.log(title); // codercao

二、邏輯空分配（?? =）

expr1 ??= expr2

邏輯空值運算子僅在空值（ null 或者 undefined）時才將值分配給expr1，表達方式：

x ??= y

可能看起來等效於：

x = x ?? y;

但事實並非如此！有細微的差別。

空的合併運算子（??）從左到右操作，如果x不為空，則短路。因此，如果x不為 null 或者 undefined，則永遠不會對錶達式y進行求值。因此，如果y是一個函式，它將根本不會被呼叫。因此，此邏輯賦值運算子等效於

x ?? (x = y);

三、邏輯或分配（|| =）

此邏輯賦值運算子僅在左側表示式為 falsy值時才賦值。Falsy值與null有所不同，因為falsy值可以是任何一種值：undefined，null，空字串(雙引號""、單引號’’、反引號``)，NaN，0。IE瀏覽器中的 document.all，也算是一個。

語法

x ||= y

等同於

x || (x = y)

在我們想要保留現有值（如果不存在）的情況下，這很有用，否則我們想為其分配預設值。例如，如果搜尋請求中沒有資料，我們希望將元素的內部HTML設定為預設值。否則，我們要顯示現有列表。這樣，我們避免了不必要的更新和任何副作用，例如解析，重新渲染，失去焦點等。我們可以簡單地使用此運算子來使用JavaScript更新HTML：

document.getElementById('search').innerHTML ||= '<i>No posts found matching this search.</i>'

四、邏輯與分配（&& =）

可能你已經猜到了，此邏輯賦值運算子僅在左側為真時才賦值。因此：

x &&= y

等同於

x && (x = y)

相關前端培訓開發技術知識詳情，關注我，有更多精彩內容與您分享！

​