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

前言

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

箭頭函式實戰用法

基本上箭頭函式很常見於搭配陣列方法，而這邊我先前有寫過一篇關於關於 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 核心篇

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

前言

箭頭函式實戰用法

參考文獻

你的支持會直接轉換成更多技術筆記

Terminal

相關文章

分享這篇文章

留言

前言

箭頭函式實戰用法

參考文獻

你的支持會直接轉換成更多技術筆記

Terminal

相關文章

JavaScript 核心觀念(68) - ES6 章節：箭頭函式 - 章節作業

JavaScript 核心觀念(66) - ES6 章節：箭頭函式 - 常見問題

JavaScript 核心觀念(65) - ES6 章節：箭頭函式 - 與傳統函式不同之處

JavaScript 核心觀念(64) - ES6 章節：箭頭函式 - 箭頭函式簡介

分享這篇文章

留言