JS 中一些高效的魔法運算子

蚊子部落格發表於2021-04-29
JS

這兩天有同事說我挺久沒更新文章了，不過最近一段時間確實有點忙，一直在忙著兩個活動中心的改版，沒什麼時間來更新文章。今天終於抽空可以寫一寫。

高高興興

JavaScript 現在每年都會發一個新版本，裡面也會新增一些操作更加便利、高效的運算子。今天我們就來盤點下幾個高效的魔法運算子。

1. 可選鏈運算子

之前當我們想要使用某個結構比較深的屬性，同時又無法確定所有的父級一定存在時，我們需要進行一連串的判斷，例如一個資料結構：

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

我們想要獲取最內層的 math 屬性的值時：

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

1.1 獲取深層次的屬性

不過當我們使用可選鏈運算子後，判斷就簡單很多了，可選鏈運算子會在鏈路上遇到 null 或者 undefined 時，直接返回 undefined，而不會丟擲錯誤異常：

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

1.2 執行一個可選的方法

同時在執行一個可能存在的函式時，也可以用到。例如一個 react 元件中，傳入的方法是可選的：

// getScore 是一個可選引數，要麼是 undefined，要麼是一個函式
const Student = ({ getScore }: { getScore?: () => void }) => {
  useEffect(() => {
    // 當 getScore 存在時，正常執行 getScore()方法
    getScore?.();
  }, []);

  return <div></div>;
};

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

document.querySelector 會返回兩種型別，當 dom 元素真實存在時會返回該元素，否則返回 null。寫過 typescript 的都知道，當我們要呼叫某個方法時，總是要先確定該 dom 元素是存在的：

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

使用可選鏈操作符時，就直接呼叫即可：

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

1.3 獲取陣列中的值

若陣列存在，則獲取某個下標的值，我們現在也不用再判斷陣列是否存在了，可以直接使用：

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

上面的 3 種情況也是可以組合使用的。若一個結構比較複雜時，各種型別都有，這裡我們要執行陣列 math 下標 2 的方法：

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

執行：

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

還有這種操作？

1.4 無法進行賦值操作

可選鏈運算子只能執行獲取操作，是無法進行賦值操作的。

例如給一個可能的陣列或者 dom 元素賦值時，會直接丟擲語法異常：

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

當我們執行上面的語句時，會丟擲如下的提示：

Uncaught SyntaxError: Invalid left-hand side in assignment

即不能給左側的可選鏈進行賦值操作。

2. 雙問號運算子

雙問號運算子??，我理解是為了解決或運算子||而設計出來的。

我們先來回顧下或運算子的操作，當左側的資料為假值(數字 0, 布林型別的 false，空字串，undefined, null)時，則執行右側的語句。

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

可是在有些情況下，false 和 0 都是正常的值，但若使用或運算子時，會導致出錯。

比如下面的這個例子，當 score 為空時，則預設值為 1。當輸入正常值 0 時應當返回 0（但實際上返回了 1）：

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

getScore(0); // 1

這時，我們就用到了雙問號運算子??。雙問號運算子只會在左側為 undefined 或者 null 時，才會執行右側的語句。

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

getScore(0); // 0

同時，雙問號運算子還可以與=結合成為一個賦值操作，當左側為 null 或者 undefined 時，則將右側語句的結果賦值給左側的變數：

score ??= 1; // 1

我讀書多，不會騙你

3. 或運算和與運算的賦值操作

我們在之前使用或運算子進行賦值操作時，是這樣寫的：

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

現在可以直接簡寫成：

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

4. 雙星號運算子

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

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

5. 總結

以上所有的樣例均已在 chrome90 上執行通過。

棒棒噠

我們在已經有 babel 幫助轉換的情況下，可以適當的在程式碼運用這些運算子，能夠極大地簡化我們的程式碼。

JS 中一些高效的魔法運算子-蚊子的部落格

也歡迎您關注我的公眾號：“前端小茶館”

前端小茶館公眾號

相關文章