JS中一些高效的魔法運(yùn)算符總結(jié)
JavaScript 現(xiàn)在每年都會發(fā)一個新版本,里面也會新增一些操作更加便利、高效的運(yùn)算符。今天我們就來盤點(diǎn)下幾個高效的魔法運(yùn)算符。
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 元素真實(shí)存在時會返回該元素,否則返回 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(但實(shí)際上返回了 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 中的,只是我們用到的比較少而已。其實(shí)它執(zhí)行的是一個冪運(yùn)算,等同于 Math.pow()。
2 ** 10; // 1024, 2的10次方,等同于 Math.pow(2, 10);
5. 總結(jié)
以上所有的樣例均已在 chrome90 上運(yùn)行通過。
我們在已經(jīng)有 babel 幫助轉(zhuǎn)換的情況下,可以適當(dāng)?shù)脑诖a運(yùn)用這些運(yùn)算符,能夠極大地簡化我們的代碼。
到此這篇關(guān)于JS中一些高效運(yùn)算符總結(jié)的文章就介紹到這了,更多相關(guān)JS高效運(yùn)算符內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
理解javascript中的回調(diào)函數(shù)(callback)
這篇文章主要介紹了理解javascript中的回調(diào)函數(shù)(callback),本文著重于對回調(diào)函數(shù)概念的理解,需要的朋友可以參考下2014-09-09原生JS實(shí)現(xiàn)Ajax跨域請求flask響應(yīng)內(nèi)容
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)Ajax跨域請求flask響應(yīng)內(nèi)容,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-10-10多個jquery.datatable共存,checkbox全選異常的快速解決方法
這篇文章主要介紹了多個jquery.datatable共存,checkbox全選異常的快速解決方法。需要的朋友可以過來參考下,希望對大家有所幫助2013-12-12CSS3+JavaScript實(shí)現(xiàn)翻頁幻燈片效果
這篇文章主要介紹了CSS3+JavaScript實(shí)現(xiàn)翻頁幻燈片效果,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2017-06-06bootstrap+jQuery實(shí)現(xiàn)的動態(tài)進(jìn)度條功能示例
這篇文章主要介紹了bootstrap+jQuery實(shí)現(xiàn)的動態(tài)進(jìn)度條功能,結(jié)合完整實(shí)例形式分析了bootstrap+jQuery實(shí)現(xiàn)動態(tài)進(jìn)度條的具體步驟與相關(guān)操作技巧,需要的朋友可以參考下2017-05-05