欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JS中一些高效的魔法運(yùn)算符總結(jié)

 更新時(shí)間:2021年05月06日 11:57:52   作者:蚊子博客  
這篇文章主要給阿加介紹了關(guān)于JS中一些高效的魔法運(yùn)算符,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

JavaScript 現(xiàn)在每年都會(huì)發(fā)一個(gè)新版本,里面也會(huì)新增一些操作更加便利、高效的運(yùn)算符。今天我們就來(lái)盤(pán)點(diǎn)下幾個(gè)高效的魔法運(yùn)算符。

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

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

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

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

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

1.1 獲取深層次的屬性

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

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

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

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

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

  return <div></div>;
};

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

document.querySelector 會(huì)返回兩種類(lèi)型,當(dāng) dom 元素真實(shí)存在時(shí)會(huì)返回該元素,否則返回 null。寫(xiě)過(guò) typescript 的都知道,當(dāng)我們要調(diào)用某個(gè)方法時(shí),總是要先確定該 dom 元素是存在的:

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

使用可選鏈操作符時(shí),就直接調(diào)用即可:

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

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

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

arr?.[1]; // 若 arr 存在時(shí),則正常獲取 arr[1]中的值

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

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

執(zhí)行:

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

還有這種操作?

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

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

例如給一個(gè)可能的數(shù)組或者 dom 元素賦值時(shí),會(huì)直接拋出語(yǔ)法異常:

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

當(dāng)我們執(zhí)行上面的語(yǔ)句時(shí),會(huì)拋出如下的提示:

Uncaught SyntaxError: Invalid left-hand side in assignment

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

2. 雙問(wèn)號(hào)運(yùn)算符

雙問(wèn)號(hào)運(yùn)算符??,我理解是為了解決或運(yùn)算符||而設(shè)計(jì)出來(lái)的。

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

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

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

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

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

getScore(0); // 1

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

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

getScore(0); // 0

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

score ??= 1; // 1

我讀書(shū)多,不會(huì)騙你

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

我們?cè)谥笆褂没蜻\(yùn)算符進(jìn)行賦值操作時(shí),是這樣寫(xiě)的:

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

現(xiàn)在可以直接簡(jiǎn)寫(xiě)成:

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

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

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

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

5. 總結(jié)

以上所有的樣例均已在 chrome90 上運(yùn)行通過(guò)。

我們?cè)谝呀?jīng)有 babel 幫助轉(zhuǎn)換的情況下,可以適當(dāng)?shù)脑诖a運(yùn)用這些運(yùn)算符,能夠極大地簡(jiǎn)化我們的代碼。

到此這篇關(guān)于JS中一些高效運(yùn)算符總結(jié)的文章就介紹到這了,更多相關(guān)JS高效運(yùn)算符內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評(píng)論