JavaScript 開發人員需要知道的簡寫技巧

本文來源于多年的 JavaScript 編碼技術經驗，适合所有正在使用 JavaScript 程式設計的開發人員閱讀。

本文的目的在于幫助大家更加熟練的運用 JavaScript 語言來進行開發工作。

文章将分成初級篇和進階篇兩部分，分别進行介紹。

1、三目運算符

下面是一個很好的例子，将一個完整的 if 語句，簡寫為一行代碼。

簡寫為：

2、循環語句

當使用純 JavaScript（不依賴外部庫，如 jQuery 或 lodash）時，下面的簡寫會非常有用。

下面是周遊數組 forEach 的簡寫示例：

3、聲明變量

在函數開始之前，對變量進行指派是一種很好的習慣。在申明多個變量時：

可以簡寫為：

4、if 語句

在使用 if 進行基本判斷時，可以省略指派運算符。

5、十進制數

可以使用科學計數法來代替較大的資料，如可以将 10000000 簡寫為 1e7。

6、多行字元串

如果需要在代碼中編寫多行字元串，就像下面這樣：

但是還有一個更簡單的方法，隻使用引号：

1、變量指派

當将一個變量的值賦給另一個變量時，首先需要確定原值不是 null、未定義的或空值。

可以通過編寫一個包含多個條件的判斷語句來實作：

或者簡寫為以下的形式：

2、預設值指派

如果預期參數是 null 或未定義，則不需要寫六行代碼來配置設定預設值。我們可以隻使用一個簡短的邏輯運算符，隻用一行代碼就能完成相同的操作。

3、對象屬性

ES6 提供了一個很簡單的辦法，來配置設定屬性的對象。如果屬性名與 key 名相同，則可以使用簡寫。

4、箭頭函數

經典函數很容易讀寫，但是如果把它們嵌套在其它函數中進行調用時，整個函數就會變得有些冗長和混亂。這時候可以使用箭頭函數來簡寫：

5、隐式傳回值

傳回值是我們通常用來傳回函數最終結果的關鍵字。隻有一個語句的箭頭函數，可以隐式傳回結果（函數必須省略括号（{ }），以便省略傳回關鍵字）。

要傳回多行語句（例如對象文本），需要使用（）而不是{ }來包裹函數體。這樣可以確定代碼以單個語句的形式進行求值。

6、預設參數值

可以使用 if 語句來定義函數參數的預設值。ES6 中規定了可以在函數聲明中定義預設值。

7、模闆字元串

過去我們習慣了使用“+”将多個變量轉換為字元串，但是有沒有更簡單的方法呢？

ES6 提供了相應的方法，我們可以使用反引号和 $ { } 将變量合成一個字元串。

8、解構指派

解構指派是一種表達式，用于從數組或對象中快速提取屬性值，并賦給定義的變量。

在代碼簡寫方面，解構指派能達到很好的效果。

甚至可以指定自己的變量名：

9、展開運算符

展開運算符是在 ES6 中引入的，使用展開運算符能夠讓 JavaScript 代碼更加有效和有趣。

使用展開運算符可以替換某些數組函數。

和 concat( ) 功能不同的是，使用者可以使用擴充運算符在任何一個數組中插入另一個數組。

也可以将展開運算符和 ES6 解構符号結合使用：

10、強制參數

預設情況下，如果不向函數參數傳值，那麼 JavaScript 會将函數參數設定為未定義。其它一些語言則會發出警告或錯誤。要執行參數配置設定，可以使用if語句抛出未定義的錯誤，或者可以利用“強制參數”。

11、Array.find

如果你曾經編寫過普通 JavaScript 中的 find 函數，那麼你可能使用了 for 循環。在 ES6 中，介紹了一種名為 find（）的新數組函數，可以實作 for 循環的簡寫。

12、Object [key]

雖然将 foo.bar 寫成 foo ['bar'] 是一種常見的做法，但是這種做法構成了編寫可重用代碼的基礎。

請考慮下面這個驗證函數的簡化示例：

上面的函數完美的完成驗證工作。但是當有很多表單，則需要應用驗證，此時會有不同的字段和規則。如果可以建構一個在運作時配置的通用驗證函數，會是一個好選擇。

現在有了這個驗證函數，我們就可以在所有窗體中重用，而無需為每個窗體編寫自定義驗證函數。

13、雙位操作符

位操作符是 JavaScript 初級教程的基本知識點，但是我們卻不常使用位操作符。因為在不處理二進制的情況下，沒有人願意使用 1 和 0。

但是雙位操作符卻有一個很實用的案例。你可以使用雙位操作符來替代 Math.floor( )。雙否定位操作符的優勢在于它執行相同的操作運作速度更快。

上述是一些常用的 JavaScript 簡寫技巧，如果有其它未提及的簡寫技巧，也歡迎大家補充。

本文作者：佚名

來源：51CTO