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)了。