JavaScript中幾個常用的運算符

這篇文章主要講解了“JavaScript中幾個常用的運算符”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“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  以確保名稱存在。但是，當對象具有可選屬性或某些配置對象具有某些值的動態映射時，可能會遇到類似情況，需要檢查很多邊界條件。

這時候，如果我們使用可選鏈接運算符，一切就變得更加輕松了。它為我們檢查嵌套屬性，而不必顯式搜索梯形圖。我們所要做的就是使用 “?”  要檢查空值的屬性之后的運算符。我們可以隨意在表達式中多次使用該運算符，并且如果未定義任何項，它將盡早返回。

(2) 對于靜態屬性用法是：

object?.property

(3) 對于動態屬性將其更改為：

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

(4) 對于方法的調用你可以這樣寫

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?.()  //不會執行

(5) 與無效合并一起使用

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

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

因此，如果屬性不存在，則可以將無效的合并運算符與可選鏈接運算符結合使用以提供默認值。

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

二、邏輯空分配(?? =)

expr1 ??= expr2

邏輯空值運算符僅在 nullish 值(null 或者 undefined)時才將值分配給 expr1，表達方式：

x ??= y

可能看起來等效于：

xx = x ?? y;

但事實并非如此!有細微的差別。

空的合并運算符(??)從左到右操作，如果 x 不為 nullish 值則中表達式不執行。因此，如果 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)

感謝各位的閱讀，以上就是“JavaScript中幾個常用的運算符”的內容了，經過本文的學習后，相信大家對JavaScript中幾個常用的運算符這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！