JavaScript中如何将对象按相同日期键分组存入对应数组

需求说明 #

现有如下格式的对象数组：

let data = [
    {
       date: "2022-07-22T08:55:07.438",
        title: "Test topic meeting "
    },
    {
       date: "2022-07-22T08:55:07.438",
        title: "virtual log"
    },
    {
       date: "2022-07-23T08:55:07.438",
        title: "Hello test"
    },
]

需要提取每个对象date字段的年月日部分作为对象键，将同一日期对应的所有对象归集到该键对应的数组中，最终输出结构如下：

{
    "2022-07-22": [
        {
           date: "2022-07-22T08:55:07.438",
            title: "Test topic meeting"
        },
        {
           date: "2022-07-22T08:55:07.438",
            title: "virtual log"
        }
    ],
    "2022-07-23": [
        {
           date: "2022-07-23T08:55:07.438",
            title: "Hello test"
        }
    ]
}

实现代码 #

方法1：reduce 简洁实现 #

最常用的数组分组写法，代码精简：

const groupedData = data.reduce((res, item) => {
    // 针对ISO格式日期，直接截取T前的年月日部分作为分组键
    const dateKey = item.date.split('T')[0]
    // 不存在对应分组时先初始化空数组
    if (!res[dateKey]) res[dateKey] = []
    res[dateKey].push(item)
    return res
}, {})

如果date字段格式不固定，不是标准ISO时间格式，可以用通用日期格式化方法生成键，适配不同输入：

// 通用YYYY-MM-DD格式日期键生成方法
const formatDateKey = (dateStr) => {
    const d = new Date(dateStr)
    const year = d.getFullYear()
    const month = String(d.getMonth() + 1).padStart(2, '0')
    const day = String(d.getDate()).padStart(2, '0')
    return `${year}-${month}-${day}`
}

// 替换之前的dateKey取值逻辑即可
const dateKey = formatDateKey(item.date)

方法2：普通for循环实现 #

逻辑直白，无高阶API依赖，兼容性更好：

const groupedData = {}
for (let i = 0; i < data.length; i++) {
    const item = data[i]
    const dateKey = item.date.split('T')[0]
    if (!groupedData[dateKey]) {
        groupedData[dateKey] = []
    }
    groupedData[dateKey].push(item)
}

两种方法最终输出的结果完全符合需求，运行后打印groupedData即可得到目标结构。

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