解构Array.reduce()的奥秘：从原理到实现

2023-11-24 09:23:54

Array.reduce()简介

在JavaScript的世界里，Array.reduce()方法可谓一个低调却强悍的利器。它能将数组中的元素逐个处理，并将其累积成一个最终结果。这种强大的数组处理能力，让reduce()在数据处理、统计分析、字符串操作等众多场景中大放异彩。

Array.reduce()的原理

要理解reduce()的工作原理，首先需要明确两个核心概念：累加器和回调函数。

累加器 ：累加器是reduce()方法的灵魂，它是一个不断累积中间结果的变量。在reduce()的每次迭代中，回调函数都会将累加器的值作为第一个参数，并返回一个新的累加器值。
回调函数 ：回调函数是reduce()方法的另一位主角，它负责对数组中的每个元素进行处理，并返回一个新的累加器值。回调函数的签名通常为(accumulator, currentValue, currentIndex, array)。

Array.reduce()的实现

掌握了reduce()的核心概念后，我们就可以一探究竟，看看reduce()是如何实现的。

Array.prototype.reduce = function(callback, initialValue) {
  if (this === null || this === undefined) {
    throw new TypeError('Reduce of empty array with no initial value');
  }

  let accumulator = initialValue;
  if (accumulator === undefined) {
    accumulator = this[0];
    i = 1;
  }

  for (let i = 0; i < this.length; i++) {
    accumulator = callback(accumulator, this[i], i, this);
  }

  return accumulator;
};

Array.reduce()的使用

掌握了reduce()的原理和实现后，我们就可以在实践中大显身手了。下面是一些常见的reduce()使用场景：

数组求和 ：const sum = [1, 2, 3, 4, 5].reduce((a, b) => a + b, 0);
数组最大值 ：const max = [1, 2, 3, 4, 5].reduce((a, b) => Math.max(a, b), -Infinity);
数组最小值 ：const min = [1, 2, 3, 4, 5].reduce((a, b) => Math.min(a, b), Infinity);
数组去重 ：const unique = [1, 2, 3, 4, 5, 1, 2, 3].reduce((a, b) => a.includes(b) ? a : [...a, b], []);
字符串反转 ：const reversed = 'Hello World'.split('').reduce((a, b) => b + a, '');