本文介绍如何将具有相同日期属性（如 "2023-06-05"）的文件数组和文件夹数组，高效、可读地合并为统一的嵌套结构，避免冗余循环与空值判断，提供函数式、健壮且易于维护的解决方案。
本文介绍如何将具有相同日期属性（如 "2023-06-05"）的文件数组和文件夹数组，高效、可读地合并为统一的嵌套结构，避免冗余循环与空值判断，提供函数式、健壮且易于维护的解决方案。
在构建文件管理类应用（如网盘或资源浏览器）时，常需将服务端返回的 files 和 folders 两类数据，按其 created_at 字段（格式为 YYYY-MM-DD）归并到同一时间维度下。目标结构如下：
recent: {
"2023-05-06": {
files: [...],
folders: [...]
},
"2023-05-07": {
files: [...],
folders: [...]
}
}原始实现存在明显缺陷：手动创建多个中间对象（temp_files/temp_folders/files/folders）、重复 reduce 逻辑、使用 null 占位导致类型不安全，且 Object.keys(temp_files, temp_folders) 实际仅取第一个参数——语法无效。
✅ 推荐解法：单次遍历 + Map 驱动聚合 + 解构合并，兼顾性能、可读性与健壮性：
created() {
axios.get('/api/file/recent').then(r => {
// 步骤1：统一提取所有日期键，并去重
const allItems = [...r.data.files, ...r.data.folders];
const dateKeys = [...new Set(allItems.map(item => item.created_at))];
// 步骤2：用 Map 按日期预分组（避免重复查找）
const filesByDate = new Map();
const foldersByDate = new Map();
r.data.files.forEach(file => {
const date = file.created_at;
filesByDate.set(date, [...(filesByDate.get(date) || []), file]);
});
r.data.folders.forEach(folder => {
const date = folder.created_at;
foldersByDate.set(date, [...(foldersByDate.get(date) || []), folder]);
});
// 步骤3：生成最终 recent 对象（函数式、无副作用）
const recent = Object.fromEntries(
dateKeys.map(date => [
date,
{
files: filesByDate.get(date) || [],
folders: foldersByDate.get(date) || []
}
])
);
this.recent = recent; // 假设 Vue 实例中绑定 data 属性
});
}? 关键优化点说明：
立即学习“Java免费学习笔记（深入）”；
- 避免多次 reduce：原方案对 files 和 folders 各执行一次 reduce，而本方案通过 Map 实现 O(1) 插入与查询，时间复杂度仍为 O(n)，但常数更小；
- 类型安全：files 与 folders 均默认为空数组（[]），而非 null，下游消费无需额外判空；
- 语义清晰：Object.fromEntries() + map() 明确表达“将日期映射为 {files, folders} 对象”的意图；
- 可扩展性强：若后续新增 links 或 archives 类型，只需追加对应 forEach 分组逻辑，主体结构不变。
? 进阶建议（TypeScript 用户）：
可定义类型提升安全性：
interface FileItem { created_at: string; name: string; /* ... */ }
interface FolderItem { created_at: string; title: string; /* ... */ }
type RecentRecord = {
files: FileItem[];
folders: FolderItem[];
};
type RecentMap = Record<string, RecentRecord>;总结：合并同键对象不应依赖“拼凑式”多层嵌套赋值。以日期为枢纽，用 Map 聚合 + Object.fromEntries() 组装，是兼顾性能、可读性与工程健壮性的现代 JavaScript 实践。
