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>; };
或者我們執www.cppcns.com行一個 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,() => {
returhttp://www.cppcns.comn 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; /xTQxO/ 等同於 age = age && 24
4. 雙星號運算子
雙星號運算子**是比較早引入到 js 中的,只是我們用到的比較少而已。其實它執行的是一個冪運算,等同於 Math.pow()。
2 ** 10; // 1024,2的10次方,等同於 Math.pow(2,10);
5. 總結
以上所有的樣例均已在 chrome90 上執行通過。
我們在已經有 babel 幫助轉換的情況下,可以適當的在程式碼運用這些運算子,能夠極大地簡化我們的程式碼。
到此這篇關於JS中一些高效運算子總結的文章就介紹到這了,更多相關JS高效運算子內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!