14個你不知道的 JavaScript 技巧

本文翻譯自《Little known features of JavaScript》

人們一般認爲 JavaScript 是一門很容易上手的語言，可是要作到精通卻不簡單。是的，這是由於 JavaScript 是一種很是古老且很是靈活的語言。它充滿了神祕的語法和過期的功能。到目前爲止，我已經使用 JavaScript 多年了，可是仍是時不時就會發現一些我不知道的隱藏語法或技巧。

我試圖列出一些不爲人知的JavaScript功能。儘管其中一些功能在嚴格模式下無效，但它們仍然是徹底有效的JavaScript代碼。可是請注意，我不建議您開始使用全部這些功能。儘管它們絕對酷，但若是您開始使用它們，頗有可能會讓你的隊友很生氣。

此處提供了全部使用的源代碼。Happy Coding！

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

void 操做符

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

img

爲何創造了一個特殊的關鍵字來返回 undefined 而不是直接返回 undefined呢？

聽起來好像有一點冗餘對吧？

🚩 趣聞

好吧，事實證實，在ES5以前，您實際上能夠在大多數瀏覽器中爲原始的 undefined 分配一個新值，像是 undefined =「 abc」。

定義 undefined？！

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

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

是的，在調用構造函數時，咱們在類名後添加的括號是徹底可選的！😮（前提是您不須要將任何參數傳遞給構造函數）

如下兩種代碼樣式均被視爲有效的 JS 語法，而且結果是相同的！

img

IIFE 函數的括號能夠省略

對於我來講，IIFE（當即調用功能表達式）的語法老是有點奇怪。

那些括號我到底應該怎麼用？

事實證實，這些額外的括號僅僅是爲了告訴 JavaScript 解析器即將發佈的代碼是函數表達式，而不是函數。能夠想象，知道了這一點，有不少方法能夠跳過那些多餘的括號，而且仍然能夠製做出有效的IIFE。

IIFE(without return)

void 運算符告訴解析器代碼是函數表達式。所以，咱們能夠跳過函數定義的括號。你猜怎麼着？咱們可使用任何一元運算符（void，+，！，-等）來讓它奏效！

太酷了！

可是，若是您是一個敏銳的觀察者，您可能會想，

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

好吧，這會影響結果。可是，好消息是，若是您關心結果並說要將其存儲在某個變量中，那麼首先就不須要多餘的括號。

確實如此！

IIFE(with return)

咱們添加這些括號只是爲了提升人類可讀性。

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

with 聲明

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

with (object)
   statement 
// for multiple statements add a block
with (object) {
   statement
   statement
   ...
}
複製代碼

with 把傳入的對象的全部屬性添加到當前做用域鏈中：

img

🚩趣聞

with聽起來很是酷，對吧？它甚至比對象解構更好。

好吧，不是這樣的。

一般不建議使用with語句，由於它已被棄用。在嚴格模式下徹底禁止這樣作。事實證實，使用塊會增長該語言的性能和安全性問題！

譯者注：

不建議使用with，由於with語句將對象的成員添加到當前做用域，從而沒法說出塊內的變量實際指的是什麼。因爲難以調試和讀取這些類型的功能，所以許多人認爲這是一種很差的作法，能夠參考如下信息瞭解更多：

• https://eslint.org/docs/rules/no-with

• https://eslint.org/docs/rules/no-new-func#disallow-function-constructor-no-new-func

Function 構造函數

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

img

最後一個構造函數參數是函數的字符串化代碼以及以前的其餘參數爲函數參數。

🚩趣聞

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

函數屬性

衆所周知，函數是JavaScript中的「一等公民」。所以，沒有人阻止咱們向函數添加自定義屬性。這在JS中是徹底正確的事情。可是，它不多使用。

那麼咱們何時想要這樣作呢？

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

可配置函數

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

img

帶有靜態變量的函數

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

可是，若是咱們想靈活地讀取甚至修改計數器而又不污染全局空間怎麼辦？

是的，咱們仍然能夠建立一個類，它帶有counter變量和一些其餘讀取counter的方法；或者咱們偷個懶，只在函數上使用屬性。

img

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

讓咱們繼續！

參數屬性

我敢確定大家大多數人都知道函數內的arguments對象。它是一個數組，相似於對象，能夠在全部函數中使用。它具備在調用時傳遞給函數的參數列表。可是它還具備其餘一些有趣的特性，

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

img

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

標記模板字符串

除非您與世隔絕，不然您確定據說過模版字符串。模版字符串是ES6提供的許多不錯的功能之一。可是，您知道標記模版字符串嗎？

img

帶有標記的模板字符串能夠經過向模板字符串添加自定義標記，來更好地控制將模板字符串解析爲字符串的過程。Tag只是一個解析器函數，它獲取由字符串模板解釋的全部字符串和值的數組，並返回最終字符串。

在下面的示例中，咱們的自定義標籤highlight解釋模板字符串的值，而且還將解釋後的值使用<mark>元素包裝在結果字符串中以突出顯示。

img

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

如下是一些很酷的例子，

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

Getters & Setters

在大多數狀況下，JavaScript對象很簡單。假設咱們有一個user對象，並嘗試使用user.age訪問其年齡屬性，若是定義了年齡屬性，咱們將得到年齡屬性的值；不然，將得到未定義屬性。簡單。

可是，能夠沒必要這麼簡單。JavaScript對象具備Getter和Setter的概念。能夠直接編寫自定義Getter函數以返回所需的任何內容，而不是直接返回對象的值。設置值也同樣。

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

img

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

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對象轉換爲時間戳！

img

!! Bang Bang 操做符

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

可是Bang Bang（!!）聽起來很酷！Bang Bang或Double Bang是將全部表達式轉換爲布爾值的巧妙技巧。

若是表達式是 truthy 的值，則返回 true；不然返回 false。

img

～ 按位操做符

面對現實吧——沒人在意按位運算符。咱們何時才能使用它！

好吧，按位非（～）運算符天天都有用例。

事實證實，當與數字一塊兒使用時，按位非運算符纔有效。好比：〜N =>-（N + 1）。僅當N == -1時，此表達式的計算結果才爲「 0」。

咱們能夠經過將〜放在indexOf（...）函數前面來檢查某一項是否存在於一個字符串或者數組中：

img

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

帶標籤的聲明

JavaScript 具備label語句的概念。它容許咱們在 JavaScript 中命名循環和塊。而後，咱們能夠在之後使用break或continue時使用這些標籤來引用代碼。

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

img

注意：與其餘某些語言不一樣，JavaScript沒有goto構造。所以，咱們只能使用帶有break和continue的標籤。

若是你還有一些 JavaScript 中不爲人知的用法，能夠在評論裏分享您的經驗～