JavaScript reduce function - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

前言 2020 秋天，我將用 30 天的時間，來嘗試回答和網路前端開發相關的 30 個問題。30 天無法一網打盡浩瀚的前端知識，有些問題可能對有些讀者來說相對簡單，不過期待這趟旅程，能幫助自己、也幫助讀者打開不同的知識大門。有興趣的話，跟著我一起探索吧！ 昨天忘記提到，最近幾天進入 JavaScript 的世界，會開始介紹一些我覺得有趣或重要的問題或內容 :) Map, Filter, Reduce 是 JavaScript array 當中三種常用的方法。Map 的目的是遍歷所有 item，經過處理之後，回傳同樣長度的陣列；filter 同樣是遍歷所有 item，但是回傳符合條件的 items。 不過 Reduce 的功能就更為強大了，不僅僅有累加的功能，更可以實現 map 和 filter 的功能，可以說應用場景非常的廣。 所以，今天就來特別介紹一下 reduce 方法。 reduce 的基本結構如下： array. https://ithelp.ithome.com.tw/articles/10243053

arr.reduce(function(accumulator,currentValue,currentIndex,array) {
  //
});

先直接玩玩看三個方法的差異(可以改程式碼即時跑):

export default function App() {
  const nums = [1, 2, 3, 4, 5, 6];
  const doubled = nums.map((n) => n * 2);
  const evens = nums.filter((n) => n % 2 === 0);
  const sum = nums.reduce((acc, n) => acc + n, 0);

  return (
    <div style={{ fontFamily: "monospace", lineHeight: 1.8 }}>
      <p>原始：[{nums.join(", ")}]</p>
      <p>map(每個 ×2)：[{doubled.join(", ")}]</p>
      <p>filter(留偶數)：[{evens.join(", ")}]</p>
      <p>reduce(全部加總)：{sum}</p>
    </div>
  );
}

reduce()

每個元素都會呼叫回調函式（callback），可傳入四個參數：

accumulator：累加器

currentValue：當前元素

currentIndex：當前元素的索引（選擇性）

array: 呼叫 reduce() 方法的陣列（選擇性）

initialValue：第一次呼叫時要傳入的累加器初始值。（選擇性）若沒有提供初始值，則原陣列的第一個元素將會被當作初始的累加器。

reduce 可以實現map功能

map() 可以幫助我們轉化 array 當中的所有 elements，譬如全部乘以 2 並回傳結果陣列

let array = [0, 1, 2, 3, 4]
array.map(item => item * 2)     // [ 0, 2, 4, 6, 8 ]

這裡我們也可以用 reduce() 來做到！只要設定 acc 初始值為一個 empty array，在每一次的迭代放入 cur 乘以 2 的結果

let array = [0, 1, 2, 3, 4]
array.reduce((acc, cur) => {
   acc.push(cur * 2)
   return acc
}, [])

也可以實現filter功能

如果要篩選出 array 當中的偶數，只要在 callback function 當中透過 if/else 來篩選出我們要的 element，然後再放入 acc 這個 array 當中，就可以得到我們想要的結果囉

let array = [0, 1, 2, 3, 4]
array.reduce((acc, cur) => {
   if (cur % 2 === 0) {
     acc.push(cur)
   }
   return acc
}, [])

實現 join 功能

其實用 join() 就很方便了，不過這裡只是想示範 reduce() 可以做很多種事情。如果我們想要達到 array.join('-') 的效果，可以這麼做：

let array = ['this', 'is', 'a', 'book']
array.reduce((acc, cur, index) => {
  if (index === 0) return acc = cur
  acc += '-' + cur
  return acc
},'')