ES10 中的 Array.prototype.reduce() 方法解决数组计算问题-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常需要对数组进行计算，例如求和、求平均值、找出最大值等等。在 ES10 中，Array.prototype.reduce() 方法提供了一种简单而强大的方式来解决这些问题。

reduce() 方法的基本用法

reduce() 方法接受两个参数：一个回调函数和一个可选的初始值。回调函数接受四个参数：累加器（accumulator）、当前值（currentValue）、当前索引（currentIndex）和原数组（array）。

回调函数的返回值将作为下一次调用回调函数时的累加器的值。第一次调用回调函数时，如果提供了初始值，则累加器的值为初始值，否则累加器的值为数组的第一个元素。

下面是一个简单的示例，计算数组中所有元素的和：

const arr = [1, 2, 3, 4, 5];
const sum = arr.reduce((accumulator, currentValue) => accumulator + currentValue);
console.log(sum); // 15

在这个例子中，回调函数接受两个参数：累加器和当前值。在第一次调用回调函数时，累加器的值为数组的第一个元素，即 1，当前值为数组的第二个元素，即 2。回调函数的返回值为累加器和当前值的和，即 3。在下一次调用回调函数时，累加器的值为 3，当前值为数组的第三个元素，即 3。以此类推，最终得到数组中所有元素的和。

reduce() 方法的高级用法

除了基本用法，reduce() 方法还有很多高级用法。下面是一些常见的例子。

求平均值

// www.javascriptcn.com code example
const arr = [1, 2, 3, 4, 5];
const average = arr.reduce((accumulator, currentValue, currentIndex, array) => {
  accumulator += currentValue;
  if (currentIndex === array.length - 1) {
    return accumulator / array.length;
  } else {
    return accumulator;
  }
});
console.log(average); // 3

在这个例子中，回调函数接受四个参数：累加器、当前值、当前索引和原数组。在每次调用回调函数时，累加器的值为之前所有元素的和，如果当前值是最后一个元素，则返回累加器的值除以数组的长度，即求平均值。

找出最大值

const arr = [1, 2, 3, 4, 5];
const max = arr.reduce((accumulator, currentValue) => {
  return Math.max(accumulator, currentValue);
});
console.log(max); // 5

在这个例子中，回调函数接受两个参数：累加器和当前值。在每次调用回调函数时，返回累加器和当前值中的较大值，最终得到数组中的最大值。

找出重复元素

const arr = [1, 2, 3, 4, 2, 5, 3];
const duplicates = arr.reduce((accumulator, currentValue, currentIndex, array) => {
  if (array.indexOf(currentValue) !== currentIndex && accumulator.indexOf(currentValue) === -1) {
    accumulator.push(currentValue);
  }
  return accumulator;
}, []);
console.log(duplicates); // [2, 3]

在这个例子中，回调函数接受四个参数：累加器、当前值、当前索引和原数组。在每次调用回调函数时，如果当前值在数组中的索引不等于当前索引，并且累加器中不存在当前值，则将当前值加入累加器中，最终得到重复的元素。

reduce() 方法的指导意义

reduce() 方法是一种非常强大的方法，可以帮助我们解决很多数组计算问题。在使用 reduce() 方法时，需要注意以下几点：

回调函数的返回值将作为下一次调用回调函数时的累加器的值。
如果提供了初始值，则累加器的值为初始值，否则累加器的值为数组的第一个元素。
回调函数接受四个参数：累加器、当前值、当前索引和原数组。
如果需要在回调函数中修改累加器的值，需要返回修改后的值。
如果需要在回调函数中返回最终结果，需要在最后一次调用回调函数时返回结果。

通过学习 reduce() 方法的基本用法和高级用法，我们可以更好地理解和应用这个方法，提高代码的效率和可读性。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d230b0a941bf713442b237

ES10 中的 Array.prototype.reduce() 方法解决数组计算问题