這些不爲人知的JavaScript特性，你知道多少？

這些不爲人知的JavaScript特性，你知道多少？

圖片
做者｜Viral Shah
譯者｜無明
JavaScript 一般被認爲是最容易入門卻最難以掌握的編程語言。我徹底贊同這種說法。這是由於 JavaScript 是一門很是古老卻又很是靈活的語言。它有着各類各樣神祕的語法和古老的特性。我是一個 JavaScript 老用戶，直到如今，我仍然會時不時地發現一些我歷來都不知道的隱藏語法或技巧。
圖片
我將在這篇文章中列出一些不爲人知的 JavaScript 特性。雖然其中一些在 strict 模式下是無效的，但它們仍然是有效的 JavaScript 代碼。但請注意，我不建議你使用全部這些特性。雖然它們看起來很酷，但若是你真的使用了這些特性，頗有可能會讓你的隊友吐血。
全部相關的代碼均可以在這裏（https://gist.github.com/viral-sh/98813f83f4afe9dce5a74e176f88724f）找到，祝你編程愉快！
注意：我不會說起諸如 Hoisting、閉包、代理、原型繼承、async/await、生成器，等等。雖然這些特性可能不太好理解，但它們實際上是衆所周知的。
void 運算符
JavaScript 提供了一個一元運算符 void，你可能已經看到過它的這種用法，好比 void(0) 或 void 0。它的做用只有一個——計算其右邊的表達式並返回 undefined。使用「0」只是一種慣例，你不必定要使用「0」，它能夠是任何有效的表達式，如 void，它仍然會返回 undefined。
圖片
爲何要建立一個特殊的關鍵字來返回 undefined，而不是直接返回 undefined？這彷佛有點多餘，不是嗎？
實際上，在 ES5 以前，你能夠在大多數瀏覽器中爲給 undeunfined 賦值，好比 undeunfined = 「abc」。在那個時候，使用 void 是一種確保老是可以返回 undefined 的方法。
構造函數的括號是可選的
在調用構造函數時，類名後面的括號是可選的（前提是你不須要傳遞任何參數）！
下面的代碼都是有效的 JS 語法，而且會給你徹底相同的結果！
圖片

能夠跳過 IIFE 的括號

IIFE（當即調用函數表達式）的語法對我來講老是有點奇怪。那些括號都有什麼做用？
那些額外的括號只是爲了告訴 JavaScript 解析器，後面的代碼是一個函數表達而不是一個函數。知道了這一點，咱們就有不少方法能夠跳過這些額外的括號，並仍然可使用有效的 IIFE。
圖片
void 運算符告訴解析器後面的代碼是函數表達式。所以，咱們能夠跳過函數定義周圍的括號。咱們還可使用任何一元運算符（void、+、!、-，等等），它們都是有效的！
你可能會想，一元運算符不會影響 IIFE 返回的結果嗎？
它確實會影響返回的結果。但若是你關心結果，並但願將結果賦給在某個變量，那麼首先你就不須要額外的括號。
圖片
咱們添加這些括號只是爲了更好的可讀性。
with 語句

JavaScript 也支持 with 塊？with 其實是 JS 的一個關鍵字。with 塊的語法以下：

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

with 將「對象」的全部屬性添加到用於計算語句的做用域鏈中。
圖片
with 塊看起來很是酷，它甚至比對象解構更好，但其實並不盡然。
一般不鼓勵使用 with 語句，由於它已經被棄用。在 strict 模式下是被徹底禁止的。事實證實，使用 with 塊會帶來一些性能和安全方面的問題。

Function 構造函數

function 語句並非定義新函數的惟一方法，你可使用 Function() 構造函數和 new 運算符動態定義函數。
圖片
最後一個參數是函數的字符串化代碼，前面的其餘參數是函數的參數。
Function 構造函數是 JavaScript 中全部構造函數的祖先。甚至 Object 的構造函數也是 Function。而 Function 本身的構造函數也是 Function 自己。所以，若是調用 object.constructor.constructor…足夠多的次數，最後將得到 Function 構造函數。
函數屬性
咱們都知道，函數是 JavaScript 的一等對象。所以，咱們固然能夠向函數添加自定義屬性。這樣作是徹底有效的。然而，它不多被這樣使用。
那麼，咱們何時會這麼作呢？

可配置的函數

假設咱們有一個叫做 greet 的函數。咱們但願它可以根據不一樣的區域設置打印出不一樣的問候語。區域設置也應該是可配置的。咱們能夠在某處維護一個全局區域環境變量，或者咱們也可使用函數屬性來實現這個函數，以下所示：

