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

發表於 2021-10-11 更新於 2022-01-29 分類於 JavaScript

Google AD

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

Liker 讚賞

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

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

前言

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

箭頭函式實戰用法

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

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

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]

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

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]

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

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

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 的問題，整體來講可以看到箭頭函式非常的短且好用，但是這邊要注意一件事情，雖然箭頭函式可以讓程式碼看起來很精簡，但是如果邏輯較複雜時，其實是不建議過度精簡的。

參考文獻

JavaScript 核心篇