人們通常認(rèn)為 JavaScript 是一門很容易上手的語言，但是要做到精通卻不簡單。是的，這是因為 JavaScript 是一種非常古老且非常靈活的語言。它充滿了神秘的語法和過時的功能。到目前為止，我已經(jīng)使用 JavaScript 多年了，但是還是時不時就會發(fā)現(xiàn)一些我不知道的隱藏語法或技巧。

[[285445]]

我試圖列出一些鮮為人知的JavaScript功能。盡管其中一些功能在嚴(yán)格模式下無效，但它們?nèi)匀皇峭耆行У腏avaScript代碼。但是請注意，我不建議您開始使用所有這些功能。盡管它們絕對酷，但如果您開始使用它們，很有可能會讓你的隊友很生氣。

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

注意：本文并不包括諸如提升(Hoisting)，閉包，代理，原型繼承，async-await，生成器之類的東西。雖然這些功能可能不被大部分人所了解，但它們?nèi)匀皇潜娝苤摹?/p>

void 操作符

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

 

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

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

趣聞

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

定義 undefined?!

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

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

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

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

 

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

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

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

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

 

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

太酷了!

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

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

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

確實如此!

 

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

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

with 聲明

您知道嗎，JavaScript有一個with語句塊?實際上它是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)格模式下完全禁止這樣做。事實證明，使用塊會增加該語言的性能和安全性問題!

譯者注：

不建議使用with，因為with語句將對象的成員添加到當(dāng)前作用域，從而無法說出塊內(nèi)的變量實際指的是什么。由于難以調(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ò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è)我們有一個叫做greet的函數(shù)。我們希望我們的函數(shù)根據(jù)不同的語言環(huán)境打印不同的問候消息。此語言環(huán)境也應(yīng)該是可配置的。我們可以在某個地方維護(hù)全局語言環(huán)境變量，也可以使用如下所示的函數(shù)屬性來實現(xiàn)函數(shù)：

 

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

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

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

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

 

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

讓我們繼續(xù)!

參數(shù)屬性

我敢肯定你們大多數(shù)人都知道函數(shù)內(nèi)的arguments對象。它是一個數(shù)組，類似于對象，可以在所有函數(shù)中使用。它具有在調(diào)用時傳遞給函數(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提供的許多不錯的功能之一。但是，您知道標(biāo)記模版字符串嗎?

 

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

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

 

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

以下是一些很酷的例子，

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

Getters & Setters

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

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

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

 

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

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

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

逗號操作符

JavaScript 具有逗號運(yùn)算符。它允許我們在一行中編寫多個用逗號分隔的表達(dá)式，并返回最后一個表達(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--) 

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

 

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)換為時間戳!

 

!! Bang Bang 操作符

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

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

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

 

～ 按位操作符

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

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

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

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

 

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

帶標(biāo)簽的聲明

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

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