如何将任务数组按状态分3列展示？是否有更优实现方案？

你的思路是拆分三个数组再渲染，虽然可行，但可以通过一次遍历分组的方式优化，既减少遍历次数，也让代码更简洁易维护，尤其适合数据量较大的场景。

具体步骤： #

1. 先完成一次分组（仅遍历原数组一次）

用Array.reduce()把任务按状态映射到对应列标题下，同时建立状态和列名的映射关系，避免硬编码：

const tasks = [
  {name: 'task1', status: 'new'},
  {name: 'task2', status: 'progress'},
  {name: 'task3', status: 'completed'},
  {name: 'task4', status: 'progress'},
  {name: 'task5', status: 'new'}
];

// 状态与列标题的映射，后续修改或新增状态只需改这里
const statusToColumn = {
  'new': 'New task',
  'progress': 'progressTask',
  'completed': 'completed task'
};

// 一次遍历完成分组，生成列标题对应任务列表的对象
const groupedTasks = tasks.reduce((result, task) => {
  const columnName = statusToColumn[task.status];
  // 若该列还未初始化数组，则创建空数组
  if (!result[columnName]) {
    result[columnName] = [];
  }
  result[columnName].push(task.name);
  return result;
}, {});

分组后得到的groupedTasks结构如下：

{
  "New task": ["task1", "task5"],
  "progressTask": ["task2", "task4"],
  "completed task": ["task3"]
}

2. 基于分组结果渲染表格

按指定的列顺序渲染，同时处理不同列任务数量不一致的情况（补全空单元格）：

// 固定列顺序，保证表格列的展示顺序正确
const columnOrder = ['New task', 'progressTask', 'completed task'];
// 找到最长的任务列表长度，确定表格需要多少行
const maxRowNum = Math.max(...columnOrder.map(col => groupedTasks[col]?.length || 0));

// 创建表格（以原生JS为例，框架渲染逻辑类似）
const table = document.createElement('table');
table.style.borderCollapse = 'collapse';

// 渲染表头
const headerRow = document.createElement('tr');
columnOrder.forEach(col => {
  const th = document.createElement('th');
  th.textContent = col;
  th.style.border = '1px solid #000';
  th.style.padding = '8px';
  headerRow.appendChild(th);
});
table.appendChild(headerRow);

// 渲染表体
const tbody = document.createElement('tbody');
for (let i = 0; i < maxRowNum; i++) {
  const row = document.createElement('tr');
  columnOrder.forEach(col => {
    const td = document.createElement('td');
    // 当前行对应列有任务则显示，否则留空
    td.textContent = groupedTasks[col]?.[i] || '';
    td.style.border = '1px solid #000';
    td.style.padding = '8px';
    td.style.textAlign = 'center';
    row.appendChild(td);
  });
  tbody.appendChild(row);
}
table.appendChild(tbody);

// 插入到页面
document.body.appendChild(table);

对比原方案的优势： #

• 性能更优：原方案用三次filter会遍历数组三次，而reduce仅需一次遍历，数据量越大，性能差异越明显。
• 可维护性更高：新增或修改状态时，只需调整statusToColumn和columnOrder，无需修改过滤逻辑。
• 逻辑更简洁：分组与渲染职责分离，代码结构更清晰。

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