还原JavaScript：释放reduce的隐藏威力

2023-11-10 08:16:15

揭秘JavaScript Reduce函数的非凡力量

JavaScript 的 reduce 函数看似不起眼，却暗藏着令人惊叹的威力。它不仅仅是一个简单的求和工具，更是一把处理复杂数据集的瑞士军刀。

简述 Reduce

Reduce 函数接受两个参数：一个累积函数和一个可选的初始值。累积函数负责将当前元素与累积值结合，生成新的累积值。这个过程从数组或对象的第一个元素开始，逐一处理，直到尾声。

一个求和的简单示例：

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

超越求和：Reduce 的真正实力

尽管求和是 reduce 最常见的用途，但它的力量远远不止于此。通过精心设计累积函数，我们可以使用 reduce 来执行：

扁平化嵌套数组或对象
分组和汇总数据
查找最大值或最小值
创建自定义数据结构

示例：扁平化嵌套数组

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

const flatArray = nestedArray.reduce((acc, curr) => [...acc, ...curr], []);
console.log(flatArray); // 输出： [1, 2, 3, 4, 5, 6]

示例：分组和汇总数据

假设我们有一个包含学生信息的数组，每个学生有姓名和分数。我们可以使用 reduce 将学生按分数分组：

const students = [
  { name: 'Alice', score: 90 },
  { name: 'Bob', score: 80 },
  { name: 'Cindy', score: 95 },
];

const groupedByScore = students.reduce((acc, curr) => {
  acc[curr.score] ? acc[curr.score].push(curr.name) : (acc[curr.score] = [curr.name]);
  return acc;
}, {});
console.log(groupedByScore); // 输出：{ 90: ['Alice', 'Cindy'], 80: ['Bob'] }