JS滤波函数多重条件

Question

这可能是一个重复，但我似乎找不到一个堆叠的问题与我的确切问题。我在前端显示一个数据表，并允许用户通过多个可选变量进行筛选。因此，假设我的数据变量是这种格式的用户详细信息：

[
    {
        firstName = 'bob', 
        middleName = 'bruh', 
        lastName = 'bub'
    },
     .
     .
     .
    {
        firstName = 'sam', 
        middleName = 'marley', 
        lastName = 'jackson'
    }
]

现在我允许用户通过firstName、middleName和LastName进行过滤。但是他们也被允许只使用一个变量，或者这三个变量的任何一个组合来进行过滤。

我现在使用的天真方法是有7个if语句，根据用户输入筛选数组：

所以

let filterByFirstName = this.firstNameQuery !== null;
let filterByMiddleName = this.middleNameQuery !== null;
let filterByLastName = this.lastNameQuery !== null;

if(filterByFirstName && !filterByMiddleName && !filterByLastName)
//filter the array only by first name 

else if(filterByFirstName && filterByMiddleName && !filterByLastName)
// filter array by first and middle name 

.
.
.

else if(filterByFirstName && filterByMiddleName && filterByLastName) 
//filter array by first, middle and last name. 

所以在算法上，它足够有效，但不是为了代码的整洁，而是我将添加越来越多的变量来过滤。

我尝试过只创建一个过滤器语句，它将根据所提供的变量进行筛选，但我在编写它时遇到了困难。

let filterByFirstName = this.firstNameQuery !== null;
let filterByMiddleName = this.middleNameQuery !== null;
let filterByLastName = this.lastNameQuery !== null;

  this.displayArray = this.userArray.filter(
    user =>
      user.firstName === (filterByFirstName ? this.firstNameQuery : 'any String') &&
      user.middleName === (filterByMiddleName ? this.middleNameQuery : 'any String') &&
      user.lastName === (filterByLastName ? this.lastNameQuery : 'any String')
  );

因此，基本上我需要的是通配符或任何字符串的等效值，如果这是可能的话，就可以放入过滤器函数中。(预先谢谢:)

Answer 1

也许是这样：

​

let filters = {firstName: 'John', middleName: 'Foo', lastName: null}
let data = [{firstName: 'John', middleName: 'Foo', lastName: 'Doe'}]

console.log(data.filter((item) => {
  for (const [key, value] of Object.entries(filters)) {
    if (value) return item[key] === value
  }
}))

​