JavaScript中有哪些鮮為人知的技巧

本篇內(nèi)容介紹了“JavaScript中有哪些鮮為人知的技巧”的有關(guān)知識，在實(shí)際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

void 操作符

JavaScript 具有一元void運(yùn)算符。您可能已經(jīng)看到它用作void(0)或void  0。它的生命中只有一個(gè)目標(biāo)——在表達(dá)式的正確位置返回**undefined**。使用“0”只是一個(gè)約定。您不一定必須使用“  0”，它可以是任何有效的表達(dá)式void ，并且仍返回**undefined。**

為什么創(chuàng)造了一個(gè)特殊的關(guān)鍵字來返回 undefined 而不是直接返回 undefined呢?

聽起來好像有一點(diǎn)冗余對吧?

趣聞

好吧，事實(shí)證明，在ES5之前，您實(shí)際上可以在大多數(shù)瀏覽器中為原始的 undefined 分配一個(gè)新值，像是 undefined =“ abc”。

定義 undefined?!

因此在那個(gè)時(shí)候，使用 void 是確保您始終返回原始 undefined 的一種方法。

構(gòu)造函數(shù)后面的括號是可選的

是的，在調(diào)用構(gòu)造函數(shù)時(shí)，我們在類名后添加的括號是完全可選的!?(前提是您不需要將任何參數(shù)傳遞給構(gòu)造函數(shù))

以下兩種代碼樣式均被視為有效的 JS 語法，并且結(jié)果是相同的!

IIFE 函數(shù)的括號可以省略

對于我來說，IIFE(立即調(diào)用功能表達(dá)式)的語法總是有點(diǎn)奇怪。

那些括號我到底應(yīng)該怎么用?

事實(shí)證明，這些額外的括號僅僅是為了告訴 JavaScript  解析器即將發(fā)布的代碼是函數(shù)表達(dá)式，而不是函數(shù)?？梢韵胂螅懒诉@一點(diǎn)，有很多方法可以跳過那些多余的括號，并且仍然可以制作出有效的IIFE。

void  運(yùn)算符告訴解析器代碼是函數(shù)表達(dá)式。因此，我們可以跳過函數(shù)定義的括號。你猜怎么著?我們可以使用任何一元運(yùn)算符(void，+，!，-等)來讓它奏效!

太酷了!

但是，如果您是一個(gè)敏銳的觀察者，您可能會想，

一元運(yùn)算符不會影響IIFE返回的任何結(jié)果嗎?

好吧，這會影響結(jié)果。但是，好消息是，如果您關(guān)心結(jié)果并說要將其存儲在某個(gè)變量中，那么首先就不需要多余的括號。

確實(shí)如此!

我們添加這些括號只是為了提高人類可讀性。

想要了解有關(guān)IIFE結(jié)帳的更多信息，可以去看看 Chandra Gundamaraju的這篇很酷的文章

with 聲明

您知道嗎，JavaScript有一個(gè)with語句塊?實(shí)際上它是JS中的關(guān)鍵字。編寫with塊的語法如下：

with (object)    statement  // for multiple statements add a block with (object) {    statement    statement    ... }

with 把傳入的對象的所有屬性添加到當(dāng)前作用域鏈中：

趣聞

with聽起來非?？幔瑢Π?它甚至比對象解構(gòu)更好。

好吧，不是這樣的。

通常不建議使用with語句，因?yàn)樗驯粭売谩Ｔ趪?yán)格模式下完全禁止這樣做。事實(shí)證明，使用塊會增加該語言的性能和安全性問題!

譯者注：

不建議使用with，因?yàn)閣ith語句將對象的成員添加到當(dāng)前作用域，從而無法說出塊內(nèi)的變量實(shí)際指的是什么。由于難以調(diào)試和讀取這些類型的功能，因此許多人認(rèn)為這是一種不好的做法，可以參考以下信息了解更多：

• https://eslint.org/docs/rules...

• https://eslint.org/docs/rules...

Function 構(gòu)造函數(shù)

函數(shù)聲明不是定義新函數(shù)的唯一方法;您可以使用Function()構(gòu)造函數(shù)以及new運(yùn)算符動態(tài)地定義函數(shù)。

