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

14. 多行字符串

若是您發現本身須要在代碼中編寫多行字符串，那麼您能夠編寫它：

常規：

可是有一種更簡單的方法。只需使用反引號。

簡寫：

15. 展開(spread)操做符

ES6中引入的展開運算符有幾個用例，可使JavaScript代碼更高效，更有趣。它能夠用來替換某些數組函數。展開操做符只是連續的三個點。

常規：

簡寫：

與 concat() 函數不一樣，您可使用spread運算符在另外一個數組內的任何位置插入數組。

您還能夠將spread運算符與ES6解構表示法結合使用：

16. 強制參數

默認狀況下，若是未傳遞值，JavaScript會將函數參數設置爲undefined。其餘一些語言會引起警告或錯誤。要強制執行參數賦值，可使用 if 語句在未定義時拋出錯誤。

常規：

簡寫：

17. Array.find

若是您曾經在純JavaScript中編寫過 find 函數，那麼您可能已經使用了for循環。在ES6中，引入了一個名爲 find() 的新數組函數

常規：

簡寫：

18. Object[key]

你知道Foo.bar也能夠寫成Foo ['bar']嗎？起初，彷佛沒有理由應該這樣寫。可是，這種表示法能夠爲編寫可重用代碼塊提供方便。

思考一下，驗證函數的這個簡化示例：

這個功能完美地完成了它的工做，可是請考慮這樣一種狀況，即您須要驗證的表單有不少，表單都具備不一樣字段和規則。構建可在運行時配置的通用驗證函數不是更好嗎？

簡寫：

如今咱們有了一個通用驗證函數，能夠在全部表​​單中重用，而無需爲每一個表單編寫自定義驗證函數。

19. 雙取反運算

雙取反運算符有一個很是實用的場景。您能夠將它用做 Math.floor() 的替代品。 雙取反運算符的優勢是它能夠更快地執行相同的操做。

常規：

簡寫：

20. 數學指數冪函數

常規：

簡寫：

21. 將字符串轉換爲數字

有時，您的代碼會接收String類型的參數，但須要以數字類型處理。這不是什麼大問題，咱們能夠進行快速轉換。

常規：

簡寫：

22. 對象屬性賦值

考慮如下代碼：

你會如何把它們合併爲一個對象？

一種方法是編寫一個將第二個對象的數據複製到第一個對象的函數。

最簡單的方法是，使用ES6中引入的 Object.assign 函數：

您還可使用ES8中引入的對象銷燬表示法：

您能夠合併的對象屬性數量沒有限制。若是確實具備相同屬性名稱的對象，則將按合併的順序覆蓋值。

23. 取反運算 和 IndexOf

使用數組執行查找時，indexOf() 函數用於檢索您要查找的項目的位置。若是未找到該項，則返回值-1。在JavaScript中，0被認爲是'falsy'，而大於或小於0的數字被認爲是'truthy'。所以，必須像這樣編寫正確的代碼。

常規：

簡寫：

取反（〜）運算符對 -1 之外的任何值，都返回 truthy 值。對它進行非運算，直接 !〜。

或者，咱們也可使用 includes() 函數：

24. Object.entries()

這是ES8中引入的一項功能，容許您將對象轉換爲鍵/值對數組。請參閱如下示例：

25. Object.values()

這也是ES8中引入的一個新功能，它執行與 Object.entries() 相似的功能，但沒有key部分：

看到這裏，都已經介紹完了。才疏學淺，若是您有其餘好的技巧，歡迎留言評論。

---

相關文章：

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

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

Vue.js應用性能優化一

Vue.js應用性能優化二

Vue.js應用性能優化三

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

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