在 if 条件中丢弃空值的最佳方法是什么 - JavaScript

Question

在为我的 React.js 应用程序编写过滤器功能时，我遇到了以下问题：

由于我有三种不同类型的过滤器（日期、校园和城市），因此我必须仅根据用户填写的过滤器（可以只有其中一个、两个或三个）向用户返回一组对象. 为了解决这个问题，我想出了这个解决方案：

    // Example of user input, something how my state variables should look
    const date = null
    const campus = "Example 1"
    const city = "City 1"
    //

    const array = [ { date: "2020-11-23", campus: "Example 1", city: "City 1" }, 
                    { date: "2020-11-24", campus: "Example 2", city: "City 2" }, ]

    const filteredArray = array.filter(e => {

        if (date && campus && city)
            return e.date === date && e.campus === campus && e.city === city;

        if (date && campus)
            return e.date === date && e.campus === campus;

        if (campus && city)
            return e.campus === campus && e.city === city;

        if (date && city)
            return e.date === date && e.city === city;

        if (date)
            return e.date === date;

        if (campus)
            return e.campus === campus;

        if (city) 
            return e.city === city;
    });

那么，有没有其他方法可以在返回过滤后的对象时丢弃空值，以便我可以减少代码的大小？

Answer 1

您可以将它们组合成一个语句：

const filteredArray = array.filter(e => 
    (!date || date === e.date) && (!campus || campus === e.campus) && (!city || city === e.city)
);

此外，您可以创建一个对象来动态检查所有条件，而无需再次重写每个属性：

const conditions = {
    date: null,   // you can also remove this line
    campus: 'Example 1',
    city: 'City 1'
};

const array = [
    { date: '2020-11-23', campus: 'Example 1', city: 'City 1' },
    { date: '2020-11-24', campus: 'Example 2', city: 'City 2' }
];

const filteredArray = array.filter(e => Object.entries(conditions).every(([key, value]) => !value || e[key] === value));

console.log(filteredArray);