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部分:

看到這裏,都已經介紹完了。才疏學淺,如果您有其他好的技巧,歡迎留言評論。


相關文章:

Vue.js應用性能優化一

Vue.js應用性能優化二

Vue.js應用性能優化三

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

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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章