JavaScript運(yùn)算符怎么用

這篇文章主要介紹了JavaScript運(yùn)算符怎么用，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

JavaScript有什么特點(diǎn)

1、js屬于一種解釋性腳本語言；2、在絕大多數(shù)瀏覽器的支持下，js可以在多種平臺下運(yùn)行，擁有著跨平臺特性；3、js屬于一種弱類型腳本語言，對使用的數(shù)據(jù)類型未做出嚴(yán)格的要求，能夠進(jìn)行類型轉(zhuǎn)換，簡單又容易上手；4、js語言安全性高，只能通過瀏覽器實(shí)現(xiàn)信息瀏覽或動態(tài)交互，從而有效地防止數(shù)據(jù)的丟失；5、基于對象的腳本語言，js不僅可以創(chuàng)建對象，也能使用現(xiàn)有的對象。

ECMAScript發(fā)展進(jìn)程中，會有很多功能的更新，比如銷毀，箭頭功能，模塊，它們極大的改變JavaScript編寫方式，可能有些人喜歡，有些人不喜歡，但像每個新功能一樣，我們最終會習(xí)慣它們。新版本的ECMAScript引入了三個新的邏輯賦值運(yùn)算符：空運(yùn)算符，AND和OR運(yùn)算符，這些運(yùn)算符的出現(xiàn)，也是希望讓我們的代碼更干凈簡潔。

一、可選鏈接運(yùn)算符【？.】

可選鏈接運(yùn)算符（Optional Chaining Operator） 處于ES2020提案的第4階段，因此應(yīng)將其添加到規(guī)范中。它改變了訪問對象內(nèi)部屬性的方式，尤其是深層嵌套的屬性。它也可以作為TypeScript 3.7+中的功能使用。

相信大部分開發(fā)前端的的小伙伴們都會遇到null和未定義的屬性。JS語言的動態(tài)特性使其無法不碰到它們。特別是在處理嵌套對象時，以下代碼很常見：

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

上面的代碼用于API響應(yīng)，我必須解析JSON以確保名稱存在。但是，當(dāng)對象具有可選屬性或某些配置對象具有某些值的動態(tài)映射時，可能會遇到類似情況，需要檢查很多邊界條件。

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

對于靜態(tài)屬性用法是：

object?.property

對于動態(tài)屬性將其更改為：

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

這樣寫是不是更加簡單了呢？ 由于操作符一旦為空值就會終止，因此也可以使用它來有條件地調(diào)用方法或應(yīng)用條件邏輯

const conditionalProperty = null;
let index = 0;

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

對于方法的調(diào)用你可以這樣寫

object.runsOnlyIfMethodExists?.()

例如下面的parent對象，如果我們直接調(diào)用parent.getTitle(),則會報(bào)Uncaught TypeError: parent.getTitle is not a function錯誤，parent.getTitle?.()則會終止不會執(zhí)行

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

與無效合并一起使用

提供了一種方法來處理未定義或?yàn)榭罩岛捅磉_(dá)提供默認(rèn)值。我們可以使用??運(yùn)算符，為表達(dá)式提供默認(rèn)值

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

因此，如果屬性不存在，則可以將無效的合并運(yùn)算符與可選鏈接運(yùn)算符結(jié)合使用以提供默認(rèn)值。

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

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

expr1 ??= expr2

邏輯空值運(yùn)算符僅在空值（空值或未定義）時才將值分配給expr1，表達(dá)方式：

x ??= y

可能看起來等效于：

x = x ?? y;

但事實(shí)并非如此！有細(xì)微的差別。

空的合并運(yùn)算符（??）從左到右操作，如果x不為空，則短路。因此，如果x不為null或未定義，則永遠(yuǎn)不會對表達(dá)式y(tǒng)進(jìn)行求值。因此，如果y是一個函數(shù)，它將根本不會被調(diào)用。因此，此邏輯賦值運(yùn)算符等效于

x ?? (x = y);

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

此邏輯賦值運(yùn)算符僅在左側(cè)表達(dá)式為 falsy值時才賦值。Falsy與null有所不同，因?yàn)閒alsy可以是任何一種值：false，0，“”，null，undefined和NaN等

語法

x ||= y

等同于

x || (x = y)

在我們想要保留現(xiàn)有值（如果不存在）的情況下，這很有用，否則我們想為其分配默認(rèn)值。例如，如果搜索請求中沒有數(shù)據(jù)，我們希望將元素的內(nèi)部HTML設(shè)置為默認(rèn)值。否則，我們要顯示現(xiàn)有列表。這樣，我們避免了不必要的更新和任何副作用，例如解析，重新渲染，失去焦點(diǎn)等。我們可以簡單地使用此運(yùn)算符來使用JavaScript更新HTML：

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

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

可能你已經(jīng)猜到了，此邏輯賦值運(yùn)算符僅在左側(cè)為真時才賦值。因此：

x &&= y

等同于

x && (x = y)

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“JavaScript運(yùn)算符怎么用”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!