javascript - 在数组上应用多个过滤器

Question

我的这个项目有一个搜索页面，其中有一个基本的过滤器表单。我设法过滤了数据，但一次只能使用一个过滤器。我无法理解为缩小数据范围而应用多个过滤器背后的逻辑。

示例:

let data = [{
    budget: "220",
    categories: ["party", "school"]
  },
  {
    budget: "450",
    categories: ["self"]
  },
  {
    budget: "600",
    categories: ["dev", "work"]
  }
];

const filters = {
  budget: ["200","500"],
  categories: ["party"]
}

//////Expected behavior:
Outputs only the first object because it's budget it's between 200 and 500 and it has "party" as it's category.

这个例子基本上模拟了我在我的应用程序中的内容。如您所见，我有一个对象数组。每个对象都有一个预算和多个类别。对于过滤器，假设我应用了一个预算过滤器(这将是一个范围过滤器)和一个类别过滤器。我应该如何将这些过滤器链接在一起以正确过滤数据？

Answer 1

每个过滤器都应该有一个可以处理检查的函数。 filterHandlers 是一个 Map这样的处理程序。

过滤器的数组和对象被传递给applyFilters()。该方法获取过滤器的键(通过 Object.keys() )，并使用 Array.filters() 迭代项目。 .使用Array.every()该项目由所有过滤器检查(使用相关的处理程序)。如果所有检查都通过，则该项目将包含在结果数组中。

每当您需要添加另一个过滤器时，您就可以向 Map 添加另一个处理程序。

const filterHandlers = new Map([
  [
    'budget', 
    (val, [min, max]) => val >= min && val <= max
  ],
  [
    'categories', 
    (current, categories) => current.some( // some - at least one, every - all of them 
      (c) => categories.includes(c)
    )
  ],
  []
]);

const applyFilters = (arr, filters) => {
  const filterKeys = Object.keys(filters);
  
  return arr.filter(o => filterKeys.every((key) => {
    const handler = filterHandlers.get(key);
    
    return !handler || handler(o[key], filters[key]);
  }));
}

const data = [{"budget":"220","categories":["party","school"]},{"budget":"450","categories":["self"]},{"budget":"600","categories":["dev","work"]}];

const filters = {"budget":["200","500"],"categories":["party"]};

const result = applyFilters(data, filters);

console.log(result);