使用多个筛选数组过滤数组

Question

我正在尝试基于多个筛选器数组过滤一个项数组。每个项目都有一个筛选器的选择，我只需要显示那些匹配所有选定的过滤器。

const selectedFilters = {
    color: ["Red", "Blue"],
    type: ["Shirt"],
    size: ["M"]
};

const items = [
    {
        name: "Item 1",
        filters: {
            color: ["Red", "Blue", "Black"],
            type: ["Shirt"],
            size: ["M"]
        }
    },
    {
        name: "Item 2",
        filters: {
            color: ["Red"],
            type: ["Pants"],
            size: ["M"]
        }
    }
];

这就是我一直在努力解决的问题。对不为空的每个筛选器类别进行筛选，遍历所有筛选词，并检查项目是否匹配它们。

const filterItems = (items, selectedFilters) => {
    const filterKeys = Object.keys(selectedFilters);

    return items.filter(item => {
        return filterKeys.every(key => {

            // Ignore empty filters
            if (!selectedFilters[key].length) {
                return true;
            }

            return selectedFilters[key].every(filterWord => {
                item.filters[key].includes(filterWord);
            });
        });
    });
};

filterItems(items, selectedFilters);

返回一个空数组，应该返回一个带有"Item 1“对象的数组。

Answer 1

您可以创建selectedFilters的值数组以及filters属性值数组。然后使用every on selectedFilters检查其中的所有值是否都存在于filters中。

​

const selectedFilters = {
    color: ["Red", "Blue"],
    type: ["Shirt"],
    size: ["M"]
};

const items = [
    {
        name: "Item 1",
        filters: {
            color: ["Red", "Blue", "Black"],
            type: ["Shirt"],
            size: ["M"]
        }
    },
    {
        name: "Item 2",
        filters: {
            color: ["Red"],
            type: ["Pants"],
            size: ["M"]
        }
    }
];

const filterArr = Object.values(selectedFilters).flat();

const output = items.filter(({filters}) => {
    const objFilters = Object.values(filters).flat();
    return filterArr.every(val => objFilters.includes(val));
})
console.log(output);

​

Answer 2

您可以使用some来检查数组中至少包含了一个元素，并且函数需要一个bool返回值。

some()方法测试数组中的至少一个元素是否通过了由提供的函数实现的测试。它返回一个布尔值。

​

const selectedFilters = {"color":["Red","Blue"],"type":["Shirt"],"size":["M"]}
const items = [{"name":"Item 1","filters":{"color":["Red","Blue","Black"],"type":["Shirt"],"size":["M"]}},{"name":"Item 2","filters":{"color":["Red"],"type":["Pants"],"size":["M"]}}]

const filterItems = (items, selectedFilters) => {
  const filterKeys = Object.keys(selectedFilters);
  return items.filter(item => {
    return filterKeys.every(key => {
      return selectedFilters[key].some(filterWord => {   //Use some
        return item.filters[key].includes(filterWord);   //Return the a bool
      });
    })
  });
};

var result = filterItems(items, selectedFilters);
console.log(result);

​

较短版本：

​

const selectedFilters = {"color":["Red","Blue"],"type":["Shirt"],"size":["M"]};

const items = [{"name":"Item 1","filters":{"color":["Red","Blue","Black"],"type":["Shirt"],"size":["M"]}},{"name":"Item 2","filters":{"color":["Red"],"type":["Pants"],"size":["M"]}}];

const filterItems = (items, selectedFilters) => {
  const fkeys = Object.keys(selectedFilters);
  return items.filter(i => fkeys.every(k => selectedFilters[k].some(o => i.filters[k].includes(o))));
};

const result = filterItems(items, selectedFilters);
console.log(result);

​

Answer 3

为此，您可以使用Array.filter()函数。这是一个非常简单而有效的解决方案。

Array.prototype.diff = function(arr2) {
    var ret = [];
    for(var i in this) {   
        if(arr2.indexOf(this[i]) > -1){
            ret.push(this[i]);
        }
    }
    return ret;
};

var filteredArr = items.filter(function (el) {
  return el.filters.color.diff(selectedFilters.color).length > 0 &&
         el.filters.type.diff(selectedFilters.type).length > 0 &&
         el.filters.size.diff(selectedFilters.size).length > 0
});

这里是工作示例.

https://playcode.io/325371?tabs=console&script.js&output

注意：您可以根据您的需求更改和/或条件。