使用 ES6/7/8/9/10 中的 Array.reduce() 方法来做运算

在日常前端开发中，我们往往需要对数组进行各种运算，比如求和、求平均值、查找最大值或者最小值等。在 ES6/7/8/9/10 中，我们可以使用 Array.reduce() 方法来轻松地实现这些运算，本文将介绍 reduce() 方法的使用方法及其实现原理。

什么是 Array.reduce() 方法？

Array.reduce() 方法是 JavaScript 中的一个数组方法，它用于把数组中的所有元素按照一定的规则进行归并，并返回一个最终的结果。

reduce() 方法的基本语法

reduce() 方法的基本语法如下：

array.reduce(callback[, initialValue])

其中，callback 是一个回调函数，它可以接受四个参数：累加器（accumulator）、当前值（currentValue）、当前索引（currentIndex）和数组本身（array）。initialValue 参数可选，是可选的初始值。如果指定了 initialValue 参数，则 accumulator 的初始值为 initialValue，否则 accumulator 的初始值为数组的第一个元素，currentValue 则为第二个元素。

reduce() 方法的常见用法

求和

使用 reduce() 方法很容易实现对数组求和的操作，例如我们有一个数组 [1, 2, 3, 4, 5]，我们可以这样写：

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

求平均数

求平均数只需在求和的基础上再除以数组长度即可，同样是使用 reduce() 方法实现，例如：

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

查找最大值或最小值

在 reduce() 方法中，我们也可以使用 if 语句等条件判断语句来查找数组中的最大值或最小值，例如：

const arr = [1, 2, 3, 4, 5];
const max = arr.reduce((accumulator, currentValue) => accumulator > currentValue ? accumulator : currentValue);
console.log(max); // 5
const min = arr.reduce((accumulator, currentValue) => accumulator < currentValue ? accumulator : currentValue);
console.log(min); // 1

将二维数组转为一维数组

在 reduce() 方法中，我们可以使用 concat() 方法将二维数组转换为一维数组，例如：

const arr = [[1], [2, 3], [4, 5, 6]];
const newArr = arr.reduce((accumulator, currentValue) => accumulator.concat(currentValue));
console.log(newArr); // [1, 2, 3, 4, 5, 6]

reduce() 方法的实现原理

reduce() 方法的实现原理其实很简单，它首先取出数组的第一个元素作为累加器的初始值，然后遍历数组的其他元素，依次将当前元素和累加器进行运算，最后返回累加器的结果。

下面是 reduce() 方法的一个简单实现：

Array.prototype.myReduce = function(callback, initialValue) {
  let accumulator = initialValue !== undefined ? initialValue : this[0];
  for (let i = initialValue !== undefined ? 0 : 1; i < this.length; i++) {
    accumulator = callback(accumulator, this[i], i, this);
  }
  return accumulator;
}

总结

以上就是对使用 ES6/7/8/9/10 中的 Array.reduce() 方法来做运算的介绍和解析，通过学习和使用 reduce() 方法，我们可以更加高效和便捷地处理数组运算。我们需要注意的是，在使用 reduce() 方法时需要合理使用初始值，同时合理运用 Array.reduce() 方法，并结合其他数组方法，可以让我们在代码编写中更为得心应手。

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