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

您可以使用includes()。 Array 和 String 包含此方法

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)時間。