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

本篇內容介紹了“JavaScript中有哪些鮮為人知的技巧”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

void 操作符

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

為什么創造了一個特殊的關鍵字來返回 undefined 而不是直接返回 undefined呢?

聽起來好像有一點冗余對吧?

趣聞

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

定義 undefined?!

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

構造函數后面的括號是可選的

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

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

IIFE 函數的括號可以省略

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

那些括號我到底應該怎么用?

事實證明，這些額外的括號僅僅是為了告訴 JavaScript  解析器即將發布的代碼是函數表達式，而不是函數。可以想象，知道了這一點，有很多方法可以跳過那些多余的括號，并且仍然可以制作出有效的IIFE。

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

太酷了!

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

一元運算符不會影響IIFE返回的任何結果嗎?

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

確實如此!

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

想要了解有關IIFE結帳的更多信息，可以去看看 Chandra Gundamaraju的這篇很酷的文章

with 聲明

您知道嗎，JavaScript有一個with語句塊?實際上它是JS中的關鍵字。編寫with塊的語法如下：

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

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

趣聞

with聽起來非常酷，對吧?它甚至比對象解構更好。

好吧，不是這樣的。

通常不建議使用with語句，因為它已被棄用。在嚴格模式下完全禁止這樣做。事實證明，使用塊會增加該語言的性能和安全性問題!

譯者注：

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

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

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

Function 構造函數

函數聲明不是定義新函數的唯一方法;您可以使用Function()構造函數以及new運算符動態地定義函數。

最后一個構造函數參數是函數的字符串化代碼以及之前的其他參數為函數參數。

趣聞

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

函數屬性

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

那么我們什么時候想要這樣做呢?

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

可配置函數

假設我們有一個叫做greet的函數。我們希望我們的函數根據不同的語言環境打印不同的問候消息。此語言環境也應該是可配置的。我們可以在某個地方維護全局語言環境變量，也可以使用如下所示的函數屬性來實現函數：

帶有靜態變量的函數

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

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

是的，我們仍然可以創建一個類，它帶有counter變量和一些其他讀取counter的方法;或者我們偷個懶，只在函數上使用屬性。

這是一個很長的 list，我們剛剛寫了一半。如果您想休息一下，現在是個好時機。如果您要繼續看下去，好吧，我向您致敬!

讓我們繼續!

參數屬性

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

• arguments.callee：引用當前調用的函數

• arguments.callee.caller：引用已調用當前函數的函數

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

標記模板字符串

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

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

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

在許多庫都可以發現一些有趣的用例是利用此功能來實現的。

以下是一些很酷的例子，

• React styled-components

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

• chalk 用于彩色的 log

Getters & Setters

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

但是，可以不必這么簡單。JavaScript對象具有Getter和Setter的概念。可以直接編寫自定義Getter函數以返回所需的任何內容，而不是直接返回對象的值。設置值也一樣。

這使我們在獲取或設置字段時擁有虛擬字段，字段驗證，副作用等強大的能力。

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

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

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

逗號操作符

JavaScript 具有逗號運算符。它允許我們在一行中編寫多個用逗號分隔的表達式，并返回最后一個表達式的結果

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

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

您可能已經在for循環中使用了逗號運算符：

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

有時它可以用來幫助我們在同一行中寫多個語句：

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

或者寫短的 lamda 函數：

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

加號操作符

你是否曾經遇到過需要將字符串快速轉換為數字的場景?

只需在字符串前面加上+運算符即可。

加號運算符還適用于負，八進制，十六進制，指數值。而且，它甚至可以將Date或Moment.js對象轉換為時間戳!

!! Bang Bang 操作符

好的，從技術上講，它不是獨立的 JavaScript 運算符。只是把 JavaScript 否定運算符使用了兩次。

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

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

～ 按位操作符

面對現實吧——沒人在乎按位運算符。我們什么時候才能使用它!

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

事實證明，當與數字一起使用時，按位非運算符才有效。比如：?N =>-(N + 1)。僅當N == -1時，此表達式的計算結果才為“ 0”。

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

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

帶標簽的聲明

JavaScript 具有label語句的概念。它允許我們在 JavaScript  中命名循環和塊。然后，我們可以在以后使用break或continue時使用這些標簽來引用代碼。

帶標簽的語句在嵌套循環中特別方便。但是我們也可以使用它們將代碼簡單地組織成塊或創建可退出的塊。

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