在相同的数据javascript上应用多个过滤器

Question

我从一个json文件中读取了一大堆数据。

我需要实现一些过滤器，这些过滤器将根据检查的过滤器返回正确的数据。

我使用的是react和redux，而studyData来自复选框或下拉列表。

过滤so过滤器的最好方法是什么，以便它们能很好地协同工作？

目前，它们单独工作，但当您将它们一起使用时，它们就会断开。

下面是我的代码：

function filterStudies(studyData){
  let searchTerm = studyData.searchTerm  === undefined  ? '' :  studyData.searchTerm;
  let studies = studyData.studies.filter((val)=> val.name.toUpperCase().includes(searchTerm.toUpperCase()));

  if(typeof(studyData.isLive) !== 'undefined'){
    studies = studyData.isLive ? studies.filter((val) => val.live === studyData.isLive) : studyData.studies;
  }
  if(typeof(studyData.isCompleted) !== 'undefined'){
    studies = studyData.isCompleted ? studies.filter((val) => val.completed === studyData.isCompleted) : studyData.studies;
  }
  if(typeof(studyData.media) !== 'undefined'){
    studies = studyData.media === 'All' ? studyData.studies : studies.filter((val) =>  val.media === studyData.media);
  }
  if(typeof(studyData.environment) !== 'undefined'){
    studies = studyData.media === 'All' ? studyData.studies : studies.filter((val) =>  val.environment === studyData.environment);
  }
  return studies;
}

Answer 1

我不确定我是不是很理解你。

但不管怎样，乍一看，我认为你的最后一个if应该是：

if(typeof(studyData.environment) !== 'undefined'){
    studies = studyData.environment === 'All' ? studyData.studies : studies.filter((val) =>  val.environment === studyData.environment);
}

而不是：

if(typeof(studyData.environment) !== 'undefined'){
    studies = studyData.media === 'All' ? studyData.studies : studies.filter((val) =>  val.environment === studyData.environment);
}

顺便说一句，我建议简化你的代码，依靠单一的过滤器来决定哪些项目应该保留，哪些项目应该被丢弃。

我只是举个例子(我不明白到底是什么，假装做你的代码，所以我的代码几乎不会做)，但我希望它可以作为一个例子：

function filterStudies(studyData){
    let searchTerm = studyData.searchTerm  === undefined  ? '' :  studyData.searchTerm;
    let studies = studyData.studies.filter(function(val) {
        if (val.name.toUpperCase().includes(searchTerm.toUpperCase())) return true;
        if (val.live === studyData.isLive) return true;
        if (val.completed === studyData.isCompleted) return true;
        if (studyData.media === 'All' || val.media === studyData.media) return true;
        if (studyData.environment === 'All' || val.environment === studyData.environment) return true;
        return false;
    });

    return studies;
}

注意:很明显，这些“if”可以组合成一个单独的“”(它们执行"or")。我试图提供一个尽可能接近您的原始代码的示例，但实际上，这种方式无论如何都会更具可读性...