JavaScript 的 reduce 介紹與用法

在 JavaScript 中，reduce() 方法是一個非常強大的陣列方法，用於將陣列元素合併成一個單一的結果。這個方法走訪陣列的所有元素，並將它們根據提供的函式逐步累積成一個值。這個函式至少需要兩個參數：累積器（accumulator）和當前值（current value），還有可選的當前索引（index）和原陣列（array）作為參數。

基本語法：

arr.reduce(callback, [initialValue])

• allback: 執行陣列中每個值的函式，包括四個參數：
  • accumulator: 累積器累積回傳的返回值；它是上一次取用回傳時的累積值，或者是提供的初始值（initialValue）。
  • currentValue: 陣列中正在處理的元素。
  • index（option）: 陣列中正在處理的當前元素的索引。
  • array（option）: 取用 reduce 的陣列。
    
• initialValue（可選）: 作為第一次取用 callback 函式時第一個參數的值。

範例1：累加數字

假設我們有一個數字陣列，我們想計算這些數字的總和：

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, currentValue) => {
  return accumulator + currentValue;
}, 0); // 0 是初始值

console.log(sum); // 輸出 15

在這個例子中，reduce 方法從陣列的第一個元素開始處理，並將所有元素累加到一個總和中。

範例 2: 合併陣列

如果我們想要把陣列合併成一個：

const arr = [['a', 'b'], ['c', 'd'], ['e', 'f']];
const reduceArr = arr.reduce((accumulator, currentValue) => {
  return accumulator.concat(currentValue);
}, []);
console.log(reduceArr); // ['a', 'b', 'c', 'd', 'e', 'f'];

範例3：分組

如果你想根據某個條件將陣列分組，reduce 也非常有用：

const people = [
  {name: 'Jay', age: 18},
  {name: 'Sarah', age: 24},
  {name: 'Tom', age: 1}
];

const groupByAge = people.reduce((accumulator, person) => {
  const { age } = person;
  if (accumulator[age]) {
    accumulator[age].push(person);
  } else {
    accumulator[age] = [person];
  }
  return accumulator;
}, {});

console.log(groupByAge); // 輸出 {18: [{name: 'Jay', age: 18}], 24: [{name: 'Sarah', age: 24}], 1: [{name: 'Tom', age: 1}]}

這些範例展示了 reduce() 的多樣性和強大功能，從簡單的數字累加到複雜的數據結構處理都能輕鬆應對。