无需繁杂，自建reduce方法只需五步

2024-02-04 21:20:02

原理科普与具体步骤

reduce()方法是ECMAScript 5中新增的一个数组方法，用于对数组的元素进行累加操作，最终将数组元素累加为一个值。reduce()方法的语法格式如下：

array.reduce(callbackFn, initialValue)

其中：

callbackFn：用于对数组元素进行累加操作的函数。该函数接受四个参数：
- accumulator：上一次累加操作的结果。
- currentValue：当前数组元素。
- currentIndex：当前数组元素的索引。
- array：调用reduce()方法的数组。
initialValue：传递给callbackFn的初始值。当initialValue有值时，将作为accumulator传给callbackFn的第一个参数，否则将使用数组的第一个元素作为accumulator。

reduce()方法的执行过程如下：

将accumulator和currentValue传递给callbackFn。
在callbackFn中对accumulator和currentValue进行累加操作，并返回累加结果。
将累加结果作为新的accumulator。
重复步骤1-3，直到数组中的所有元素都被累加完毕。
返回累加后的最终结果。

接下来，让我们一步一步来实现自己的reduce()方法：

定义reduce()方法

function reduce(array, callbackFn, initialValue) {
  // 检查参数是否合法
  if (!array || !callbackFn) {
    throw new Error("Invalid arguments.");
  }

  // 如果initialValue有值，则将其作为accumulator
  let accumulator = initialValue;

  // 如果initialValue没有值，则将数组的第一个元素作为accumulator
  if (accumulator === undefined) {
    accumulator = array[0];
    array = array.slice(1);
  }

  // 遍历数组中的每个元素
  for (let i = 0; i < array.length; i++) {
    // 将accumulator和currentValue传递给callbackFn
    accumulator = callbackFn(accumulator, array[i], i, array);
  }

  // 返回累加后的最终结果
  return accumulator;
}

测试reduce()方法

我们可以使用以下代码来测试reduce()方法：

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

// 计算数组元素的和
const sum = reduce(numbers, (accumulator, currentValue) => accumulator + currentValue);

// 计算数组元素的乘积
const product = reduce(numbers, (accumulator, currentValue) => accumulator * currentValue);

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