14個 JavaScript 中鮮為人知的技巧

英文 |  http://developer.51cto.com/art/201912/607686.htm

人們通常認為 JavaScript 是一門很容易上手的語言，但是要做到精通卻不簡單。是的，這是因為 JavaScript 是一種非常古老且非常靈活的語言。

它充滿了神秘的文法和過時的功能。到目前為止，我已經使用 JavaScript 多年了，但是還是時不時就會發現一些我不知道的隐藏文法或技巧。

我試圖列出一些鮮為人知的JavaScript功能。盡管其中一些功能在嚴格模式下無效，但它們仍然是完全有效的JavaScript代碼。

但是請注意，我不建議您開始使用所有這些功能。盡管它們絕對酷，但如果您開始使用它們，很有可能會讓你的隊友很生氣。

此處提供了所有使用的源代碼。Happy Coding!

注意：本文并不包括諸如提升(Hoisting)，閉包，代理，原型繼承，async-await，生成器之類的東西。雖然這些功能可能不被大部分人所了解，但它們仍然是衆所周知的。

1、void 操作符

JavaScript 具有一進制void運算符。您可能已經看到它用作void(0)或void 0。它的生命中隻有一個目标——在表達式的正确位置傳回**undefined**。

使用“0”隻是一個約定。您不一定必須使用“ 0”，它可以是任何有效的表達式void ，并且仍傳回**undefined。**

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

聽起來好像有一點備援對吧?

趣聞

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

定義 undefined?!

是以在那個時候，使用 void 是確定您始終傳回原始 undefined 的一種方法。

2、構造函數後面的括号是可選的

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

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

3、IIFE 函數的括号可以省略

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

那些括号我到底應該怎麼用?

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

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

太酷了!

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

一進制運算符不會影響IIFE傳回的任何結果嗎?

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

确實如此!

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

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

4、with 聲明

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

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

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

趣聞

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

好吧，不是這樣的。

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

譯者注：

不建議使用with，因為with語句将對象的成員添加到目前作用域，進而無法說出塊内的變量實際指的是什麼。由于難以調試和讀取這些類型的功能，是以許多人認為這是一種不好的做法。

5、Function 構造函數

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

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

趣聞

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

6、函數屬性

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

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

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

可配置函數

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

帶有靜态變量的函數

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

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

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

7、參數屬性

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

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

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

8、标記模闆字元串

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

帶有标記的模闆字元串可以通過向模闆字元串添加自定義标記，來更好地控制将模闆字元串解析為字元串的過程。Tag隻是一個解析器函數，它擷取由字元串模闆解釋的所有字元串和值的數組，并傳回最終字元串。

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

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

以下是一些很酷的例子，

• react styled-components
• es2015-i18n-tag 用于翻譯和國際化
• chalk 用于彩色的 log

9、Getters & Setters

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

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

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

Getters和Setters在 ES5 中不是新增功能。他們一直在那裡。ES5 隻是在現有功能中添加了友善的文法。要了解有關 Getters&Setters的更多資訊，請參閱這篇不錯的文章)

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

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

10、逗号操作符

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)      

11、加号操作符

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

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

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

12、!! Bang Bang 操作符

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

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

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

13、～ 按位操作符

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

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

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

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

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

14、帶标簽的聲明

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

帶标簽的語句在嵌套循環中特别友善。但是我們也可以使用它們将代碼簡單地組織成塊或建立可退出的塊。

本文完〜