【JavaScript 高阶函数之reduce() 】

reduce() 函数的基本概念

reduce() 函数的基本语法如下：

array.reduce(callback, initialValue);

• array：想要迭代的数组。
• callback：一个回调函数，用来处理数组中的每个元素。这个函数可以接受四个参数：累积值（accumulator），当前元素（currentValue），当前索引（currentIndex），以及数组本身（array）。
• initialValue（可选）：作为第一次调用回调函数时的累积值。如果不提供此参数，reduce() 将使用数组的第一个元素作为初始累积值，并从第二个元素开始迭代。

计算数组元素的总和

有一个数字数组，计算所有元素的总和。

const numbers = [1, 2, 3, 4, 5];

const sum = numbers.reduce((accumulator, currentValue) => {
  return accumulator + currentValue;
}, 0);

console.log(sum); // 输出：15

在这个例子中，我们使用 reduce() 函数来累积数组中的元素。初始累积值 0 作为 reduce() 函数的第二个参数传递进去。然后，回调函数按顺序处理数组的每个元素，将当前元素的值加到累积值上。最终得到了数组元素的总和。

对象属性求和

使用 reduce() 来计算一个对象数组中特定属性的总和。

const expenses = [
  { id: 1, amount: 100 },
  { id: 2, amount: 200 },
  { id: 3, amount: 50 },
];

const totalExpense = expenses.reduce((accumulator, expense) => {
  return accumulator + expense.amount;
}, 0);

console.log(totalExpense); // 输出：350

在这个示例中，我们使用 reduce() 函数来计算 expenses 数组中每个对象的 amount 属性的总和。回调函数访问每个对象的 amount 属性，并将其加到累积值上。

处理空数组

如果在一个空数组上使用 reduce() 函数并且没有提供初始累积值，会导致错误。为了防止这种情况，最好始终提供一个初始累积值。