如何按日期属性合并包含files与folders的对象？

问题描述 #

需求：按日期属性合并两个对象，对象的属性为日期格式（如2023-06-05），每个对象包含日期属性以及files或folders属性，最终要得到如下结构：

recent: {
    "2023-05-06": {
            files: [],
            folders: [],
            },
    "2023-05-07": {
            files: [],
            folders: [],
            },
}

现有部分代码如下：

created() {
        axios.get('/api/file/recent').then(r => {
            var temp = new Array();
            var sorted = [];
            temp['files'] = r.data.files;
            temp['folders'] = r.data.folder;
            var temp_files = temp['files'].reduce((a,b) => {
                a[b.created_at] = a[b.created_at]  ? a[b.created_at].concat(b) : [b];
                return a;
            }, {});
            var temp_folders = temp['folders'].reduce((a,b) => {
                a[b.created_at] = a[b.created_at] ? a[b.created_at].concat(b) : [b];
                return a;
            }, {});

            var files = new Object();
            var folders = new Object();
            Object.keys(temp_files).forEach(key => {
                files[key] = {files: temp_files[key]};
            })
            Object.keys(temp_folders).forEach(key => {
                folders[key] = {folders: temp_folders[key]};
            })

实现方案 #

你已经完成了按日期分组文件和文件夹的核心步骤，接下来只需要将这两个分组后的对象合并，为每个日期节点同时补充files和folders数组即可。以下是完整的实现代码：

完整代码示例 #

created() {
    axios.get('/api/file/recent').then(r => {
        // 整理接口返回的文件和文件夹数据
        const temp = {
            files: r.data.files,
            folders: r.data.folder
        };
        
        // 按created_at日期分组文件
        const temp_files = temp.files.reduce((acc, item) => {
            const date = item.created_at;
            acc[date] = acc[date] ? [...acc[date], item] : [item];
            return acc;
        }, {});
        
        // 按created_at日期分组文件夹
        const temp_folders = temp.folders.reduce((acc, item) => {
            const date = item.created_at;
            acc[date] = acc[date] ? [...acc[date], item] : [item];
            return acc;
        }, {});
        
        // 合并分组结果，生成目标结构
        const recent = {};
        // 收集所有不重复的日期键
        const allDates = new Set([...Object.keys(temp_files), ...Object.keys(temp_folders)]);
        
        allDates.forEach(date => {
            recent[date] = {
                files: temp_files[date] || [], // 无对应数据则设为空数组
                folders: temp_folders[date] || []
            };
        });
        
        // 将结果赋值给组件数据（根据你的需求调整）
        // this.recent = recent;
    });
}

关键逻辑说明 #

1. 收集所有日期：用Set合并文件和文件夹的日期键，避免重复处理同一日期
2. 合并节点数据：遍历每个日期，为每个节点初始化files和folders数组——如果该日期有对应分组数据则使用原数据，没有则设置为空数组，确保每个日期节点的结构统一
3. 优化点：将原代码中的new Array()改为对象字面量{}，更符合数据存储场景；用扩展运算符[...acc[date], item]替代concat，写法更简洁

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