JavaScript之ES6的filter()方法动态选择筛选条件

博主今天在实战中遇到了列表根据多个输入选择框内容筛选显示的需求，如图所示：

由于博主最近在学习ES6的相关知识，所以第一时间想到了filter()方法。因为filter()方法不会改变原始数组，而是创建一个新的数组，所以只需请求一次数据，在前端判断哪些数组项需要显示即可。
但是由于这里有三个输入选择框，可以有内容也可以无内容，也可以只填充其中的某1个或某2个框，所以filter()方法的筛选条件应该是动态的，话不多说，上代码：

//点击查询触发方法
filterAutomobile() {
  //获取三个选择输入框的内容字符串
  let filtersName = this.filters.name.trim();
  let filtersBrand = this.filters.brand.trim();
  let filtersCategory = this.filters.category.trim();
  //筛选原始数组并赋值给filtersAutomobile数组
  let filtersAutomobile = this.automobileInfs.filter(item => {
    //定义筛选条件，默认为true，这样就可以让不符合动态选择条件时不影响筛选条件
    var isFiltersName = true;
    var isFiltersBrand = true;
    var isFiltersCategory = true;
    //符合动态选择条件就给筛选条件赋值
    if (filtersName.length != 0) {
      isFiltersName = item.name.indexOf(filtersName) != -1;
    }
    if (filtersBrand.length != 0) {
      isFiltersBrand = item.brand == filtersBrand;
    }
    if (filtersCategory.length != 0) {
      isFiltersCategory = item.category == filtersCategory;
    }
    //返回筛选条件
    return isFiltersName && isFiltersBrand && isFiltersCategory;
  });
  //把筛选后的数组赋值给列表显示数组
  this.filterAutomobileInfs = filtersAutomobile;
}

这样就实现了filter()方法的动态选择筛选条件，希望这篇文章可以帮到遇到此需求的小伙伴，大家一起加油吧！！！