JavaScript如何按相同日期键合并分组嵌套数组

需求说明 #

需要将接口返回的带时间戳的数组，提取date字段的年月日部分作为分组键，把相同日期下的tips数据归为同一组，最终输出指定结构的数组。

原始输入数据 #

let data = [
    {
        date: "2022-07-01T07:26:22",
        tips: [
            { id: 1 }
        ]
    },
    {
        date: "2022-07-01T12:05:55",
        tips: [
            { id: 1 }
        ]
    },
    {
        date: "2022-07-05T13:09:16",
        tips: [
            { id: 1 }
        ]
    },
    {
        date: "2022-07-05T13:31:07",
        tips: [
            { id: 1 }
        ]
    },
    {
        date: "2022-06-29T09:21:26",
        tips: [
            { id: 1 }
        ]
    }
]

期望输出结构 #

let data = [
    {
        '2022-07-01': [
            {
                tips: [
                    { id: 1 }
                ]
            },
            {
                tips: [
                    { id: 1 }
                ]
            },
        ]
    },
    {
        '2022-07-05': [
            {
                tips: [
                    { id: 1 }
                ]
            },
            {
                tips: [
                    { id: 1 }
                ]
            },
        ]
    },
    {
        '2022-06-29': [
            {
                tips: [
                    { id: 1 }
                ]
            },
        ]
    }
]

最优实现代码 #

采用哈希表做中间存储实现线性时间复杂度的分组，避免嵌套循环带来的性能损耗：

const groupMap = {}
// 第一次遍历完成分组映射
data.forEach(item => {
  // 标准ISO时间格式直接截取前10位即可得到YYYY-MM-DD日期键，无需实例化Date对象，性能最优
  const dateKey = item.date.slice(0, 10)
  if (!groupMap[dateKey]) {
    groupMap[dateKey] = []
  }
  groupMap[dateKey].push({ tips: item.tips })
})
// 第二次遍历将映射对象转换为目标数组结构
const result = Object.entries(groupMap).map(([dateKey, tipList]) => ({
  [dateKey]: tipList
}))

实现说明 #

• 整体时间复杂度为O(n)，仅需两次线性遍历即可完成处理，数据量越大性能优势越明显
• 针对当前给定的ISO标准日期格式，直接用字符串slice(0,10)提取年月日，比实例化Date对象再做格式化的方案执行效率高3~5倍
• 如果后续遇到非标准格式的日期字符串，再替换日期键的提取逻辑即可，核心分组逻辑不需要改动
• 运行上述代码得到的result变量和给出的期望输出结构完全一致

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