React中如何实现多条件数组全匹配过滤对象数组？

问题核心 #

你当前的代码实现的是**逻辑或（OR）过滤（满足任一条件即返回），但需要的是逻辑与（AND）**过滤（必须满足所有条件才返回）。

原方案问题分析 #

• 方案1：filterCity.filter(...).length 只要有一个条件匹配，结果数组长度就大于0，返回true，属于“任一满足”逻辑。
• 方案2：reduce初始值为false，只要有一个条件匹配就将acc设为true，后续不会再变回false，同样是“任一满足”逻辑。

正确实现方案 #

方案一：使用Array.every()（最简洁直观） #

every()方法会检查数组中所有元素是否都通过测试，正好符合“所有条件都满足”的需求：

const filteredList = citiesData.filter(item => {
  return filterCity.every(fItem => {
    return item[fItem.filterType] === fItem.filterValue;
  });
});

代码解释

• 遍历citiesData中的每个城市item
• 对每个城市，用every()检查filterCity里的所有条件：只有当该城市满足所有过滤条件时，every()返回true，该城市才会被保留在filteredList中。

方案二：修改原reduce逻辑 #

如果想基于原有的reduce方案调整，需要将逻辑改为“累加逻辑与”：

const filteredList = citiesData.filter(item => {
  return filterCity.reduce((acc, val) => {
    // 初始acc为true，每一步都要保持所有条件都满足
    return acc && (item[val.filterType] === val.filterValue);
  }, true); // 初始值改为true，因为要从“全部满足”开始验证
});

代码解释

• 初始acc设为true，假设当前城市满足所有条件
• 遍历每个过滤条件时，用acc && 条件结果：只要有一个条件不满足，acc就会变成false，且后续不会再变回true
• 最终只有当所有条件都满足时，reduce才返回true，城市被保留。

验证结果 #

两种方案执行后，都会得到你期望的结果：

[ { id: 1, name: 'amritsar', popu: '1200' } ]

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