JavaScript中有哪些魔法運(yùn)算符

JavaScript中有哪些魔法運(yùn)算符？針對這個問題，這篇文章詳細(xì)介紹了相對應(yīng)的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。

javascript是一種什么語言

javascript是一種動態(tài)類型、弱類型的語言，基于對象和事件驅(qū)動并具有相對安全性并廣泛用于客戶端網(wǎng)頁開發(fā)的腳本語言，同時也是一種廣泛用于客戶端Web開發(fā)的腳本語言。它主要用來給HTML網(wǎng)頁添加動態(tài)功能，現(xiàn)在JavaScript也可被用于網(wǎng)絡(luò)服務(wù)器，如Node.js。

1. 可選鏈運(yùn)算符

之前當(dāng)我們想要使用某個結(jié)構(gòu)比較深的屬性，同時又無法確定所有的父級一定存在時，我們需要進(jìn)行一連串的判斷，例如一個數(shù)據(jù)結(jié)構(gòu)：

const student = {
  score: {
    math: 98,
  },
};

我們想要獲取最內(nèi)層的 math 屬性的值時：

if (student && student.score) {
  console.log(student.score.math);
}

1.1 獲取深層次的屬性

不過當(dāng)我們使用可選鏈運(yùn)算符后，判斷就簡單很多了，可選鏈運(yùn)算符會在鏈路上遇到 null 或者 undefined 時，直接返回 undefined，而不會拋出錯誤異常：

console.log(student?.score?.math);

1.2 執(zhí)行一個可選的方法

同時在執(zhí)行一個可能存在的函數(shù)時，也可以用到。例如一個 react 組件中，傳入的方法是可選的：

// getScore 是一個可選參數(shù)，要么是 undefined，要么是一個函數(shù)
const Student = ({ getScore }: { getScore?: () => void }) => {
  useEffect(() => {
    // 當(dāng) getScore 存在時，正常執(zhí)行 getScore()方法
    getScore?.();
  }, []);

  return <div></div>;
};

或者我們執(zhí)行一個 dom 元素的方法時，也可以使用。

document.querySelector 會返回兩種類型，當(dāng) dom 元素真實存在時會返回該元素，否則返回 null。寫過 typescript 的都知道，當(dāng)我們要調(diào)用某個方法時，總是要先確定該 dom 元素是存在的：

const dom = document.querySelector('.score');
if (dom) {
  dom.getBoundingClientRect(); // 當(dāng) dom 元素存在時，才執(zhí)行該方法
}

使用可選鏈操作符時，就直接調(diào)用即可：

document.querySelector('.score')?.getBoundingClientRect();

1.3 獲取數(shù)組中的值

若數(shù)組存在，則獲取某個下標(biāo)的值，我們現(xiàn)在也不用再判斷數(shù)組是否存在了，可以直接使用：

arr?.[1]; // 若 arr 存在時，則正常獲取 arr[1]中的值

上面的 3 種情況也是可以組合使用的。若一個結(jié)構(gòu)比較復(fù)雜時，各種類型都有，這里我們要執(zhí)行數(shù)組 math 下標(biāo) 2 的方法：

const student = {
  score: {
    math: [
      98,
      67,
      () => {
        return 99;
      },
    ],
  },
};

執(zhí)行：

student?.score?.math?.[2]?.(); // 99

還有這種操作？

1.4 無法進(jìn)行賦值操作

可選鏈運(yùn)算符只能執(zhí)行獲取操作，是無法進(jìn)行賦值操作的。

例如給一個可能的數(shù)組或者 dom 元素賦值時，會直接拋出語法異常：

arr?.[1] = 2; // x
document.querySelector('.score')?.innerHTML = 98; // x

當(dāng)我們執(zhí)行上面的語句時，會拋出如下的提示：

Uncaught SyntaxError: Invalid left-hand side in assignment

即不能給左側(cè)的可選鏈進(jìn)行賦值操作。

2. 雙問號運(yùn)算符

雙問號運(yùn)算符??，我理解是為了解決或運(yùn)算符||而設(shè)計出來的。

我們先來回顧下或運(yùn)算符的操作，當(dāng)左側(cè)的數(shù)據(jù)為假值(數(shù)字 0, 布爾類型的 false，空字符串，undefined, null)時，則執(zhí)行右側(cè)的語句。

false || 123;
0 || 123;
'' || '123';
undefined || 123;
null || 123;

可是在有些情況下，false 和 0 都是正常的值，但若使用或運(yùn)算符時，會導(dǎo)致出錯。

比如下面的這個例子，當(dāng) score 為空時，則默認(rèn)值為 1。當(dāng)輸入正常值 0 時應(yīng)當(dāng)返回 0（但實際上返回了 1）：

const getSCore = (score: number) => {
  return score || 1;
};

getScore(0); // 1

這時，我們就用到了雙問號運(yùn)算符??。雙問號運(yùn)算符只會在左側(cè)為 undefined 或者 null 時，才會執(zhí)行右側(cè)的語句。

const getSCore = (score: number) => {
  return score ?? 1;
};

getScore(0); // 0

同時，雙問號運(yùn)算符還可以與=結(jié)合成為一個賦值操作，當(dāng)左側(cè)為 null 或者 undefined 時，則將右側(cè)語句的結(jié)果賦值給左側(cè)的變量：

score ??= 1; // 1

我讀書多，不會騙你

3. 或運(yùn)算和與運(yùn)算的賦值操作

我們在之前使用或運(yùn)算符進(jìn)行賦值操作時，是這樣寫的：

score = score || 1;
age = age && 24;

現(xiàn)在可以直接簡寫成：

score ||= 1; // 等同于 score = score || 1
age &&= 24; // 等同于 age = age && 24

4. 雙星號運(yùn)算符

雙星號運(yùn)算符**是比較早引入到 js 中的，只是我們用到的比較少而已。其實它執(zhí)行的是一個冪運(yùn)算，等同于 Math.pow()。

2 ** 10; // 1024, 2的10次方，等同于 Math.pow(2, 10);

關(guān)于JavaScript中有哪些魔法運(yùn)算符問題的解答就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識。