javascript - 根据多个复选框条件过滤数组

Question

我正在构建一个房地产 网站，用户可以在其中应用过滤器。我想要的过滤器之一是该属性(property)是否有阳台、屋顶露台和花园。

因此，当我只选中一个复选框(阳台)时，我想显示所有带阳台的属性。但是当我选中两个复选框(例如花园和阳台)时，我只想渲染具有这些特定品质的属性，它们既有花园又有阳台。

我有一个相当复杂且难以维护的解决方案。目前我只有 3 个复选框，但如果再添加 5 个怎么办？代码将变得非常低效，一切都必须重新编码。

这是我的“复杂”解决方案:

var filters = {
 balcony: false,
 garden: false,
 roofTerrace: false
};

const checkboxFilter = plotAreaFilter.filter((item) => {
    // If only Balcony is checked
    if (filters.balcony && !filters.roofTerrace & !filters.garden) {
        if (item.balcony) {
            return true
        }
    }
    // If both Balcony and Roof Terrace is checked
    else if (filters.balcony && filters.roofTerrace & !filters.garden) {
        if (item.balcony && item.roofTerrace) {
            return true
        }
    }
    // If all three Balcony, Roof Terrace and Garden is checked
    else if (filters.balcony && filters.roofTerrace & filters.garden) {
        if (item.balcony && item.roofTerrace && item.garden) {
            return true
        }
    }
    // If only Roof Terrace is checked 
    else if (!filters.balcony && filters.roofTerrace & !filters.garden) {
        if (item.roofTerrace) {
            return true
        }
    }
    // If only Garden is checked
    else if (!filters.balcony && !filters.roofTerrace & filters.garden) {
        if (item.garden) {
            return true
        }
    }

    // If both Roof Terrace and Garden is checked
    else if (!filters.balcony && filters.roofTerrace & filters.garden) {
        if (item.roofTerrace && item.garden) {
            return true
        }
    }

    // If only Balcony and Garden is checked 
    else if (filters.balcony && !filters.roofTerrace & filters.garden) {
        if (item.balcony && item.garden) {
            return true
        }
    } else {
        return true
    }
})
return checkboxFilter;

我真的希望有更好的解决方案

Answer 1

您可以获取条目并根据给定值检查所有条目。

var filters = { balcony: false, garden: true, roofTerrace: true },
    wanted = Object.entries(filters), // [['balcony', false], ['garden', true], ['roofTerrace', true]]
    checkboxFilter = plotAreaFilter.filter(item => wanted.every(([k, v]) => item[k] === v));