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

【问题标题】：What is the best way to discard null values inside an if condition - JavaScript在 if 条件中丢弃空值的最佳方法是什么 - JavaScript
【发布时间】：2021-03-07 21:41:30
【问题描述】：

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

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

【问题讨论】：

标签： javascript arrays reactjs object filter

【解决方案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);

【讨论】：

【解决方案2】：

执行此操作的更好方法是单独和串联运行过滤器。

类似：

 function filter(array, date, campus, city) {
      let filteredByDate = filterBy(array, date, 'date')
      let filteredByCampus = filterBy(filteredByDate, campus, 'campus')
      let filteredByCity = filterBy(filteredByCampus, city, 'city')
    
      return filteredByCity
    }

然后单个过滤器将如下所示：

function filterBy(array, data, prop) {
  if(!date) return array
  else return array.filter(e => (e[prop] === data))
}

【讨论】：

Ramda.js 是一个很棒的库，如果你有一些函数式编程知识的话，也可以像这样的辅助函数。