最后一個(gè)構(gòu)造函數(shù)參數(shù)是函數(shù)的字符串化代碼以及之前的其他參數(shù)為函數(shù)參數(shù)。

趣聞

Function 構(gòu)造函數(shù)是 JavaScript  中所有構(gòu)造函數(shù)的母親。甚至Object的構(gòu)造函數(shù)都是Function構(gòu)造函數(shù)。Function自己的構(gòu)造函數(shù)也是Function本身。因此，調(diào)用object.constructor.constructor  ...足夠的次數(shù)最終將返回JavaScript中任何對象上的Function構(gòu)造函數(shù)。

函數(shù)屬性

眾所周知，函數(shù)是JavaScript中的「一等公民」。因此，沒有人阻止我們向函數(shù)添加自定義屬性。這在JS中是完全正確的事情。但是，它很少使用。

那么我們什么時(shí)候想要這樣做呢?

嗯，有一些很好的用例。例如：

可配置函數(shù)

假設(shè)我們有一個(gè)叫做greet的函數(shù)。我們希望我們的函數(shù)根據(jù)不同的語言環(huán)境打印不同的問候消息。此語言環(huán)境也應(yīng)該是可配置的。我們可以在某個(gè)地方維護(hù)全局語言環(huán)境變量，也可以使用如下所示的函數(shù)屬性來實(shí)現(xiàn)函數(shù)：

帶有靜態(tài)變量的函數(shù)

另一個(gè)類似的例子。假設(shè)您要實(shí)現(xiàn)一個(gè)數(shù)字生成器——該數(shù)字生成器生成一系列有序數(shù)字。通常，您將使用帶有靜態(tài)的counter變量的類或IIFE來跟蹤上一個(gè)值。這樣，我們可以限制訪問counter，還可以避免因額外的變量污染全局空間。

但是，如果我們想靈活地讀取甚至修改計(jì)數(shù)器而又不污染全局空間怎么辦?

是的，我們?nèi)匀豢梢詣?chuàng)建一個(gè)類，它帶有counter變量和一些其他讀取counter的方法;或者我們偷個(gè)懶，只在函數(shù)上使用屬性。

這是一個(gè)很長的 list，我們剛剛寫了一半。如果您想休息一下，現(xiàn)在是個(gè)好時(shí)機(jī)。如果您要繼續(xù)看下去，好吧，我向您致敬!

讓我們繼續(xù)!

參數(shù)屬性

我敢肯定你們大多數(shù)人都知道函數(shù)內(nèi)的arguments對象。它是一個(gè)數(shù)組，類似于對象，可以在所有函數(shù)中使用。它具有在調(diào)用時(shí)傳遞給函數(shù)的參數(shù)列表。但是它還具有其他一些有趣的特性，

• arguments.callee：引用當(dāng)前調(diào)用的函數(shù)

• arguments.callee.caller：引用已調(diào)用當(dāng)前函數(shù)的函數(shù)

注意：盡管ES5禁止在嚴(yán)格模式下使用 callee 和 caller，但在許多已編譯的庫中仍然很常見。因此，值得學(xué)習(xí)。

標(biāo)記模板字符串

除非您與世隔絕，否則您肯定聽說過模版字符串。模版字符串是ES6提供的許多不錯(cuò)的功能之一。但是，您知道標(biāo)記模版字符串嗎?

帶有標(biāo)記的模板字符串可以通過向模板字符串添加自定義標(biāo)記，來更好地控制將模板字符串解析為字符串的過程。Tag只是一個(gè)解析器函數(shù)，它獲取由字符串模板解釋的所有字符串和值的數(shù)組，并返回最終字符串。

在下面的示例中，我們的自定義標(biāo)簽highlight解釋模板字符串的值，并且還將解釋后的值使用元素包裝在結(jié)果字符串中以突出顯示。

在許多庫都可以發(fā)現(xiàn)一些有趣的用例是利用此功能來實(shí)現(xiàn)的。

以下是一些很酷的例子，

• React styled-components

• es2015-i18n-tag 用于翻譯和國際化

• chalk 用于彩色的 log

Getters & Setters

