Array.prototype.filter - 是否可以使用多个条件过滤多个条件？ [JS, VueJS]

Question

I have the following method on VueJS 2.0/Nuxt Application:

applyFilters(filterCriteria) {
  this.filtered = this.unfiltered.slice().filter((x) => {
    // Zona
    if (x.zona !== filterCriteria.zona) {
      return false
    }

    // Bairro
    for (const key in filterCriteria.bairro) {
      if (x.bairro !== filterCriteria.bairro[key]) {
        return false
      }
    }

    // Categoria
    for (const key in filterCriteria.categoria) {
      if (x.categoria !== filterCriteria.categoria[key]) {
        return false
      }
    }
    return true
  })
},

What I am trying to achieve is somehow filter multiple conditions based also on multiple criteria. Is that achievable with .filter() ?

Whenever I apply the first criteria it works fine, and also when I apply the second it will work as well, but whenever I apply a second item to the second criteria, it just fails to filter and fallback to false everytime.

This works:

  filterCriteria: {
    zona: 'Germany',
    bairro: ['Berlin'],
    categoria: ['City']
  }

This won't:

  filterCriteria: {
    zona: 'Germany',
    bairro: ['Berlin', 'Munich'],
    categoria: ['City']
  }

Am I missing something or this won't work as expected?

Answer 1

You can use includes(). Array and String contains this method

applyFilters(filterCriteria) {
    this.filtered = this.unfiltered.slice().filter((x) => {
        // Zona
        if (x.zona !== filterCriteria.zona) {
           return false
        }

        // Bairro
        if (!filterCriteria.bairro.includes(x.bairro)) {
           return false
        }

        // Categoria
        if (!filterCriteria.categoria.includes(x.categoria)) {
           return false
        }

        return true
    })
},

Answer 2

The reason is

for (const key in filterCriteria.bairro) {
  if (x.bairro !== filterCriteria.bairro[key]) {
    return false
  }
}

you can't have one value equal to two different values.

That is, you can't have one value equal to 'Berlin' and then also equal to 'Munich' . So it will fail for sure. Looks like the third check is going to have the same issue.

You can use includes , or another way is

if (!filterCriteria.bairro.some(v => v === x.bairro))
  return false;

and just a note: if you have a large array, you can use a Set instead so that the checking is fast. It is like myCities.has(thisCity) and it is O(1) time.