如何对JavaScript对象数组按日期分组，将type字段值转为对应属性聚合

我从数据库获取到如下所示的JavaScript数组对象：

[{ date: '2021-09-15', type: 'cats', value: 4 },
  { date: '2021-09-15', type: 'dogs', value: 5 },
  { date: '2021-09-16', type: 'cats', value: 1 },
  { date: '2021-09-16', type: 'dogs', value: 4 }]

需要将上述数据处理为如下格式的输出：

[{ date: '2021-09-15', cats: 4, dogs: 5 },
  { date: '2021-09-16', cats: 1, dogs: 4 }]

我尝试使用reduce函数实现该需求，代码如下，但未得到预期结果：数据完成了分组，但没有调整结构，每组仅保留单个值：

const data = [
  { date: '2021-09-15', type: 'cats', value: 4 },
  { date: '2021-09-15', type: 'dogs', value: 5 },
  { date: '2021-09-16', type: 'cats', value: 1 },
  { date: '2021-09-16', type: 'dogs', value: 4 }
]

const groups = data.reduce((groups, item) => {
  const key = item[item.date];
  if (!groups[key]) {
    groups[item.date] = []
  }

  if (item.type == "cats") {
    item.cats = item.value;
  } else if (item.type == "dogs") {
    item.dogs = item.value;
  }

  groups[item.date].push(item);

  return groups;
}, {});

console.log(groups)

你原有代码存在两个核心问题：

• key的赋值逻辑错误，const key = item[item.date]实际是取item对象上名称为对应日期值的属性，该属性不存在，会得到undefined，导致后续分组逻辑异常
• 分组时你将每个原始item存入数组，没有合并同一个日期下的不同type属性值，结构不符合预期

修改后的可运行代码如下：

const data = [
  { date: '2021-09-15', type: 'cats', value: 4 },
  { date: '2021-09-15', type: 'dogs', value: 5 },
  { date: '2021-09-16', type: 'cats', value: 1 },
  { date: '2021-09-16', type: 'dogs', value: 4 }
]

// 先按日期分组合并属性
const dateMap = data.reduce((map, item) => {
  // 直接用日期作为分组key
  const key = item.date
  // 如果当前日期还没存入map，先初始化基础结构
  if (!map[key]) {
    map[key] = { date: key }
  }
  // 把当前type对应的值赋值进去
  map[key][item.type] = item.value
  return map
}, {})

// 把map的value转成数组就是你要的结果
const result = Object.values(dateMap)
console.log(result)

运行后输出的result就是你需要的目标结构。

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