JS 特殊運(yùn)算符的使用
眾多編程語言之中JavaScript ,以其強(qiáng)大而全面的功能深受前端開發(fā)者喜愛。其豐富的運(yùn)算符集,不僅包括了廣泛應(yīng)用的算術(shù)運(yùn)算符、比較運(yùn)算符以及邏輯運(yùn)算符,還蘊(yùn)藏著一系列較為冷門但同樣功能強(qiáng)大的運(yùn)算符。這些不常被提及的運(yùn)算符,或許因它們特定的應(yīng)用場景或是相對(duì)少見的使用頻率,而未能廣泛進(jìn)入開發(fā)者的視野。然而,深入了解并掌握這些運(yùn)算符,無疑能夠?yàn)槲覀兊拈_發(fā)工作增添更多的便利與高效。接下來,讓我們一同了解下哪些冷漠且很適用的運(yùn)算符~

特殊運(yùn)算符號(hào)有哪些?
1. ??(空值合并運(yùn)算符)
空值合并運(yùn)算符 ?? 用于當(dāng)左側(cè)操作數(shù)為 null 或 undefined 時(shí),返回右側(cè)操作數(shù)。
let x = null; let y = 'default'; let z = x ?? y; // z 的值為 'default' console.log(z); // 輸出: default
2. ??=(空值合并賦值運(yùn)算符)
空值合并賦值運(yùn)算符 ??= 用于當(dāng)左側(cè)變量為 null 或 undefined 時(shí),將右側(cè)的值賦給左側(cè)的變量。
let x = null; let y = 'value'; x ??= y; // x 的值變?yōu)?'value' console.log(x); // 輸出: value
3. ?.(可選鏈運(yùn)算符)
可選鏈運(yùn)算符 ?. 允許我們安全地訪問深層嵌套的屬性,而不用擔(dān)心中間某個(gè)屬性是 null 或 undefined。
let user = { name: 'Alice', address: { city: 'Wonderland' } };
let city = user?.address?.city; // city 的值為 'Wonderland'
console.log(city); // 輸出: Wonderland
let nullUser = null;
let nullCity = nullUser?.address?.city; // nullCity 的值為 undefined
console.log(nullCity); // 輸出: undefined
4. ?=(三元運(yùn)算符的簡潔形式?實(shí)際上應(yīng)稱為邏輯空賦值運(yùn)算符的誤解)
注意:這里有一個(gè)小誤區(qū),?= 并不是三元運(yùn)算符的簡潔形式,而是邏輯空賦值運(yùn)算符(Logical Nullish Assignment ??=)的一部分,已在上面介紹。真正的三元運(yùn)算符是 ?:,用于簡單的條件判斷。
let age = null; age = age ? age : 18; // 傳統(tǒng)三元運(yùn)算符用法,如果 age 為 null 或 undefined,則賦值為 18 console.log(age); // 輸出: 18 // 使用 ??= 簡化 let age2 = null; age2 ??= 18; // 如果 age2 為 null 或 undefined,則賦值為 18 console.log(age2); // 輸出: 18
5. typeof(類型運(yùn)算符)
typeof 運(yùn)算符用于判斷一個(gè)變量的類型。
let x = 'Hello, world!'; console.log(typeof x); // 輸出: string let y = 42; console.log(typeof y); // 輸出: number let z = true; console.log(typeof z); // 輸出: boolean let u; console.log(typeof u); // 輸出: undefined
6. instanceof(實(shí)例運(yùn)算符)
instanceof 運(yùn)算符用于測試一個(gè)對(duì)象是否在其原型鏈原型上具有一個(gè)構(gòu)造函數(shù)的 prototype 屬性。
class Animal { }
class Dog extends Animal { }
let dog = new Dog();
console.log(dog instanceof Dog); // 輸出: true
console.log(dog instanceof Animal); // 輸出: true
7. in(屬性運(yùn)算符)
in 運(yùn)算符用于檢查對(duì)象是否具有指定的屬性。
let obj = { a: 1, b: 2 };
console.log('a' in obj); // 輸出: true
console.log('c' in obj); // 輸出: false
8. delete(刪除運(yùn)算符)
delete 運(yùn)算符用于刪除對(duì)象的屬性。
let obj = { a: 1, b: 2 };
delete obj.a;
console.log(obj); // 輸出: { b: 2 }
9. void(空運(yùn)算符)
void 運(yùn)算符用于計(jì)算一個(gè)表達(dá)式,并返回 undefined 作為結(jié)果。
let x = void (0); // x 的值為 undefined console.log(x); // 輸出: undefined
10. ,(逗號(hào)運(yùn)算符)
逗號(hào)運(yùn)算符用于評(píng)估兩個(gè)表達(dá)式,并返回最后一個(gè)表達(dá)式的結(jié)果。
let x = (1, 2); // x 的值為 2 console.log(x); // 輸出: 2
面試技巧
1. 理解并熟悉每個(gè)運(yùn)算符的用途、優(yōu)點(diǎn)
在面試中,對(duì) JavaScript 運(yùn)算符的深刻理解能夠幫助你快速解決算法問題,并寫出更簡潔、高效的代碼。
2. 注意運(yùn)算符的優(yōu)先級(jí)和結(jié)合性
了解運(yùn)算符的優(yōu)先級(jí)和結(jié)合性(即運(yùn)算順序)對(duì)于避免邏輯錯(cuò)誤至關(guān)重要。例如,*(乘法)的優(yōu)先級(jí)高于 +(加法)。
3. 使用可選鏈運(yùn)算符簡化代碼
在訪問嵌套對(duì)象屬性時(shí),使用可選鏈運(yùn)算符 ?. 可以避免繁瑣的條件檢查,使代碼更簡潔、易讀。
4. 利用空值合并運(yùn)算符處理默認(rèn)值
在處理可能為 null 或 undefined 的變量時(shí),使用空值合并運(yùn)算符 ?? 可以方便地設(shè)置默認(rèn)值,減少代碼冗余。
5. 掌握三元運(yùn)算符的簡潔寫法
三元運(yùn)算符 ?: 是條件判斷的一種簡潔寫法,可以在一行內(nèi)完成簡單的條件邏輯,使代碼更加緊湊。
6. 理解 typeof 和 instanceof 的區(qū)別
typeof 用于判斷變量類型,而 instanceof 用于判斷對(duì)象是否是某個(gè)構(gòu)造函數(shù)的實(shí)例,兩者在用途上有所不同。
7. 謹(jǐn)慎使用 delete 運(yùn)算符
delete 運(yùn)算符可以刪除對(duì)象的屬性,但刪除數(shù)組元素時(shí)應(yīng)謹(jǐn)慎,因?yàn)樗粫?huì)改變數(shù)組長度,只是將元素值設(shè)置為 undefined。
8. 熟悉逗號(hào)運(yùn)算符的用途
逗號(hào)運(yùn)算符在某些情況下可以簡化代碼,例如在 for 循環(huán)中同時(shí)更新多個(gè)變量。
9. 利用 void 運(yùn)算符避免不必要的返回值
void 運(yùn)算符可以用于避免函數(shù)或表達(dá)式返回不必要的值,確保代碼邏輯的清晰性。
到此這篇關(guān)于JS 特殊運(yùn)算符的使用的文章就介紹到這了,更多相關(guān)JS 特殊運(yùn)算符內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript canvas實(shí)現(xiàn)帶有陰影的圖形和文字
這篇文章主要為大家詳細(xì)介紹了JavaScript canvas實(shí)現(xiàn)帶有陰影的圖形和文字,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-03-03
JS如何使用正則表達(dá)式(match)截取括號(hào)中的文字和數(shù)字
正則表達(dá)式是一種用來匹配文本模式的工具,這篇文章主要給大家介紹了關(guān)于JS如何使用正則表達(dá)式(match)截取括號(hào)中文字和數(shù)字的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-10-10
30分鐘快速入門掌握ES6/ES2015的核心內(nèi)容(下)
這篇文章主要給大家介紹了如何通過30分鐘快速入門掌握ES6/ES2015的核心內(nèi)容的相關(guān)資料,之前給大家介紹過基礎(chǔ)的一些內(nèi)容,下面繼續(xù)來介紹一些其他的新特性,需要的朋友可以參考借鑒,下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2018-04-04
JavaScript實(shí)現(xiàn)酷炫的鼠標(biāo)拖尾特效
這篇文章主要為大家介紹了通過JavaScript實(shí)現(xiàn)的一個(gè)超級(jí)好看的鼠標(biāo)拖尾特效,文中的示例代碼講解詳細(xì),對(duì)我們學(xué)習(xí)JavaScript有一定的幫助,感興趣的可以學(xué)習(xí)一下2021-12-12
百度判斷手機(jī)終端并自動(dòng)跳轉(zhuǎn)js代碼及使用實(shí)例
這篇文章主要介紹了百度判斷手機(jī)終端并自動(dòng)跳轉(zhuǎn)js代碼及使用實(shí)例,需要的朋友可以參考下2014-06-06
javascript實(shí)現(xiàn)輸入框內(nèi)容提示及隱藏功能
這篇文章主要介紹了javascript實(shí)現(xiàn)輸入框內(nèi)容提示及隱藏功能,實(shí)現(xiàn)方法真的超簡單,本文通過示例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2021-09-09

