React中如何基于动态多条件对象实现对象数组的动态过滤（替代固定&&判断逻辑）

这问题我做项目时也碰到过，写死&&判断确实太不灵活了，尤其是过滤条件的属性多且会动态变化的时候。给你分享一个简洁又通用的实现方式：

核心思路 #

先从过滤条件对象arrTofilter中提取有实际过滤值的属性（也就是数组非空的那些键值对），然后对主数组的每个元素，检查它是否满足所有这些活跃的过滤条件。

代码实现 #

let mainArr = [{ AREA: "INDIA", GROUP_DESC: "Group A", BUSINESS_ID: "1", SUB_REGION: "KARNATAKA" }, { AREA: "INDIA", GROUP_DESC: "Group A", BUSINESS_ID: "2", SUB_REGION: "Tamilnadu" }, { AREA: "INDIA", GROUP_DESC: "Group C", BUSINESS_ID: "3", SUB_REGION: "Kerala" }, { AREA: "AFRICA", GROUP_DESC: "Group D", BUSINESS_ID: "4", SUB_REGION: "Nigeria" }];
let arrTofilter = { AREA: [], GROUP_DESC: ['Group A', 'Group D'], BUSINESS_ID: ['2'], SUB_REGION: [] };

// 第一步：筛选出非空的过滤条件
const activeFilters = Object.entries(arrTofilter)
  .filter(([_, filterValues]) => filterValues.length > 0);

// 第二步：动态过滤主数组
const finalArr = mainArr.filter(item => {
  // 检查当前元素是否满足所有活跃过滤条件
  return activeFilters.every(([key, filterValues]) => {
    return filterValues.includes(item[key]);
  });
});

console.log(finalArr);
// 输出结果：[{ AREA: "INDIA", GROUP_DESC: "Group A", BUSINESS_ID: "2", SUB_REGION: "Tamilnadu" }]

动态适配演示 #

当arrTofilter更新为只有GROUP_DESC有值时：

let arrTofilter = {AREA: [], GROUP_DESC: ['Group A','Group D'], BUSINESS_ID: [], SUB_REGION: []};

// 重复上面的过滤逻辑
const activeFilters = Object.entries(arrTofilter).filter(([_, values]) => values.length > 0);
const finalArr = mainArr.filter(item => activeFilters.every(([key, values]) => values.includes(item[key])));

console.log(finalArr);
// 输出结果：前两个和第四个元素（GROUP_DESC为Group A或Group D的项）

优势说明 #

• 完全动态：不管arrTofilter有多少个属性，都会自动处理，不需要手动添加&&判断
• 自动忽略空条件：如果某个属性的过滤数组为空，会被自动排除在过滤逻辑之外
• 逻辑清晰：把过滤条件的筛选和元素检查分开，代码可读性高

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