如何调整JavaScript原生reduce的分组逻辑以实现自定义分组结果

看起来你已经在使用reduce处理数组分组了，那咱们直接针对你的people数组来调整分组逻辑，实现不同的分组需求。

首先先回顾一下reduce做分组的核心逻辑：利用累加器（accumulator）作为分组容器，每次迭代根据自定义的分组规则，把当前元素归类到对应的组里。

示例1：基础分组——按州（state）归类 #

这是最常见的分组方式，把同一个州的人员归到一起：

const people = [ 
  {name: "John", age: 23, city: "Seattle", state: "WA"}, 
  {name: "Mark", age: 25, city: "Houston", state: "TX"}, 
  {name: "Luke", age: 26, city: "Seattle", state: "WA"}, 
  {name: "Paul", age: 28, city: "Portland", state: "OR"}, 
  {name: "Matt", age: 21, city: "Oakland", state: "CA"}, 
  {name: "Sam", age: 24, city: "Oakland", state: "CA"} 
];

const groupedByState = people.reduce((acc, person) => {
  // 提取当前元素的分组键：州的缩写
  const stateKey = person.state;
  // 如果累加器里还没有这个分组，就初始化一个空数组
  if (!acc[stateKey]) {
    acc[stateKey] = [];
  }
  // 把当前人员加入对应分组
  acc[stateKey].push(person);
  // 返回累加器继续迭代
  return acc;
}, {}); // 初始值设为空对象，用来存储所有分组

console.log(groupedByState);

输出结果：

{
  WA: [ {name: "John", ...}, {name: "Luke", ...} ],
  TX: [ {name: "Mark", ...} ],
  OR: [ {name: "Paul", ...} ],
  CA: [ {name: "Matt", ...}, {name: "Sam", ...} ]
}

示例2：细化分组——按「州+城市」组合归类 #

如果需要更精准的分组（比如区分同一州下的不同城市），只需要修改分组键的生成规则即可：

const groupedByStateCity = people.reduce((acc, person) => {
  // 自定义分组键：将州和城市拼接成唯一标识
  const groupKey = `${person.state}-${person.city}`;
  if (!acc[groupKey]) {
    acc[groupKey] = [];
  }
  acc[groupKey].push(person);
  return acc;
}, {});

console.log(groupedByStateCity);

输出结果：

{
  "WA-Seattle": [ {name: "John", ...}, {name: "Luke", ...} ],
  "TX-Houston": [ {name: "Mark", ...} ],
  "OR-Portland": [ {name: "Paul", ...} ],
  "CA-Oakland": [ {name: "Matt", ...}, {name: "Sam", ...} ]
}

示例3：自定义逻辑分组——按年龄区间归类 #

如果你的分组规则不是基于现有字段的直接取值，而是需要计算（比如按年龄区间划分），同样可以在reduce里轻松实现：

const groupedByAgeRange = people.reduce((acc, person) => {
  let ageRange;
  // 自定义年龄区间判断逻辑
  if (person.age < 23) {
    ageRange = "Under 23";
  } else if (person.age >=23 && person.age <=26) {
    ageRange = "23-26";
  } else {
    ageRange = "Over 26";
  }
  
  if (!acc[ageRange]) {
    acc[ageRange] = [];
  }
  acc[ageRange].push(person);
  return acc;
}, {});

console.log(groupedByAgeRange);

输出结果：

{
  "23-26": [ {name: "John", ...}, {name: "Mark", ...}, {name: "Luke", ...}, {name: "Sam", ...} ],
  "Over 26": [ {name: "Paul", ...} ],
  "Under 23": [ {name: "Matt", ...} ]
}

核心思路总结 #

不管你需要什么样的分组逻辑，只要在reduce迭代过程中做好这几步：

1. 确定分组键的生成规则：可以是直接取字段值、拼接多个字段、或者通过计算得到的自定义值
2. 初始化分组容器：如果累加器里没有当前分组键对应的数组，就创建一个空数组
3. 将当前元素加入对应分组：把元素push到对应的数组里
4. 返回累加器：确保下一次迭代能继续使用这个分组容器

如果你的预期分组结果和上面的示例不同，可以补充具体的需求，我再帮你调整逻辑~

内容的提问来源于stack exchange，提问作者Joe Saad