25個JavaScript代碼簡寫技巧(上篇)

對於任何JavaScript開發人員來講，這篇文章很值得一讀。這裏記錄了我多年來學習的JavaScript代碼簡潔寫法，也給你們提供一些編碼上的思考和取捨。

1. 三元(三目)運算符

若是隻想在一行中編寫if..else語句時，這是一個很好的節省代碼的方式。

常規：

簡寫：

嵌套版三元運算：

2. 短路判斷簡寫

將變量值分配給另外一個變量時，您可能但願確保源變量不爲null，undefined或爲空。您能夠編寫帶有多個條件的長 if 語句，也可使用短路判斷。

常規：

簡寫：

再來點示例，嘗試一下：

請注意，若是將variable1設置爲false或0，則賦值爲bar。

3. 聲明變量簡寫

常規：

簡寫：

4. If真值判斷簡寫

這多是微不足道的，但值得一提。在執行「if 檢查」時，有時能夠省略全等運算符。

常規：

簡寫：

注意：這兩個例子並不徹底相同，由於只要likeJavaScript是一個真值，檢查就會經過。

這是另外一個例子。若是a不等於true，那就作點什麼吧。

常規：

簡寫：

5. For循環簡寫

若是您想要純JavaScript而且不想依賴外部庫（如jQuery或lodash），這個小技巧很是有用。

常規：

簡寫：

若是您只想訪問索引，請執行如下操做：

若是要訪問文字對象中的鍵，這也適用：

Array.forEach簡寫：

6. 短路判斷賦值

若是預期參數爲null或undefined，咱們能夠簡單地使用短路邏輯運算符，只需一行代碼便可完成相同的操做，而不是編寫六行代碼來分配默認值。

常規：

簡寫：

7. 十進制基本指數

你可能已經看過這個了。它本質上是一種編寫沒有尾隨零的數字的奇特方式。例如，1e7實質上意味着1後跟7個零。它表示一個十進制基數（JavaScript解釋爲浮點類型）等於10,000,000。

常規：

簡寫：

8. 對象屬性簡寫

在JavaScript中定義對象很簡單。 ES6提供了一種更簡單的方法來爲對象分配屬性。若是變量名稱與對象鍵相同，則可使用簡寫表示法。

常規：

簡寫：

9. 箭頭函數簡寫

經典函數以簡單的形式易於讀寫，可是一旦你開始將它們嵌套在其餘函數調用中，它們每每會變得有點冗長和混亂。

常規：

簡寫：

重要的是要注意，箭頭函數內部的 this 與常規函數的不一樣，所以這兩個示例並不嚴格等效。有關詳細信息，請參閱有關箭頭函數語法的文章。

10. 隱式返回簡寫

Return 是咱們常常使用的關鍵字，用於返回函數的最終結果。具備單個語句的箭頭函數將隱式返回其執行結果（函數必須省略大括號（{}）以省略return關鍵字）。

要返回多行語句（例如對象），必須使用 () 而不是 {} 來包裝函數體。這可確保將代碼執行爲單個語句。

常規：

簡寫：

11. 默認參數值

您可使用if語句定義函數參數的默認值。在ES6中，您能夠在函數聲明自己中定義默認值。

常規：

簡寫：

12. 模板字符串

您是否厭倦了使用 '+' 將多個變量鏈接成一個字符串？有沒有更簡單的方法？若是你可以使用ES6，那麼你很幸運。您須要作的就是使用反引號，並使用 ${} 來包含變量。

常規：

簡寫：

13. 解構賦值簡寫

若是您正在使用任何流行的Web框架，那麼頗有可能您將使用對象形式的數組或數據，在組件和API之間傳遞信息。數據對象到達組件後，您須要將其解構。

常規：

簡寫：

您甚至能夠分配本身的變量名稱，好比entity替換原來對象中的contact:

---

相關文章：

25個JavaScript代碼簡寫技巧(下篇)

使用Array.isArray更好地檢查數組

Vue.js應用性能優化一

Vue.js應用性能優化二

Vue.js應用性能優化三

如何使用Vue.js渲染JSON中定義的動態組件

構建Vue.js組件的10個技巧