JavaScript如何按公共字段分组数组并生成嵌套JSON/数组结构

原有代码问题 #

• 循环内始终访问arr[0]，未使用循环索引i获取当前遍历元素，所有逻辑都只处理数组第一个对象
• 结果变量resultArr未初始化为数组，直接为其赋值date、data属性会抛出类型错误
• 仅实现了新日期的新增逻辑，缺失已有日期下的data数组追加逻辑
• 原数组对象的科目属性名为大写开头的Subject，原有代码使用小写subject无法读取到对应值

实现代码 #

普通循环版本（易理解） #

// 临时映射对象，key为date值，value为对应分组结构
const dateMap = {}
const result = []

for (let i = 0; i < arr.length; i++) {
  const currentItem = arr[i]
  const currentDate = currentItem.date
  // 如果当前日期不在映射中，新建分组
  if (!dateMap[currentDate]) {
    const group = {
      date: currentDate,
      data: []
    }
    dateMap[currentDate] = group
    result.push(group)
  }
  // 往对应分组的data里追加数据
  dateMap[currentDate].data.push({
    subject: currentItem.Subject,
    index: currentItem.index
  })
}

// 最终result就是你需要的结构
console.log(result)

reduce简化版本 #

const result = Object.values(arr.reduce((acc, cur) => {
  // 不存在当前日期分组则初始化
  if (!acc[cur.date]) {
    acc[cur.date] = { date: cur.date, data: [] }
  }
  // 追加当前项的属性到data数组
  acc[cur.date].data.push({
    subject: cur.Subject,
    index: cur.index
  })
  return acc
}, {}))

逻辑说明 #

通过临时映射对象存储日期和分组的对应关系，避免每次判断是否已存在日期时遍历结果数组，时间复杂度为O(n)，效率更高。两种实现最终输出的结构完全符合需求。

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