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

Question

我在 VueJS 2.0/Nuxt 应用程序上有以下方法：

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
  })
},

我想要实现的是以某种方式也基于多个条件过滤多个条件。 .filter() 可以实现吗？

每当我应用第一个标准时，它都可以正常工作，并且当我应用第二个标准时，它也可以正常工作，但是每当我将第二个项目应用于第二个标准时，它每次都无法过滤并回退到 false .

这行得通：

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

这不会：

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

是我遗漏了什么还是无法按预期工作？

Answer 1

您可以使用包含()。数组和字符串包含这个方法

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

原因是

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

一个值不能等于两个不同的值。

也就是说，你不能有一个值等于'Berlin'，然后也等于'Munich'。所以它肯定会失败。看起来第三次检查也会有同样的问题。

你可以使用includes，或者其他方式是

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

请注意：如果您有一个大数组，您可以使用Set 来代替，以便快速检查。就像myCities.has(thisCity) 是O(1) 时间。