如何根据对象存储的两个独立字符串条件过滤JavaScript数组

问题原因 #

你写的两个版本逻辑均存在问题：

1. 第一版的forEach循环每次都基于原始的covers数组做过滤，直接覆盖results变量，循环结束后只会保留最后一个过滤条件的匹配结果，前面的条件完全不生效。
2. 第二版将每个条件的匹配结果直接合并到数组中，实现的是「满足任意一个条件就返回」的或逻辑，还会出现重复元素，不符合「同时满足所有激活条件」的需求。

解决方案 #

直接修改performFilter函数即可，使用Array.every()判断元素是否满足所有过滤条件：

const performFilter = (covers) => {
  const activeFilterValues = Object.values(activeFilters);
  // 无激活过滤条件时返回全部元素
  if (activeFilterValues.length === 0) return covers;
  // 仅保留同时匹配所有过滤关键词的元素
  return covers.filter(cover => {
    return activeFilterValues.every(key => cover.value.indexOf(key) !== -1);
  });
};

上述代码的逻辑是：对每个待过滤的元素，遍历所有激活的过滤关键词，只有当元素的value包含所有关键词时才会被保留，完全符合你需要的多条件同时匹配需求。

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