Question

一位同事发挥了过滤功能，可以过滤掉杯中的咖啡。它过滤掉3种东西。强度，杯子大小和一天中的时刻。

目前，我只能同时进行三项工作之一。我似乎无法找出如何使它们全部起作用的方法。

这是使其中一个起作用的代码：

EventBus.$on('set-filter', (cupFilters) => {
  if (!cupFilters.intensities.length) {
    this.filteredOut = false;
    return;
  }
  this.filteredOut = !cupFilters.intensities.includes(this.cup.intensity);
});

我尝试添加矩矩过滤器，如下所示：

EventBus.$on('set-filter', (cupFilters) => {
  if (!cupFilters.intensities.length || !cupFilters.moments.length) {
    this.filteredOut = false;
    return;
  }
  this.filteredOut = !cupFilters.intensities.includes(this.cup.intensity);
  this.filteredOut = !cupFilters.moments.includes(this.cup. coffee_moment_id);
});

但是，只需要最后一个就可以了。

任何有关如何解决此问题的帮助将不胜感激。如果需要，我也可以提供过滤器代码本身，但这似乎可以正常工作。

谢谢。

Answer 1

类似的事情会起作用。虽然不确定逻辑（仅更改语法）

this.filteredOut =  (!cupFilters.intensities.length || !cupFilters.moments.length) 
    ? false
    : (!cupFilters.intensities.includes(this.cup.intensity) || !cupFilters.moments.includes(this.cup. coffee_moment_id)) ;

Answer 2

您未考虑任何先前的结果。布尔运算在这里有帮助。

让我们从您当前正在做的事情开始：

let toFilter;
if (a) {
  toFilter = false;
  return;
}

toFilter = b;
toFilter = c;

假设a = false, b = true, c = false，我假设您希望toFilter为true，因为其中一个条件是正确的。相反，发生的是我们看到toFilter是false。

要了解原因，您会看到代码不会返回，因为第一个条件是false并且if无法运行。然后将toFilter设置为true，因为第二个条件是true，但是随后忽略toFilter的先前值，并将其设置为false。 / p>

为避免这种情况，一种可能性是使所有代码看起来像第一种情况：

let toFilter;
if (a) {
  toFilter = false;
  return;
}

if (b) {
  toFilter = true;
  return;
}

if (c) {
  toFilter = true;
  return;
}

现在，显然有一些重复的代码，但是它可以工作。

我们可以使用布尔运算符将其缩短：

const toFilter = !a && (b || c);

请务必注意，布尔运算符会短路。对于x && y，这意味着如果x为false，则y甚至都不会被求值。对于x || y，如果x是true，则y不会被求值，这意味着您不会出错或进行额外的计算。

为您

toFilter = this.filteredOut;
a = !cupFilters.intensities.length || !cupFilters.moments.length;
b = !cupFilters.intensities.includes(this.cup.intensity);
c = !cupFilters.moments.includes(this.cup. coffee_moment_id);

请注意，!(!x || !y)与x && y是相同的，并且!x || !y与!(x && y)是相同的，您的代码可以放心地

const { intensities, moments } = cupFilters;
this.filteredOut = (intensities.length && moments.length)
  && !(intensities.includes(this.cup.intensity) && moments.includes(this.cup.coffee_moment_id));

可以使用任何布局随意重写它，让您更容易理解

如何在我的函数中使用多个过滤器

2 个答案: