JavaScript 核心觀念(67) - ES6 章節:箭頭函式 - 箭頭函式實戰用法
前言
接下來將會介紹關於箭頭函式的實戰應用。
箭頭函式實戰用法
基本上箭頭函式很常見於搭配陣列方法,而這邊我先前有寫過一篇關於 關於 JavaScript 陣列20種操作的方法,所以如果想瞭解更多的話建議可以參考一下。
那麼先來看一個最簡單的範例:
1 | const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; |
那麼搭配前面的觀念之後,這一段程式碼可以縮寫成以下:
1 | const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; |
整體來講可以發現更精簡,但結果是一樣的。
接下來看課程上另一個範例程式碼:
1 | const average = function() { |
而上面整段程式碼我就不外解釋了,簡單來講就是將傳入的值轉換成一個陣列並一路 1 + …5 最後在取得平均值,那如果要轉換成箭頭韓式的話該如何調整呢?
1 | const average = (...num) => num.reduce((acc, val) => acc + val, 0) / num.length; |
這邊可以發現 average
的函式是使用其餘參數取代箭頭函式沒有 arguments
的問題,整體來講可以看到箭頭函式非常的短且好用,但是這邊要注意一件事情,雖然箭頭函式可以讓程式碼看起來很精簡,但是如果邏輯較複雜時,其實是不建議過度精簡的。