如何过滤对象数组以实现部门手风琴（accordion）与对应模型的关联渲染？

嗨，我来帮你搞定这个需求！要实现按部门分组展示对应模型的手风琴，核心就是把两个数组关联起来，生成部门+对应模型的结构化数据，这样渲染的时候就会非常顺手。

基础实现思路 #

我们可以遍历每个部门，然后从模型数组里筛选出关联了该部门的模型。这里用部门id来匹配是最稳妥的（毕竟id是唯一标识，比名称更不容易出问题）。

直接上代码：

const department = [ { id: '1', name: 'department1' }, { id: '2', name: 'department2' }, ];
const models = [ { id: '23', name: 'model1', departments: [{ id: '1', name: 'department1' }], }, { id: '54', name: 'model2', departments: [ { id: '1', name: 'department1' }, { id: '2', name: 'department2' }, ], } ];

// 生成部门与对应模型的关联数组
const departmentWithModels = department.map(dept => {
  // 筛选出包含当前部门的所有模型
  const matchedModels = models.filter(model => 
    model.departments.some(deptInModel => deptInModel.id === dept.id)
  );
  
  // 返回整合后的对象，只保留需要的字段（避免冗余数据）
  return {
    ...dept,
    models: matchedModels.map(model => ({ id: model.id, name: model.name }))
  };
});

console.log(departmentWithModels);

运行这段代码后，你会得到这样的结构化结果：

[
  {
    "id": "1",
    "name": "department1",
    "models": [
      { "id": "23", "name": "model1" },
      { "id": "54", "name": "model2" }
    ]
  },
  {
    "id": "2",
    "name": "department2",
    "models": [
      { "id": "54", "name": "model2" }
    ]
  }
]

现在你就可以直接用这个数组渲染手风琴了：遍历departmentWithModels，每个项的name作为手风琴的标题，models数组里的name渲染在详情区域就行。

性能优化（针对大数据量） #

如果你的部门和模型数量很多，上面的方法会因为多次遍历模型数组影响性能。这时候可以先预构建一个部门id到模型的映射表，之后直接查表就能快速匹配：

// 第一步：预构建部门id对应的模型列表
const deptIdToModels = models.reduce((mapping, model) => {
  model.departments.forEach(dept => {
    if (!mapping[dept.id]) {
      mapping[dept.id] = [];
    }
    mapping[dept.id].push({ id: model.id, name: model.name });
  });
  return mapping;
}, {});

// 第二步：生成最终的部门关联数据
const departmentWithModels = department.map(dept => ({
  ...dept,
  models: deptIdToModels[dept.id] || [] // 没有匹配模型就返回空数组
}));

这个方法只需要遍历一次模型数组，之后匹配部门的操作都是O(1)的，效率会高很多。

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