Angular中如何判断对象是否存在于两数组并实现列表过滤

核心问题在于对象无法直接通过===或Array.prototype.includes比较——这些方法对比的是对象引用而非属性值，所以需要自定义属性匹配逻辑来实现过滤。

解决方案步骤 #

1. 先写一个辅助函数，用于判断两个技能对象的属性是否完全匹配：

function isSkillMatch(skillA: {name: string, desc: string}, skillB: {name: string, desc: string}): boolean {
  return skillA.name === skillB.name && skillA.desc === skillB.desc;
}

2. 修正过滤函数的参数和逻辑，结合Array.prototype.some实现匹配判断：

// 修正函数名拼写错误（原updatePeronList改为updatePersonList），并修正参数类型
updatePersonList(skillsToFilter: Array<{name: string, desc: string}>) {
  this.filteredList = this.filteredList.filter(person => {
    // 处理人员无技能的边界情况
    if (!person?.skills || person.skills.length === 0) {
      return false;
    }
    // 检查当前人员的技能中，是否存在任意一个匹配输入数组里的技能
    return person.skills.some(personSkill => {
      return skillsToFilter.some(filterSkill => isSkillMatch(personSkill, filterSkill));
    });
  });
}

逻辑说明 #

• 使用person?.skills可选链避免空值报错，无技能的人员直接被过滤；
• 外层person.skills.some：遍历当前人员的技能，检查是否存在符合条件的项；
• 内层skillsToFilter.some：判断该技能是否在输入的过滤数组中有匹配项。

注意事项 #

调用时要修正参数里的拼写错误（原代码中的dec改为desc），否则会导致匹配失败：

// 正确调用示例
updatePersonList([{name: 'b', desc: 'bbb'}]);

此时过滤结果会保留Barbara（她的skills包含目标技能），过滤掉Anna。

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