使用JavaScript reduce分组对象数组未达预期，求问题排查

你想要将对象数组按age分组为指定格式的对象，但当前代码未得到预期结果，核心问题出在reduce回调函数的参数顺序搞反了。

需求目标 #

将数组转换为以下格式：

result = {
  23 : [{name: "kyle", age: 23}, {name: "jade", age: 23}],
  29 : [{name: "ruby", age: 29}],
  32 : [{name: "mat", age: 32}]
}

问题代码 #

const people = [
  {name: "kyle", age: 23},
  {name: "jade", age: 23},
  {name: "ruby", age: 29},
  {name: "mat", age: 32}
]

let result = people.reduce(function(person, group){
  
  const age = person.age;
  if(group[age]==null){
    group[age] = []
}
    group[age].push(person);
  
  
  return group
},{})

console.log(result);

问题分析 #

Array.reduce()的回调函数参数顺序是累加器（accumulator）在前，当前遍历元素（currentValue）在后，而你写反了：

• 第一个参数person实际是累加器（初始值为{}），并非当前遍历的数组元素
• 第二个参数group才是当前遍历的people数组中的对象

这就导致你取person.age时，第一次取的是空对象的age（值为undefined），后续逻辑全部偏离预期，最终会生成一个以undefined为键的数组，而非按年龄分组的结构。

修正后的代码 #

将回调函数的参数顺序调换，同时给参数起更清晰的名字避免混淆：

const people = [
  {name: "kyle", age: 23},
  {name: "jade", age: 23},
  {name: "ruby", age: 29},
  {name: "mat", age: 32}
]

let result = people.reduce(function(acc, person){
  const age = person.age;
  if(acc[age] == null){
    acc[age] = []
  }
  acc[age].push(person);
  return acc
}, {})

console.log(result);

运行这段代码就能得到你想要的按年龄分组的对象结构。

内容的提问来源于stack exchange，提问作者Ray Elshobokshy