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

ECMAScript發展進程中，會有不少功能的更新，好比銷燬，箭頭功能，模塊，它們極大的改變JavaScript編寫方式，可能有些人喜歡，有些人不喜歡，但像每一個新功能同樣，咱們最終會習慣它們。新版本的ECMAScript引入了三個新的邏輯賦值運算符：空運算符，AND和OR運算符，這些運算符的出現，也是但願讓咱們的代碼更乾淨簡潔，下面分享幾個優雅的JavaScript運算符使用技巧

1、可選連接運算符【？.】

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

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

expr1 ??= expr2

邏輯空值運算符僅在空值（空值或未定義）時纔將值分配給expr1，表達方式：

x ??= y

可能看起來等效於：

x = x ?? y;

但事實並不是如此！有細微的差異。

空的合併運算符（??）從左到右操做，若是x不爲空，則短路。所以，若是x不爲null或未定義，則永遠不會對錶達式y進行求值。所以，若是y是一個函數，它將根本不會被調用。所以，此邏輯賦值運算符等效於

x ?? (x = y);

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

此邏輯賦值運算符僅在左側表達式爲 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>'

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

可能你已經猜到了，此邏輯賦值運算符僅在左側爲真時才賦值。所以：

x &&= y

等同於

x && (x = y)

最後

本次分享幾個優雅的JavaScript運算符使用技巧，重點分享了可選連接運算符的使用，這樣可讓咱們不須要再編寫大量咱們例子中代碼便可輕鬆訪問嵌套屬性。可是IE不支持它，所以，若是須要支持該版本或更舊版本的瀏覽器，則可能須要添加Babel插件。對於Node.js，須要爲此升級到Node 14 LTS版本，由於12.x不支持該版本。

若是你也有優雅的優雅的JavaScript運算符使用技巧，請不要吝惜，在評論區一塊兒交流~