如何在JavaScript中按day字段分组数据并生成schedule子数组

需求说明 #

给定如下输入数组：

const input_array = [{
  "name": "alagu",
  "day": "monday",
  "time": "morning",
  "task": "studying"
}, {
  "name": "alagu",
  "day": "monday",
  "time": "evening",
  "task": "playing"
}, {
  "name": "alagu",
  "day": "monday",
  "time": "night",
  "task": "sleeping"
}, {
  "name": "alagu",
  "day": "sunday",
  "time": "morning",
  "task": "playing"
}, {
  "name": "alagu",
  "day": "sunday",
  "time": "evening",
  "task": "playing"
}, {
  "name": "alagu",
  "day": "sunday",
  "time": "night",
  "task": "sleeping"
}];

需要按day字段分组，将每组的time和task整理到schedule子数组中，得到目标结构。

方案一：原生JavaScript实现（无依赖） #

用Array.reduce方法完成分组和结构转换，这是最通用的原生解决方案：

const result_array = Object.values(input_array.reduce((acc, item) => {
  // 以day作为分组标识键
  const groupKey = item.day;
  // 如果当前分组不存在，初始化分组结构
  if (!acc[groupKey]) {
    acc[groupKey] = {
      name: item.name,
      day: item.day,
      schedule: []
    };
  }
  // 将当前项的time和task存入对应分组的schedule
  acc[groupKey].schedule.push({
    time: item.time,
    task: item.task
  });
  return acc;
}, {}));

console.log(result_array);

逻辑说明 #

1. 用reduce遍历输入数组，构建一个以day为键的临时对象acc；
2. 每个键对应一个分组对象，包含name、day和空的schedule数组；
3. 遍历过程中，把每个元素的time和task提取出来，推入对应分组的schedule；
4. 最后用Object.values把临时对象的所有值提取为数组，就是最终结果。

方案二：使用Lodash简化代码（需依赖库） #

如果项目中已经引入Lodash，可以用groupBy+map的组合快速实现：

// 先确保已安装并引入Lodash
const _ = require('lodash');

const result_array = _.map(_.groupBy(input_array, 'day'), (groupItems, day) => ({
  name: groupItems[0].name,
  day: day,
  schedule: groupItems.map(item => ({ time: item.time, task: item.task }))
}));

console.log(result_array);

逻辑说明 #

1. _.groupBy(input_array, 'day')会把输入数组按day字段分组，得到以day为键的对象；
2. 用_.map遍历每个分组，构建目标结构：取分组第一个元素的name，用当前day作为分组标识，再把分组内的每个元素转成time+task的对象存入schedule。

注意事项 #

你给出的示例结果中，周一的第三个schedule项time字段应为night（原输入是night），上述两种方案都会生成正确的对应值。

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