Angular：如何按规则过滤对象数组（含去重逻辑）

原数组 #

const myObjectArray = [
 {name:'John', label:'ab', isActive: false},
 {name:'Sara', label:'bb', isActive: false},
 {name:'John', label:'cb', isActive: false},
 {name:'Nicole', label:'eb', isActive: true},
 {name:'Nicole', label:'eb', isActive: true},
 {name:'Nicole', label:'eb', isActive: true},
 {name:'Nicole', label:'eb', isActive: true},
 {name:'Sara', label:'fb', isActive: false},
 {name:'Thomas', label:'gb', isActive: false},
 {name:'Holly', label:'gb', isActive: true},
 {name:'Nicole', label:'hb', isActive: true},
 {name:'Nicole', label:'eb', isActive: true},
 {name:'Sara', label:'ib', isActive: false}
];

规则要求 #

• isActive: false的对象仅保留唯一实例（即相同name+label+isActive的对象只留一个）
• isActive: true的对象全部保留，无论重复多少次

实现代码（使用find方法） #

通过遍历数组，结合find方法检查结果数组中是否已存在符合条件的元素，完成过滤：

const filteredArray = [];

myObjectArray.forEach(item => {
  if (item.isActive) {
    // 活跃对象直接加入结果数组
    filteredArray.push(item);
  } else {
    // 用find检查结果数组中是否已有相同name+label的非活跃对象
    const hasDuplicate = filteredArray.find(el => 
      !el.isActive && el.name === item.name && el.label === item.label
    );
    if (!hasDuplicate) {
      filteredArray.push(item);
    }
  }
});

console.log(filteredArray);

输出结果 #

执行后会保留所有isActive: true的对象，以及所有不重复的isActive: false对象：

[
 {name:'John', label:'ab', isActive: false},
 {name:'Sara', label:'bb', isActive: false},
 {name:'John', label:'cb', isActive: false},
 {name:'Nicole', label:'eb', isActive: true},
 {name:'Nicole', label:'eb', isActive: true},
 {name:'Nicole', label:'eb', isActive: true},
 {name:'Nicole', label:'eb', isActive: true},
 {name:'Sara', label:'fb', isActive: false},
 {name:'Thomas', label:'gb', isActive: false},
 {name:'Holly', label:'gb', isActive: true},
 {name:'Nicole', label:'hb', isActive: true},
 {name:'Nicole', label:'eb', isActive: true},
 {name:'Sara', label:'ib', isActive: false}
]

若要得到你提供的目标数组 #

观察目标数组可知实际规则为：每个name仅保留第一个出现的实例（无论活跃状态），对应的实现代码（使用find方法）：

const filteredArray = [];

myObjectArray.forEach(item => {
  // 用find检查结果数组中是否已有相同name的元素
  const hasDuplicate = filteredArray.find(el => el.name === item.name);
  if (!hasDuplicate) {
    filteredArray.push(item);
  }
});

console.log(filteredArray);

执行后结果与你提供的目标数组完全一致：

[
 {name:'John', label:'ab', isActive: false},
 {name:'Sara', label:'bb', isActive: false},
 {name:'Nicole', label:'eb', isActive: true},
 {name:'Thomas', label:'gb', isActive: false},
 {name:'Holly', label:'gb', isActive: true},
]

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