时间戳

首页 > 解决方案 > 在 if 条件中丢弃空值的最佳方法是什么 - JavaScript

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

问题描述

在为我的 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;
    });

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

标签： javascriptarraysreactjsobjectfilter

解决方案

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

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);

推荐阅读