在JavaScript项目里，任务列表常需要以多维数组形式组织，例如按项目分组存放任务。直接写多层循环不仅难读还容易出bug，利用数组原生方法可以更高效地完成构建与维护。
方法一：使用map嵌套构建分组任务列表
当原始数据本身就是二维结构时，可以用外层map遍历分组，内层map映射每个任务对象。
示例代码
// 原始多维数组：按团队分组的任务
const raw = [
['设计登录页', '写API文档'],
['修复列表bug', '优化打包']
];
// 构建带状态的任务列表
const taskList = raw.map((group, i) => ({
groupId: i,
tasks: group.map((name, idx) => ({
id: i + '-' + idx,
name: name,
done: false
}))
}));
console.log(taskList);
这种方式逻辑直观，适合数据层级固定的场景。
方法二：使用reduce归并后分组
如果任务是扁平数组但带有分组字段，用reduce能一次完成分组与结构转换。
示例代码
// 扁平任务数据
const flat = [
{ team: 'A', name: '设计登录页' },
{ team: 'A', name: '写API文档' },
{ team: 'B', name: '修复列表bug' }
];
// 用reduce构建多维任务列表
const list = flat.reduce((acc, cur) => {
const key = cur.team;
if (!acc[key]) acc[key] = [];
acc[key].push({ name: cur.name, done: false });
return acc;
}, {});
console.log(list);
两种方法的对比
| 方法 | 适用数据 | 可读性 |
|---|---|---|
| map嵌套 | 已知维度的二维数组 | 高 |
| reduce分组 | 扁平带字段数据 | 中 |
小结
合理选用map与reduce处理多维数组，可以让任务列表代码更简洁。建议根据接口返回格式决定具体方案，并在组件中封装增删改函数以提升复用性。
JavaScript多维数组任务列表修改时间：2026-07-26 11:54:14