JavaScript使用reduce函数按creatorName分组API返回数据的实现问题

问题原因 #

你当前的实现存在两个问题：

1. reduce方法仅可作用于数组，你直接对cmpRecords对象调用reduce逻辑错误，实际需要遍历的是cmpRecords.data这个记录数组
2. 你得到的是「用户名作为键」的对象结构，而需求里的data是数组格式，需要把分组后的对象转成指定格式的数组项。

正确实现代码 #

// 第一步：按creatorName分组得到中间映射对象
const groupMap = cmpRecords.data.reduce((acc, currentRecord) => {
  const creatorName = currentRecord.record.creatorName
  acc[creatorName] = acc[creatorName] || []
  acc[creatorName].push(currentRecord)
  return acc
}, {})

// 第二步：把映射对象转为要求的数组格式
const formattedData = Object.entries(groupMap).map(([name, recordList]) => ({
  name,
  record: recordList
}))

// 第三步：拼接原有状态字段得到最终结果
const finalResult = {
  ...cmpRecords,
  data: formattedData
}

执行后finalResult就是完全符合你预期格式的输出。

内容的提问来源于stack exchange，提问作者Kirankumar Dafda