JS `reduce` 高阶应用：实现计数器、扁平化、分组等复杂逻辑

大家好，我是你们今天的JS reduce 讲座主持人，咱们今天就来好好扒一扒这个看似简单，实则蕴藏着无限可能的“瑞士军刀”方法。准备好了吗？系好安全带，咱们这就出发！

reduce 简介：化繁为简的利器

首先，让我们简单回顾一下 reduce 的基本概念。reduce 方法对数组中的每个元素执行一个由您提供的 reducer 函数(升序执行)，将其结果汇总为单个返回值。

基本语法如下：

array.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])

参数解释：

callback：在数组的每个元素上执行的函数，接收四个参数：
- accumulator (累计器)：累计器累计回调函数的返回值。它是上一次调用回调函数时返回的累积值，或 initialValue（如果提供了）。
- currentValue (当前值)：数组中正在处理的元素。
- index (可选)：数组中正在处理的当前元素的索引。
- array (可选)：调用了 reduce() 的数组。
initialValue (可选)：作为第一次调用 callback 函数时的第一个参数的值。如果没有提供初始值，则将使用数组中的第一个元素。在没有初始值的空数组上调用 reduce 将报错。

reduce 的高阶应用：进阶之路

好了，基础知识复习完毕，现在我们开始进入正题，看看 reduce 如何在实际开发中大放异彩。

1. 计数器：统计元素出现的次数

reduce 可以用来统计数组中每个元素出现的次数，这在数据分析和处理中非常有用。

const arr = ['apple', 'banana', 'apple', 'orange', 'banana', 'apple'];

const counts = arr.reduce((acc, curr) => {
  acc[curr] = (acc[curr] || 0) + 1;
  return acc;
}, {});

console.log(counts); // 输出: { apple: 3, banana: 2, orange: 1 }

这段代码的逻辑非常清晰：

我们使用一个空对象 {} 作为 initialValue，作为累计器 acc 的初始值。
对于数组中的每个元素 curr，我们检查 acc 中是否已经存在该元素作为键。
如果存在，则将该键对应的值加 1。
如果不存在，则将该键添加到 acc 中，并将其值初始化为 1。
最后，返回更新后的 acc。

2. 扁平化数组：将多维数组转换为一维数组

reduce 也可以用来扁平化多维数组。

const arr = [1, [2, 3], [4, [5, 6]]];

const flatArr = arr.reduce((acc, curr) => {
  return acc.concat(Array.isArray(curr) ? flatArrRecursive(curr) : curr);
}, []);

function flatArrRecursive(arr){
  return arr.reduce((acc, curr) => {
      return acc.concat(Array.isArray(curr) ? flatArrRecursive(curr) : curr);
    }, []);
}

console.log(flatArr); // 输出: [1, 2, 3, 4, 5, 6]

这里我们使用了递归函数 flatArrRecursive 来处理嵌套的数组。

reduce 方法遍历数组 arr。
如果当前元素 curr 是一个数组，我们递归调用 flatArrRecursive 来扁平化它，并将结果连接到累计器 acc 中。
如果当前元素 curr 不是一个数组，我们直接将其连接到累计器 acc 中。

3. 分组：按条件将数组元素分组

reduce 可以用来按条件将数组元素分组，这在数据整理和报表生成中非常有用。

const products = [
  { category: 'Electronics', name: 'Laptop' },
  { category: 'Clothing', name: 'T-shirt' },
  { category: 'Electronics', name: 'Smartphone' },
  { category: 'Clothing', name: 'Jeans' },
];

const groupedProducts = products.reduce((acc, curr) => {
  const category = curr.category;
  if (!acc[category]) {
    acc[category] = [];
  }
  acc[category].push(curr);
  return acc;
}, {});

console.log(groupedProducts);
/*
输出:
{
  Electronics: [
    { category: 'Electronics', name: 'Laptop' },
    { category: 'Electronics', name: 'Smartphone' }
  ],
  Clothing: [
    { category: 'Clothing', name: 'T-shirt' },
    { category: 'Clothing', name: 'Jeans' }
  ]
}
*/

这段代码的逻辑如下：

我们使用一个空对象 {} 作为 initialValue，作为累计器 acc 的初始值。
对于数组中的每个产品 curr，我们获取其类别 category。
如果 acc 中不存在该类别作为键，我们创建一个新的空数组，并将其作为该键对应的值。
然后，我们将当前产品 curr 添加到该类别对应的数组中。
最后，返回更新后的 acc。

4. 管道（Pipeline）：链式调用处理数据

reduce 可以用来实现管道操作，将多个函数串联起来，依次处理数据。

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

const addOne = (x) => x + 1;
const square = (x) => x * x;
const double = (x) => x * 2;

const pipeline = [addOne, square, double];

