javascript - 按多个键和值过滤，Javascript

Question

我正在尝试制作过滤器。过滤器的数量会动态变化，键的数量可以不同，值的数量也可以不同。

这是数据的样子:

var data = [
{id: "123", color: "Red", model: "Tesla"}, 
{id: "124", color: "Black", model: "Honda"}, 
{id: "125", color: "Red", model: "Audi"}, 
{id: "126", color: "Blue", model: "Tesla"}]

过滤器键是颜色和模型。但有时我会仅按颜色或型号过滤，有时同时按两者过滤。我想制作一个涵盖这两种情况的功能。此外，用户可以选择许多值(特斯拉、本田...)。

键可以是唯一的颜色，或只有模型，或两者兼而有之。
值可能如下所示:只有“Red”、“Red”和“Blue”，或“Red”和“Tesla”，或“Red”、“Blue”和“Tesla”……取决于用户的选择。

我试过这个:

var filtered = [];
data.forEach(item => {
   filterByKey.forEach(key => {
      values.forEach(value => {
         if (item[key] === value) {
             filtered.push(item);
          }
       });
    });
  });

这里是 JsFiddle

当我有一个过滤键时，我的循环运行良好，但当我有多个键时，它就无法正常运行。将键和值作为数组传递是个好主意吗？

请不要使用 jQuery，只有纯 JavaScript。

Answer 1

您可以使用filter()与 every()并检查具有当前键的当前对象的值是否存在于 values 中数组使用 includes()

var data = [{"id":"123","color":"Red","model":"Tesla"},{"id":"124","color":"Black","model":"Honda"},{"id":"125","color":"Red","model":"Audi"},{"id":"126","color":"Blue","model":"Tesla"}]

var keys = ["color", 'model'];
var values = ["Tesla", "Audi", "Red"];

var result = data.filter(function(e) {
  return keys.every(function(a) {
    return values.includes(e[a])
  })
})

console.log(result);