JavaScript 核心觀念(67) - ES6 章節:箭頭函式 - 箭頭函式實戰用法

前言

接下來將會介紹關於箭頭函式的實戰應用。

箭頭函式實戰用法

基本上箭頭函式很常見於搭配陣列方法,而這邊我先前有寫過一篇關於 關於 JavaScript 陣列20種操作的方法,所以如果想瞭解更多的話建議可以參考一下。

那麼先來看一個最簡單的範例:

1
2
3
4
5
6
7
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const newArr = arr.map(function(item) {
return item * 2;
});

console.log(newArr); // [2, 4, 6, 8, 10, 12, 14, 16, 18, 20]

那麼搭配前面的觀念之後,這一段程式碼可以縮寫成以下:

1
2
3
4
5
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const newArr = arr.map((item) => item * 2);

console.log(newArr); // [2, 4, 6, 8, 10, 12, 14, 16, 18, 20]

整體來講可以發現更精簡,但結果是一樣的。

接下來看課程上另一個範例程式碼:

1
2
3
4
5
6
7
8
9
10
11
const average = function() {
const nums = Array.from(arguments);
const total = nums.reduce(function(acc, val) {
return acc + val
}, 0);
console.log(total);

return total / nums.length;
}

console.log(average(1, 2, 3, 4, 5));

而上面整段程式碼我就不外解釋了,簡單來講就是將傳入的值轉換成一個陣列並一路 1 + …5 最後在取得平均值,那如果要轉換成箭頭韓式的話該如何調整呢?

1
2
3
const average = (...num) => num.reduce((acc, val) => acc + val, 0) / num.length;

console.log(average(1, 2, 3, 4, 5));

這邊可以發現 average 的函式是使用其餘參數取代箭頭函式沒有 arguments 的問題,整體來講可以看到箭頭函式非常的短且好用,但是這邊要注意一件事情,雖然箭頭函式可以讓程式碼看起來很精簡,但是如果邏輯較複雜時,其實是不建議過度精簡的。

參考文獻

Liker 讚賞

這篇文章如果對你有幫助,你可以花 30 秒登入 LikeCoin 並點擊下方拍手按鈕(最多五下)免費支持與牡蠣鼓勵我。
或者你可以也可以請我「喝一杯咖啡(Donate)」。

Buy Me A Coffee Buy Me A Coffee

Google AD

撰寫一篇文章其實真的很花時間,如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話,我會非常感謝你 ヽ(・∀・)ノ