本文详解如何使用 map() 链式调用将扁平的项目-工作项数据，转换为具有三级嵌套结构（项目 → 工作项 → 子任务）的规范化任务树，支持动态 TaskID 编号与日期解析。
本文详解如何使用 map() 链式调用将扁平的项目-工作项数据，转换为具有三级嵌套结构（项目 → 工作项 → 子任务）的规范化任务树，支持动态 taskid 编号与日期解析。
在构建甘特图、项目管理看板或任务依赖关系系统时，常需将原始 API 返回的「项目（Project）→ 工作项（WorkItem）→ 子任务（Subtask）」三层逻辑，映射为结构清晰、ID 可追溯的嵌套对象数组。核心挑战在于：外层 map 生成项目主节点，中层 map 生成其 subtasks（即原 workItems），而内层需进一步展开每个 workItem 自带的 subtasks 数组（若存在）——这要求精准的层级解构与 ID 语义化拼接。
以下为完整、可运行的转换方案：
const newProjects = projects.map((project, projectIndex) => {
// 项目级基础字段（注意：TaskID 从 1 开始，避免 0 起始）
const baseProject = {
TaskID: projectIndex + 1,
ProjectNo: project.projectNumber,
TaskName: project.projectTitle,
StartDate: new Date(project.projectStart),
EndDate: new Date(project.projectEnd),
// 初始化空 subtasks 数组，供后续填充
subtasks: []
};
// 若 project.workItems 存在且为数组，则逐项映射为二级 subtask
if (Array.isArray(project.workItems) && project.workItems.length > 0) {
baseProject.subtasks = project.workItems.map((workItem, workIndex) => {
const taskIDPrefix = `${projectIndex + 1}.${workIndex + 1}`;
// 二级 subtask 对象
const workSubtask = {
TaskID: taskIDPrefix,
TaskName: workItem.name,
StartDate: new Date(project.projectStart),
Duration: 30, // 示例值，建议替换为 workItem.duration 或计算逻辑
Progress: 150, // 同上，按实际业务字段调整
// 若 workItem 自带 subtasks 字段（如示例输出所示），则递归映射
subtasks: Array.isArray(workItem.subtasks)
? workItem.subtasks.map((subtask, subIndex) => ({
TaskID: `${taskIDPrefix}.${subIndex + 1}`,
TaskName: subtask.name,
StartDate: new Date(project.projectStart),
Duration: 30,
Progress: 150
}))
: [] // 安全兜底：无 subtasks 则返回空数组
};
return workSubtask;
});
}
return baseProject;
});
✅ 关键要点说明：
-
ID 语义化生成：采用
X.Y（项目.工作项）、X.Y.Z（项目.工作项.子任务）格式，确保全局唯一且体现层级关系，便于前端渲染或后端校验； -
健壮性处理：显式检查
workItems和subtasks是否为有效数组，避免map()在undefined上报错； -
日期标准化：统一使用
new Date(project.projectStart)替代硬编码字符串（如"11/11/2024"），确保时区与格式兼容性； -
字段可扩展性：
Duration、Progress等占位字段应替换为真实数据源（如workItem.estimatedHours或subtask.progressPercent），保持业务一致性。
⚠️ 注意事项：
- 原始数据中
workItems数组内对象默认不含subtasks字段（见输入示例），但目标输出明确包含三级结构。因此，你必须确认后端是否已提供该字段，或需在前端按规则动态生成（例如将siteSurveyStart/siteSurveyEnd拆分为独立子任务）； - 若需深度递归（>3 层），建议封装为独立递归函数，避免
map嵌套过深导致可读性下降； - 大数据量下（如数百项目），可考虑使用
for...of替代链式map以优化性能，但需权衡代码简洁性与执行效率。
最终生成的 newProjects 即为符合要求的嵌套任务树，可直接用于 ECharts 甘特图、DHTMLX Gantt 或自定义树形组件渲染。
