为何多条件过滤对象数组返回空数组？求代码错误排查

我来帮你拆解下代码里的问题，以及怎么修复它：

问题出在哪？ #

你的代码有两个核心逻辑错误：

1. 空过滤条件的判断搞反了
   你写的if (filters[key].length == 0 || filters[key].indexOf(elem[key]) < 0)里，当过滤器数组为空（比如type: []）时，直接返回false。但空数组的实际含义应该是不对这个字段做过滤，而不是“排除所有元素”。这就导致所有元素在检查type字段时都被直接排除，最终得到空数组。

2. 循环内的return逻辑有误
   你在循环中只要遇到一个“不满足”的情况（包括空过滤器）就立刻返回false，但正确的逻辑应该是：只有当过滤器不为空，且元素的对应值不在过滤器数组里时，才排除该元素；空过滤器应该直接跳过，不影响判断。

修复后的代码 #

var cars = [ 
  {color: 'Black', horsePower: 120, type: 'suv'}, 
  {color: 'Red', horsePower: 90, type: 'cabriolet'}, 
  {color: 'Yellow', horsePower: 200, type: 'cabriolet'}, 
  {color: 'Black', horsePower: 350, type: 'suv'} 
];

var filters = { color: ['Black', 'Red'], horsePower: [90], type: [] };

var output = cars.filter((elem) => {
  for (var key in filters) {
    const filterValues = filters[key];
    // 只有当过滤器数组不为空时，才检查元素是否符合条件
    if (filterValues.length > 0) {
      // 用includes替代indexOf，逻辑更直观
      if (!filterValues.includes(elem[key])) {
        return false;
      }
    }
    // 过滤器为空时，直接跳过该字段的检查
  }
  // 所有需要检查的条件都满足，保留该元素
  return true;
});

console.log(output); // 输出：[{color: 'Red', horsePower: 90, type: 'cabriolet'}]

修复后的逻辑说明 #

• 遍历每个过滤字段时，先判断过滤器数组是否有值：为空则跳过，不做任何限制
• 当过滤器数组有值时，检查当前元素的对应值是否在过滤器列表中，不在则直接排除该元素
• 所有字段检查通过（或无需检查）后，才保留该元素

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