ReactJs中如何按id合并筛选两个列表？最优清晰实现方法

嘿，这个需求其实挺常见的，咱们用原生JavaScript的数组方法就能优雅搞定，不用额外依赖第三方库，代码清晰还高效。

先明确下需求：我们要从列表一里筛选出那些在列表二中存在（通过id字段匹配）的元素，并且保留列表一中元素的完整数据对吧？

最优实现步骤 #

核心思路是先把列表二的id提取成一个集合（Set），这样后续查找的时间复杂度是O(1)，然后用filter方法过滤列表一即可：

1. 提取列表二的ID集合
   把列表二中所有元素的id提取出来存入Set，这一步是为了提升查找效率，尤其是当列表数据量较大时，比用数组includes要快得多：

   const list2Ids = new Set(list2.map(item => item.id));
   

2. 筛选列表一的匹配项
   用filter方法遍历列表一，只保留id在上述集合中的元素：

   const mergedList = list1.filter(item => list2Ids.has(item.id));
   

完整代码示例 #

// 你的原始列表数据
const list1 = [ 
  {id:1,name:"abc",city:"ddd"}, 
  {id:2,name:"cde",city:"ddd"}, 
  {id:3,name:"ttt",city:"fff"} 
];
const list2 = [ 
  {id:1,name:"abc"}, 
  {id:3,name:"ttt"} 
];

// 第一步：创建ID集合，优化查找性能
const list2Ids = new Set(list2.map(item => item.id));
// 第二步：筛选得到目标结果
const mergedList = list1.filter(item => list2Ids.has(item.id));

console.log(mergedList);
// 输出结果：
// [ {id:1,name:"abc",city:"ddd"}, {id:3,name:"ttt",city:"fff"} ]

为什么这个方法最优？ #

• 性能高效：时间复杂度是O(n + m)（n是列表一长度，m是列表二长度），比嵌套循环的O(n*m)快太多，数据量大时优势明显
• 代码简洁清晰：逻辑一目了然，读代码的人能快速理解你要做什么
• 无额外依赖：完全使用原生JS API，不用引入lodash等库，减少项目依赖

扩展场景（可选） #

如果之后需求变更，需要把列表二中的额外字段合并到列表一的匹配项里（比如列表二有age字段要合并），可以用map + find的方式：

const mergedList = list1
  .map(item => {
    const matchItem = list2.find(list2Item => list2Item.id === item.id);
    // 如果找到匹配项，合并两个对象的字段；否则保留原对象
    return matchItem ? {...item, ...matchItem} : item;
  })
  // 最后过滤掉没有匹配项的元素
  .filter(item => list2Ids.has(item.id));

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