如何在现有数组对象过滤方法中新增重复URL项的去重功能

实现思路 #

• 先保留原有过滤逻辑，筛选出image为null或image非webp格式的项
• 借助Set结构记录已经出现过的url值，遍历过程中过滤掉url重复的项
• 无url属性的资源（如示例中的纯图片类型项）不参与去重，直接保留

完整代码 #

const seenUrls = new Set();
const galleryFilter = gallery.filter((item) => {
  // 执行原有过滤逻辑
  const passBaseCheck = item?.image?.indexOf("webp") === -1 || item?.image === null;
  if (!passBaseCheck) return false;
  // 无url的项直接保留
  if (!item.url) return true;
  // 去重判断：已存在的url过滤，不存在的加入集合后保留
  if (seenUrls.has(item.url)) return false;
  seenUrls.add(item.url);
  return true;
});

运行效果 #

针对你提供的示例数组，执行后最终结果保留id为1、2、4的3项：

• id=3的项因image为webp格式被原有逻辑过滤
• id=5的项因url和id=2重复被去重逻辑过滤

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