如何依据arr2结构筛选arr1数据并生成目标数组？

实现代码 #

const arr1 = [{id:'1', List:[{name:'a', title:'a title'}, {name:'b', title:'b title'}]}, {id:'2', List:[{name:'c', title:'c title'}, {name:'d', title:'d title'}]}];
const arr2 = [{id:'1', name:'a'}, {id:'1', name:'b'}, {id:'2', name:'c'}];

// 构建id到需保留name集合的映射
const idToNames = arr2.reduce((map, item) => {
  if (!map[item.id]) {
    map[item.id] = new Set();
  }
  map[item.id].add(item.name);
  return map;
}, {});

// 过滤arr1生成目标数组
const newArr = arr1.map(item => ({
  ...item,
  List: item.List.filter(listItem => idToNames[item.id]?.has(listItem.name))
}));

console.log(newArr);

逻辑说明 #

1. 构建映射表：用reduce遍历arr2，把每个id对应的name存入Set集合，后续判断name是否需要保留时，时间复杂度为O(1)，比多次遍历arr2高效。
2. 过滤arr1数据：遍历arr1的每个元素，对其List数组进行过滤，只保留那些name存在于对应id集合中的项，同时用扩展运算符复制原对象属性，避免修改原数组。

这种方法比三层forEach更简洁高效，也能避免嵌套循环导致的逻辑混乱。

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