如何从构建组中过滤数组

Question

我正在构建一个 angular 应用程序，其中有一个用户列表和一个带有输入的表单，它们正在过滤列表。 我订阅了表单组，当值改变时，我调用一个过滤函数来检查哪些输入是活动的，然后相应地过滤数组，但我认为这不是最佳方式，因为现在我只使用两个过滤器我已经在检查 4 个条件，我希望表单有 5-6 个过滤器，然后函数会更长。 无论如何，这是我的功能，有人可以告诉我如何在没有多个条件的情况下使其工作吗？

_filter(formData:{nameSearch:any, gameSearch:string}): void{
//here I am just declaring some variables
let nameStr = "";
let game = formData.gameSearch.toLocaleLowerCase();   
let name = formData.nameSearch;
  if(typeof name === 'object'){
   nameStr = name.nickName.toLowerCase();
  }else{
   nameStr = name;
  }  

  if(nameStr.length !== 0 && game.length !== 0){ 
    this.filteredArr = this.usersArr.filter(user => {
      return (user.nickName).toLowerCase().includes(nameStr) && user[game] == true;
    })
  }
  if(nameStr.length !==0 && game.length === 0){
          this.filteredArr = this.usersArr.filter(user => {
            return (user.nickName).toLowerCase().includes(nameStr);
          })
    }
  if(nameStr.length === 0 && game.length !== 0 ){ 
    this.filteredArr = this.usersArr.filter(user => {
      return (user.nickName).toLowerCase().includes(nameStr) && user[game] == true;
    })
  }
  if(nameStr.length == 0 && game.length == 0){ 
    console.log('3');
     this.filteredArr = this.usersArr
  }

}

Answer 1

nameStr.length检查是多余的，因为当搜索任何字符串以查找空字符串时， .includes将为true 。

game.length和user[game]可以通过检查game.length存在于过滤器回调中来简化，而不是创建一个单独的.filter 。

this.filteredArr = this.usersArr
    .filter(user =>
        user.nickName.toLowerCase().includes(nameStr) &&
        (!game.length || user[game])
    );