如何用JavaScript实现动态条件过滤两个对象数组？

可以实现完全动态的过滤逻辑，不管条件数组新增多少属性条件或条件对象，都能自动适配。核心思路是让每个条件对象的所有键值对都匹配数据元素，同时只要满足条件数组中任意一个条件对象即可。

实现代码 #

const a = [
  {name:'John',age:38,role:'Dad'},
  {name:'Jane',age:38,role:'Mom'},
  {name:'Patricia',age:11,role:'Daughter'},
  {name:'Mike',age:6,role:'Son'}
];
const b = [{age:38}, {role:'Son'}];

const filteredData = a.filter(item => {
  // 检查当前数据项是否满足条件数组中的任意一个条件
  return b.some(condition => {
    // 验证条件对象的所有键值对是否都与数据项匹配
    return Object.entries(condition).every(([key, value]) => {
      return item[key] === value;
    });
  });
});

console.log(filteredData);

输出结果 #

[
  {name:'John',age:38,role:'Dad'},
  {name:'Jane',age:38,role:'Mom'},
  {name:'Mike',age:6,role:'Son'}
]

逻辑说明 #

1. a.filter()：遍历数据数组的每一个元素，筛选符合条件的项
2. b.some()：判断当前数据项是否满足条件数组中的任意一个条件对象
3. Object.entries(condition).every()：将条件对象转换为键值对数组，确保该条件对象的所有属性都与数据项的对应属性值完全匹配

扩展测试 #

如果条件数组新增更复杂的条件，比如：

const b = [{age:38, role:'Dad'}, {role:'Son'}, {name: 'Patricia'}];

过滤结果会自动变成：

[
  {name:'John',age:38,role:'Dad'},
  {name:'Mike',age:6,role:'Son'},
  {name:'Patricia',age:11,role:'Daughter'}
]

完全不需要修改过滤逻辑，直接新增条件即可生效。

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