const result = pipeline.reduce((acc, fn) => {
  return fn(acc);
}, data[0]);

console.log(result); // 输出: 8

这段代码的逻辑如下：

我们定义了一个包含多个函数的数组 pipeline。
reduce 方法遍历 pipeline 数组。
对于数组中的每个函数 fn，我们将其应用于累计器 acc，并将结果作为新的 acc。
初始值 initialValue 设置为数组的第一个元素 data[0]。

5. 组合函数：将多个函数组合成一个函数

reduce 可以用来组合多个函数，创建一个新的函数，该函数将依次调用原始函数。

const add = (x, y) => x + y;
const multiply = (x, y) => x * y;

const composedFunction = (...fns) => (arg) => {
  return fns.reduce((acc, fn) => {
    return fn(acc);
  }, arg);
};

const addAndMultiply = composedFunction(add.bind(null, 5), multiply.bind(null, 2));

console.log(addAndMultiply(3)); // 输出: 16 ( (3 + 5) * 2 )

这段代码的逻辑如下：

composedFunction 接收任意数量的函数作为参数。
它返回一个新的函数，该函数接收一个参数 arg。
reduce 方法遍历传入的函数数组 fns。
对于数组中的每个函数 fn，我们将其应用于累计器 acc，并将结果作为新的 acc。
初始值 initialValue 设置为传入的参数 arg。

reduce 的一些高级技巧与注意事项

性能优化： 在处理大型数组时，reduce 的性能可能成为瓶颈。可以考虑使用循环或其他更高效的算法来优化性能。
可读性： reduce 的代码有时会变得难以理解。尽量保持代码简洁明了，并添加必要的注释。可以将复杂的逻辑拆分成更小的函数，以提高可读性。
初始值： 正确设置 initialValue 非常重要。如果未提供 initialValue，reduce 将使用数组的第一个元素作为初始值。在处理空数组时，必须提供 initialValue，否则会抛出错误。
空数组： 在空数组上调用 reduce 且没有提供 initialValue 会抛出错误。需要根据实际情况进行处理，例如提供一个默认的 initialValue 或者直接返回一个默认值。
使用场景： 虽然 reduce 功能强大，但并非所有场景都适合使用 reduce。在选择使用 reduce 之前，请仔细考虑是否还有更简单、更易于理解的方法。

案例：计算购物车总价

const cart = [
  { name: 'Laptop', price: 1200, quantity: 1 },
  { name: 'Mouse', price: 25, quantity: 2 },
  { name: 'Keyboard', price: 75, quantity: 1 },
];

const totalPrice = cart.reduce((acc, item) => {
  return acc + item.price * item.quantity;
}, 0);

console.log(totalPrice); // 输出: 1350

这个例子展示了如何使用 reduce 来计算购物车中所有商品的总价。

总结：reduce 的力量

reduce 是一个非常强大的数组方法，可以用来实现各种复杂的逻辑。掌握 reduce 的使用方法，可以让你写出更简洁、更高效的代码。

功能	代码示例	说明
计数器	`const arr = ['apple', 'banana', 'apple']; const counts = arr.reduce((acc, curr) => { acc[curr] = (acc[curr] \|\| 0) + 1; return acc; }, {});`	统计数组中每个元素出现的次数。
扁平化数组	`const arr = [1, [2, 3], [4, [5, 6]]]; const flatArr = arr.reduce((acc, curr) => acc.concat(Array.isArray(curr) ? curr.reduce((a,b) => a.concat(b), []) : curr), []);`	将多维数组转换为一维数组。
分组	`const products = [{ category: 'A', name: 'Laptop' }, { category: 'B', name: 'T-shirt' }]; const grouped = products.reduce((acc, curr) => { acc[curr.category] = (acc[curr.category] \|\| []).concat(curr); return acc; }, {});`	按条件将数组元素分组。
管道/链式调用	`const addOne = (x) => x + 1; const square = (x) => x * x; const pipeline = [addOne, square]; const result = pipeline.reduce((acc, fn) => fn(acc), 2);`	将多个函数串联起来，依次处理数据。
组合函数	`const add = (x, y) => x + y; const multiply = (x, y) => x * y; const composedFunction = (...fns) => (arg) => fns.reduce((acc, fn) => fn(acc), arg); const addAndMultiply = composedFunction(add.bind(null, 5), multiply.bind(null, 2));`	将多个函数组合成一个函数。
计算购物车总价	`const cart = [{ price: 10, quantity: 2 }, { price: 5, quantity: 3 }]; const totalPrice = cart.reduce((acc, item) => acc + item.price * item.quantity, 0);`	计算购物车中所有商品的总价。

希望今天的讲座对大家有所帮助。记住，熟能生巧，多加练习才能真正掌握 reduce 的精髓。咱们下次再见！

发表回复 取消回复

发表回复取消回复