解剖reduce: JS里的百变工具箱

2023-10-12 16:25:16

前言

在JavaScript中，reduce是一个神奇的函数式编程工具，其应用场景之广令人惊叹。从实现异步函数串行，到聚合数据，reduce的身影无处不在。本文将使用reduce来实现一些我们日常使用到的工具函数，希望通过这些例子，让您更好地理解和掌握reduce的用法，并习惯于使用reduce来解决问题。

reduce基础

reduce函数的语法如下：

Array.prototype.reduce(callback, initialValue)

callback：一个处理数组中每个元素的函数，它接受两个参数：前一个累积值（accumulator）和当前元素。
initialValue：一个可选的初始值，如果数组为空，则reduce将使用此值作为累积值。

reduce的运作方式是：从数组的第一个元素开始，将累积值和当前元素传递给callback函数，得到一个新的累积值。然后，将新的累积值和数组的下一个元素传递给callback函数，以此类推，直到数组的最后一个元素被处理。最终，reduce返回累积值。

reduce的妙用

reduce的妙用体现在其强大的灵活性上。它可以被用于各种各样的数据处理任务，下面是一些常见的例子：

求和：将数组中的所有元素相加。

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

求平均值 ：将数组中所有元素的平均值。

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

过滤元素 ：从数组中过滤出满足特定条件的元素。

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.reduce((accumulator, currentValue) => {
  if (currentValue % 2 === 0) {
    accumulator.push(currentValue);
  }
  return accumulator;
}, []);
console.log(evenNumbers); // 输出： [2, 4]

映射元素 ：将数组中的每个元素映射到一个新的值。

const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.reduce((accumulator, currentValue) => {
  accumulator.push(currentValue * 2);
  return accumulator;
}, []);
console.log(doubledNumbers); // 输出： [2, 4, 6, 8, 10]