如何在forEach循环中正确使用Array.prototype.filter()处理对象数组

核心问题是对Array.prototype.filter()的返回逻辑理解错误：

• filter方法的回调函数返回true时，对应的元素会被保留到新生成的数组中，而非被移除。
• 你现有代码中写的element.href == entry.href逻辑，意味着每次遍历links数组的元素时，只会保留index数组中和当前links元素href完全匹配的项。

实际运行流程完全和预期相反：

1. 第一轮遍历links的第一个元素{ href: '/accessibility', ... }，filter后index数组仅剩下1条href为/accessibility的匹配项
2. 第二轮遍历links的第二个元素{ href: '/accessibility/accessibility-statement', ... }，此时index数组里仅剩的项和当前href不匹配，filter直接返回空数组
3. 后续所有遍历都是基于空数组执行filter，最终结果自然是空数组。

方案1：最小改动现有逻辑 #

只需要把filter的判断条件反转，保留和当前links元素href不匹配的项即可：

function removeLinksFromIndex(links, index) {
  links.forEach(element => {
    // 保留href不相等的项，即移除匹配项
    index = index.filter(entry => element.href !== entry.href);
  });
  return index;
}

方案2：更高效的实现（推荐） #

如果数组数据量较大，多次执行filter会带来不必要的性能损耗，可以先把所有links的href存入Set，单次filter即可完成筛选，时间复杂度更低：

function removeLinksFromIndex(links, index) {
  // 先提取所有需要移除的href集合
  const linkHrefs = new Set(links.map(item => item.href));
  // 单次过滤：仅保留href不在移除集合中的项
  return index.filter(entry => !linkHrefs.has(entry.href));
}

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