【JavaScript 高阶函数之reduce() 】-Toy模板网

这篇具有很好参考价值的文章主要介绍了【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