在大多數(shù)情況下，JavaScript對象很簡單。假設(shè)我們有一個(gè)user對象，并嘗試使用user.age訪問其年齡屬性，如果定義了年齡屬性，我們將獲得年齡屬性的值;否則，將獲得未定義屬性。簡單。

但是，可以不必這么簡單。JavaScript對象具有Getter和Setter的概念?？梢灾苯泳帉懽远xGetter函數(shù)以返回所需的任何內(nèi)容，而不是直接返回對象的值。設(shè)置值也一樣。

這使我們在獲取或設(shè)置字段時(shí)擁有虛擬字段，字段驗(yàn)證，副作用等強(qiáng)大的能力。

Getters和Setters在 ES5 中不是新增功能。他們一直在那里。ES5 只是在現(xiàn)有功能中添加了方便的語法。要了解有關(guān)  Getters&Setters的更多信息，請參閱這篇不錯(cuò)的文章)

Colors 是一個(gè)流行的node.js庫，它是利用Getters的一個(gè)很好的例子。

該庫擴(kuò)展了String類，并在其上添加了一堆Getter方法。這使我們能夠通過簡單地訪問其屬性，將任何字符串轉(zhuǎn)換為其彩色版本，以便于打印。

逗號操作符

JavaScript 具有逗號運(yùn)算符。它允許我們在一行中編寫多個(gè)用逗號分隔的表達(dá)式，并返回最后一個(gè)表達(dá)式的結(jié)果

// syntax let result = expression1, expression2,... expressionN

在上面的代碼中，將對所有表達(dá)式進(jìn)行求值，并將對expressionN 返回的值賦值給result變量。

您可能已經(jīng)在for循環(huán)中使用了逗號運(yùn)算符：

for (var a = 0, b = 10; a <= 10; a++, b--)

有時(shí)它可以用來幫助我們在同一行中寫多個(gè)語句：

function getNextValue() {     return counter++, console.log(counter), counter }

或者寫短的 lamda 函數(shù)：

const getSquare = x => (console.log (x), x * x)

加號操作符

你是否曾經(jīng)遇到過需要將字符串快速轉(zhuǎn)換為數(shù)字的場景?

只需在字符串前面加上+運(yùn)算符即可。

加號運(yùn)算符還適用于負(fù)，八進(jìn)制，十六進(jìn)制，指數(shù)值。而且，它甚至可以將Date或Moment.js對象轉(zhuǎn)換為時(shí)間戳!

!! Bang Bang 操作符

好的，從技術(shù)上講，它不是獨(dú)立的 JavaScript 運(yùn)算符。只是把 JavaScript 否定運(yùn)算符使用了兩次。

但是Bang Bang(!!)聽起來很酷!Bang Bang或Double Bang是將所有表達(dá)式轉(zhuǎn)換為布爾值的巧妙技巧。

如果表達(dá)式是 truthy 的值，則返回 true;否則返回 false。

～ 按位操作符

面對現(xiàn)實(shí)吧——沒人在乎按位運(yùn)算符。我們什么時(shí)候才能使用它!

好吧，按位非(～)運(yùn)算符每天都有用例。

事實(shí)證明，當(dāng)與數(shù)字一起使用時(shí)，按位非運(yùn)算符才有效。比如：?N =>-(N + 1)。僅當(dāng)N == -1時(shí)，此表達(dá)式的計(jì)算結(jié)果才為“ 0”。

我們可以通過將?放在indexOf(...)函數(shù)前面來檢查某一項(xiàng)是否存在于一個(gè)字符串或者數(shù)組中：

注意：ES6和ES7分別在String和Array中添加了一個(gè)新的.includes()方法。無疑，這是一種比~運(yùn)算符更簡潔的方法來檢查數(shù)組或字符串中是否存在項(xiàng)。

帶標(biāo)簽的聲明

JavaScript 具有l(wèi)abel語句的概念。它允許我們在 JavaScript  中命名循環(huán)和塊。然后，我們可以在以后使用break或continue時(shí)使用這些標(biāo)簽來引用代碼。

帶標(biāo)簽的語句在嵌套循環(huán)中特別方便。但是我們也可以使用它們將代碼簡單地組織成塊或創(chuàng)建可退出的塊。

“JavaScript中有哪些鮮為人知的技巧”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！