4個優雅的JavaScript運算符使用技巧

​

ECMAScript發展程序中，會有很多功能的更新，比如銷毀，箭頭功能，子產品，它們極大的改變JavaScript編寫方式，可能有些人喜歡，有些人不喜歡，但像每個新功能一樣，我們最終會習慣它們。

新版本的ECMAScript引入了三個新的邏輯指派運算符：空運算符，AND和OR運算符，這些運算符的出現，也是希望讓我們的代碼更幹淨簡潔，下面分享幾個優雅的JavaScript運算符使用技巧

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

可選連結運算符（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      

邏輯空值運算符僅在空值（空值或未定義）時才将值配置設定給expr1，表達方式：

x ??= y      

可能看起來等效于：

x = x ?? y;      

但事實并非如此！有細微的差别。

空的合并運算符（??）從左到右操作，如果x不為空，則短路。是以，如果x不為null或未定義，則永遠不會對表達式y進行求值。是以，如果y是一個函數，它将根本不會被調用。是以，此邏輯指派運算符等效于

x ?? (x = y);      

三、邏輯或配置設定（|| =）

此邏輯指派運算符僅在左側表達式為 falsy值時才指派。Falsy與null有所不同，因為falsy可以是任何一種值：false，0，“”，null，undefined和NaN等

文法

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)      

最後

本次分享幾個優雅的JavaScript運算符使用技巧，重點分享了可選連結運算符的使用，這樣可以讓我們不需要再編寫大量我們例子中代碼即可輕松通路嵌套屬性。

但是IE不支援它，是以，如果需要支援該版本或更舊版本的浏覽器，則可能需要添加Babel插件。