如何在JavaScript中使用Array Reduce方法

假设你有一个数字数组：

const numbers = [2, 4, 6]; 

你如何对这些数字进行求和？感谢JavaScript的array.reduce() 方法，你可以轻松做到这一点。

const numbers = [2, 4, 6];
const sum = numbers.reduce(function(sum, number) {
  const updatedSum = sum + number;
  return updatedSum;
}, 0);
sum; // 12

在这篇文章中，你将了解还原操作，以及如何使用array.reduce(callback, initialValue) 方法来对数组进行还原操作。

1.减少操作

在深入了解如何使用array.reduce() 方法之前，让我们先弄清楚它试图解决什么问题：将一个数组还原成一个值。

减少一个数组意味着对其项目进行具体的累积操作，以计算出一个结果值。

减少操作的一个很好的例子是计算一个数组的总和，其中的累积操作是项目的相加。对于一个数组[2, 4, 6] ，减少到一个总和的结果是12 。

另一个还原的例子是确定数组的最大元素。对于一个数组[7, 2, 10, 6] ，减少到最大项的结果是10 。

现在你可以很容易地看到array.reduce() 方法的作用--执行还原操作。

2. array.reduce()方法

array.reduce() 是一个接受两个参数的数组方法。

const value = array.reduce(callback[, initialValue]);

callback 是一个强制性的参数，是一个执行减少操作的函数，第二个可选参数是初始值。

JavaScript在数组的每个项上调用callback 函数，有4个参数：累加器值，当前数组项，当前数组项索引，和数组本身。callback 函数必须返回更新的累加器值。

array.reduce(function(accumulator, item, index, array) {
  // Use `accumulator` and `item` 
  // to calculate `updatedAccumulator`...
  return updatedAccumulator;
})

例如，让我们回到介绍中的代码:

const numbers = [2, 4, 6];
const sum = numbers.reduce(function summarize(sum, number) {
  const updatedSum = sum + number;
  return updatedSum;
}, 0);
sum; // 12

numbers.reduce(summarize, 0) 计算数组中所有元素的总和。

summarize 回调为数组中的每一个项目调用累积的和和迭代的数字。summarize 回调将迭代的项目加入已经累积的和，并返回该更新的和。

这就是一个数组如何被还原成一个总和。

另外，注意numbers.reduce(summarize, 0) 的第二个参数--数组项的总和是用0 初始化的。

侧面挑战：你将如何使用array.reduce() 方法来寻找数组的最大值？请在下面的评论中写出你的解决方案!

3.省略初始值参数

你也可以省略array.reduce() 的第二个参数。在这种情况下，reduce方法用数组的第一项初始化累加器的值，然后从第二项开始迭代。

例如，让我们对数组项进行求和，而不表明number.reduce(summarize) 的第二个参数:

const numbers = [2, 4, 6];
const sum = numbers.reduce(function summarize(sum, number, index) {
  console.log(index); // logs 1, 2
  return sum + number;
});
sum; // 12

初始值参数被省略，因此累加器以第一项的值初始化（数字2 ）。迭代从第二项开始。

4.总结

array.reduce() 是一个有用的方法，可以将一个数组还原成一个值。

array.reduce(callback, initialValue) 它接受2个参数：更新累加器值的 函数，以及累加器的初始值。然后， 为数组的每一项调用 ，每一步都更新累加器。callback array.reduce() callback

你也可以省略初始值参数，在这种情况下，累加器的值以数组的第一项为初始值，而迭代则从第二项开始。