在JavaScript中将含嵌套数组的对象数组合并为单个数组

需求说明 #

将包含月份键的嵌套数组对象，转换为包含所有事件的单个数组，同时统一字段名（将iD改为ID）并清理event字段的多余空格。

实现代码 #

方法一：使用flatMap（简洁高效）

const arr = [
    {
        JUNE: [
            {
                "iD": "67854",
                "event": " closed",
                "title": "test",
                "startDate": "2024-06-20",
                "endDate": "2024-07-25"
            }
        ]
    },
    {
        MAY: [
            {
                "ID": "908765",
                "event": "closed",
                "title": "test",
                "startDate": "2024-05-21",
                "endDate": "2024-06-27"
            },
            {
                ID: "12345",
                event: "open",
                title: "test123",
                startDate: "2024-05-21",
                endDate: "2024-06-27"
            }
        ]
    }
];

const flattenedArr = arr.flatMap(item => {
    // 提取当前月份对应的事件数组
    const events = Object.values(item)[0];
    // 处理每个事件的字段格式
    return events.map(event => ({
        ID: event.iD || event.ID,
        event: event.event.trim(),
        title: event.title,
        startDate: event.startDate,
        endDate: event.endDate
    }));
});

console.log(flattenedArr);

方法二：使用reduce（兼容性更优）

如果环境不支持flatMap，可以用reduce替代：

const flattenedArr = arr.reduce((result, item) => {
    const events = Object.values(item)[0];
    const processedEvents = events.map(event => ({
        ID: event.iD || event.ID,
        event: event.event.trim(),
        title: event.title,
        startDate: event.startDate,
        endDate: event.endDate
    }));
    return result.concat(processedEvents);
}, []);

输出结果 #

执行上述代码后，将得到目标数组：

[
    {
        ID: "67854",
        event: "closed",
        title: "test",
        startDate: "2024-06-20",
        endDate: "2024-07-25"
    },
    {
        ID: "908765",
        event: "closed",
        title: "test",
        startDate: "2024-05-21",
        endDate: "2024-06-27"
    },
    {
        ID: "12345",
        event: "open",
        title: "test123",
        startDate: "2024-05-21",
        endDate: "2024-06-27"
    }
]

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