在這篇文章中，將分享 12 個非常有用的 JavaScript 技巧，可以幫助你寫出簡潔且高性能的代碼。

1. 過濾唯一值

ES6 引入了 Set 對象和延展（spread）語法…，我們可以用它們來創建一個只包含唯一值的數組。

在 ES6 之前，獲得同樣的數組需要更多的代碼！

這個技巧可以支持包含原始類型的數組：undefined、null、boolean、string 和 number。但如果你的數組包含了對象、函數或其他嵌套數組，就不能使用這種方法了。

2. 在循環中緩存數組長度

在我們學習使用 for 循環時，一般建議使用這種結構：

在使用這種方式時，for 循環的每次迭代都會重複計算數組長度。

有時候這個會很有用，但在大多數情況下，如果能夠緩存數組的長度會更好，這樣只需要計算一次就夠了。我們可以把數組長度複製給一個叫作 length 的變量，例如：

這段代碼和上面的差不多，但從性能方面來看，即使數組變得很大，也不需要花費額外的運行時重複計算 array.length。

3. 短路求值

使用三元運算符可以很快地寫出條件語句，例如：

但有時候三元運算符仍然很複雜，我們可以使用邏輯運算符 && 和||來替代，讓代碼更簡潔一些。這種技巧通常被稱為“短路求值”。

假設我們想要返回兩個或多個選項中的一個，使用 && 可以返回第一個 false。如果所有操作數的值都是 true，將返回最後一個表達式的值。

使用||可以返回第一個 true。如果所有操作數的值都是 false，將返回最後一個表達式的值。

示例 1

假設我們想要返回一個變量的 length，但又不知道變量的類型。

我們可以使用 if/else 來檢查 foo 是否是一個可接受的類型，但這樣會讓代碼變得很長。這個時候可以使用短路求值：

對於上述兩種情況，如果變量 foo 具有 length 屬性，這個屬性的值將被返回，否則將返回 0。

示例 2

你是否曾經在訪問嵌套對象屬性時遇到過問題？你可能不知道對象或某個子屬性是否存在，所以經常會碰到讓你頭疼的錯誤。

假設我們想要訪問 this.state 中的一個叫作 data 的屬性，但 data 卻是 undefined 的。在某些情況下調用 this.state.data 會導致 App 無法運行。為了解決這個問題，我們可以使用條件語句：

但這樣似乎有點囉嗦，而||提供了更簡潔的解決方案：

4. 轉換成布爾值

除了標準的布爾值 true 和 false，在 JavaScript 中，所有的值要麼是“真值”要麼是“假值”。

在 JavaScript 中，除了 0、“”、null、undefined、NaN 和 false 是假值之外，其他的都是真值。

我們可以使用! 雲算法來切換 true 和 false。

5. 轉換成字符串

要快速將數字轉換成字符串，我們可以使用 + 運算符，然後在後面跟上一個空字符串。

6. 轉換成數字

要把字符串轉成數字，也可以使用 + 運算符。

也可以使用這種方式將布爾值轉成數字，例如：

在某些情況下，+ 運算符會被解析成連接操作，而不是加法操作。對於這種情況，可以使用兩個波浪號：~~。

一個波浪號表示按位取反操作，例如，~15 等於 -16。

使用兩個波浪號可以再次取反，因為 -(-n-1)=n+1-1=n，所以~-16 等於 15。

7. 快速冪運算

從 ES7 開始，可以使用 ** 進行冪運算，比使用 Math.power(2,3) 要快得多。

但要注意不要把這個運算符於 ^ 混淆在一起了，^ 通常用來表示指數運算，但在 JavaScript 中，^ 表示位異或運算。

在 ES7 之前，可以使用位左移運算符 << 來表示以 2 為底的冪運算：

例如，2 << 3 = 16 等同於 2 ** 4 = 16。

8. 快速取整

我們可以使用 Math.floor()、Math.ceil() 或 Math.round() 將浮點數轉換成整數，但有另一種更快的方式，即使用位或運算符 |。

| 的實際行為取決於操作數是正數還是負數，所以在使用這個運算符時要確保你知道操作數是正是負。

如果 n 是正數，那麼 n|0 向下取整，否則就是向上取整。它會移除小數部分，也可以使用~~ 達到同樣的效果。

移除整數尾部數字

| 運算符也可以用來移除整數的尾部數字，這樣就不需要像下面這樣：

相反，我們可以這樣：

9. 自動類綁定

在 ES6 中，我們可以使用箭頭進行隱式綁定，這樣可以為類的構造器省下一些代碼，並跟一些重複出現的表達式說再見，比如 this.myMethod = this.myMethod.bind(this)。

10. 截取數組

如果你想從一個數組尾部移除某些元素，可以使用一種比 splice() 更快的方法。

例如，如果你知道初始數組的大小，可以像下面這樣重新定義它的 length 屬性：

這顯然是一種更簡潔的解決方案。不過，我發現 slice() 的運行速度更快，所以，如果你更看重速度，可以像下面這樣：

11. 獲取數組最後的元素

數組的 slice() 方法可以接受負整數，並從數組的尾部開始獲取元素。

12. 格式化 JSON

你之前可能使用過 JSON.stringify，但你是否知道它還可以用來給 JSON 添加縮進？

stringify() 方法可以接受兩個額外的參數，一個是函數（形參為 replacer），用於過濾要顯示的 JSON，另一個是空格個數（形參為 space）。

space 可以是一個整數，表示空格的個數，也可以是一個字符串（比如’\t’表示製表符），這樣得到的 JSON 更容易閱讀。

喜歡的可以給個關注！

閱讀更多 JAVA架構師之路 的文章

關鍵字: JavaScript 有用 算法