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

您可以使用include（）。数组和字符串包含此方法]

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)时间。

Answer 3

您可以使用array.some()测试以下条件之一是否成立。如果将其与array.some()结合使用，则可以针对多个条件进行测试。

所以这个：

includes()

如果数组中的x.bairro.some(bairro => filterCriteria.bairro.includes(bairro)) bairro包含在过滤器中的数组中，则将返回true。由于所有这些测试都返回true或false，并且您要匹配所有这些测试，因此只需将其与some堆叠即可。

例如：

&&