具備靜態變量的函數
另外一個相似的例子，假設你想要實現一個生成一系列有序數字的數字生成器。一般，你會使用 Class 或 IIFE，並使用一個靜態計數器變量來跟蹤最後一個值。這樣咱們就能夠限制對計數器的訪問，並避免使用額外的變量來污染全局命名空間。
可是，若是咱們但願可以靈活地讀取甚至是修改計數器，而且不污染全局命名空間呢？
咱們仍然能夠建立一個 Class，帶有一個計數器變量和一些額外的方法來讀取它，或者咱們可使用函數的屬性。

參數屬性

我相信大多數人都知道函數的 arguments 對象。它是一種相似於數組的對象，全部函數都包含了它。它包含了在調用函數時傳給函數的全部參數，但它也有一些其餘有趣的屬性：

• arguments.callee：指當前調用的函數；
• arguments.callee.caller：指調用當前函數的函數。
  
  注意：儘管 ES5 禁止在 strict 模式下使用 callee 和 caller，但在不少編譯庫中仍然很常見。

  標記模板字面量

  除非你與世隔絕，不然你必定據說過模板字面量。模板字面量是 ES6 的衆多很酷的補充特性之一。可是，你知道標記模板字面量嗎？
  
  在使用標記模板字面量時，你能夠經過向模板字面量添加自定義標記來更好地控制如何將模板字面量解析爲字符串。標記只是一個解析器函數，它獲取字符串模板中全部的字符串和值。標記函數負責返回最終的字符串。
  在下面的示例中，咱們的自定義標記——highlight，解釋模板字面量的值，並使用元素將解釋的值包裝在結果字符串中，以突出顯示。
  

  Getter 和 Setter

  JavaScript 對象的大部分東西是很簡單的。假設咱們有一個 user 對象，而且咱們使用 user.age 來訪問它的 age 屬性，若是定義了 age 屬性，咱們就會獲得它的值，若是沒有，咱們就會獲得 undefined。
  可是，它也可能不會這麼簡單。JavaScript 對象也有 Getter 和 Setter 的概念。咱們能夠編寫自定義的 Getter 函數來返回咱們想要的任何東西，而不是直接返回對象的值。設置值也是同樣的。
  這樣咱們在獲取或設置字段時就擁有了一些強大的概念，如虛擬字段、字段驗證、反作用，等等。

Getter 和 Setter 並非 ES5 的新增功能，它們一直都存在。ES5 只是爲它們添加了方便的語法。

逗號運算符

JavaScript 提供了一個逗號運算符，咱們能夠用它在一行中編寫由逗號分隔的多個表達式，並返回最後一個表達式的結

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

!! 運算符

從技術上講，它並非一個單獨的 JavaScript 運算符。它的效果與使用兩次 JavaScript 否認運算符是同樣的。
!! 是將任何表達式轉換爲布爾值的一個巧妙的技巧。
若是表達式是真值，則返回 true，不然返回 false。

~ 運算符

沒有人會關心位運算符，由於咱們幾乎不多會用它！但它確實有一些使用場景！
當與數字一塊兒使用時，好比~N => -(N + 1)。這個表達式只在 N == -1 時結果爲「0」。
咱們能夠在 indexOf(…) 函數前面加一個~ 來進行布爾檢查，看看一個項是否存在於 String 或 Array 中。

注意：ES6 和 ES7 分別在 String 和 Array 中添加了一個新的.includes() 方法。固然，它比使用~ 運算符檢查項目是否存在於 Array 或 String 中更清晰一些。

標籤語句

JavaScript 也有標籤語句的概念。咱們能夠在 JavaScript 中使用標籤來命名循環和代碼塊。而後，咱們能夠在 break 或 continue 時經過這些標籤返回到以前的代碼。
在嵌套循環中使用標籤語句會很是方便，咱們也可使用它們來將代碼組織成代碼塊或建立可 break 的代碼塊。

注意：與其餘一些語言不一樣，JavaScript 中沒有 goto。所以，咱們只能使用在 break 和 continue 中使用標籤。
英文原文：
https://blog.usejournal.com/little-known-features-of-javascript-901665291387活動推薦2019 年 4 月 25-27 日北京國際會議中心，QCon 與您相約得到啓發，共同關注行業趨勢與工程實踐。點擊 「閱讀原文」 或識別二維碼瞭解 QCon 十週年精心策劃，早鳥 7 折立減 2640 元，有任何問題歡迎聯繫票務小姐姐 Ring：電話 010-53935761，微信 qcon-0410