如何使用多个文本字符串条件从数组中过滤掉多个对象

Question

我正在尝试编写一个测试，我有一个对象数组，看起来像这样：

menuOfProducts: [ 
  { text: 'Product One',
    selector: '#product-one #productone',
    path: 'productone' },
  { text: 'Product Two',
    selector: '#product-two #producttwo',
    path: 'shop/catalog/producttwo' },
  { text: 'Product Three',
    selector: '#product-three #productthree',
    path: 'shop/catalog/productthree' },
  { text: 'Product Four',
    selector: '#product-four #productfour',
    path: 'shop/catalog/productfour' },
  { text: 'Product Five',
    selector: '#product-five #productfive',
    path: 'shop/catalog/productfive' }
]

我想做的是过滤掉几个对象并返回其余对象。

到目前为止，我已经尝试使用.filter（）来过滤掉其中一个正常工作的对象。但是，可能需要按文本过滤掉多个产品。这就是我现在拥有的：

if (environment === 'test') {
  menuOfProducts = menuOfProducts.filter(function (option) {
    return option.text !== 'Product Two';
  });
}

并使用此过滤器，我得到正确的数组返回减去“产品二”：

[ 
  { text: 'Product One',
    selector: '#product-one #productone',
    path: 'productone' },
  { text: 'Product Three',
    selector: '#product-three #productthree',
    path: 'shop/catalog/productthree' },
  { text: 'Product Four',
    selector: '#product-four #productfour',
    path: 'shop/catalog/productfour' },
  { text: 'Product Five',
    selector: '#product-five #productfive',
    path: 'shop/catalog/productfive' }
]

但如上所述，我想现在通过文本过滤多个对象。并且想知道我该如何处理这个问题？我试过在过滤器中传递另一个条件，如下所示：

if (environment === 'test') {
  menuOfProducts = menuOfProducts.filter(function (option) {
    return option.text !== 'Product Two' || 'Product Three';
  });
}

但后来我得到了带有ALL对象返回的数组，没有任何东西被过滤掉。任何帮助都会受到极大的欢迎。提前谢谢了

Answer 1

您将获得返回的所有值，因为'Product Three'是truthy值

像这样使用Logical AND运算符：

if (environment === 'test') {
  menuOfProducts = menuOfProducts.filter(function (option) {
    return option.text !== 'Product Two' && option.text !== 'Product Three';
  });
}

如果option.text有多个filter，你可以创建这些值的数组并使用includes：

if (environment === 'test') {
  menuOfProducts = menuOfProducts.filter(function(option) {
    return !['Product Two', 'Product Three'].includes(option.text);
  });
}

Answer 2

你需要这样做：

if (environment === 'test') {
  menuOfProducts = menuOfProducts.filter(function (option) {
    return option.text !== 'Product Two' && option.text !== 'Product Three';
  });
}

Answer 3

您使用的逻辑运算符错误。您以一种真实的人可能理解的方式使用它，但必须以不同的方式对待计算机。

你的逻辑术语：option.text !== 'Product Two' || 'Product Three'; 我将此缩短为A !== B || C operator precedence使这相当于：(A !== B) || C 这意味着'A不等于B else C' 因此，如果A !== B为真，则整个项的值为true（因为true || anything总是true）。但是如果A !== B是假的，那么整个术语将被评估为V（因为false || anything总是anything）所以你要么得到true的值C，C就是'Product Three'值truthy。 最后你的整个学期option.text !== 'Product Two' || 'Product Three'将永远是真的，因此没有任何东西被过滤掉

你需要的是A !== B && A !== C，它被评估为像(A !== B) && (A !== C) 在这种情况下，该术语将只是真正的id option.text既不等于'Product Two'也不是'Product Three' 所以你的名词必须是option.text !== 'Product Two' && option.text !== 'Product Three'

console.clear()
menuOfProducts = [ 
  { text: 'Product One',
    selector: '#product-one #productone',
    path: 'productone' },
  { text: 'Product Two',
    selector: '#product-two #producttwo',
    path: 'shop/catalog/producttwo' },
  { text: 'Product Three',
    selector: '#product-three #productthree',
    path: 'shop/catalog/productthree' },
  { text: 'Product Four',
    selector: '#product-four #productfour',
    path: 'shop/catalog/productfour' },
  { text: 'Product Five',
    selector: '#product-five #productfive',
    path: 'shop/catalog/productfive' }
]

menuOfProducts = menuOfProducts.filter(function (option) {
  return option.text !== 'Product Two' &&  option.text !== 'Product Three';
});

console.log(menuOfProducts)

What is operator precedence

MDN文档说：

运算符优先级确定运算符相对于彼此进行解析的方式。优先级较高的运算符成为优先级较低的运算符的操作数。

这意味着我们有一个包含所有可能运算符的排序列表，并且在较低列之前解析此列表中较高的运算符。 我们可以使用括号[(和)]来表示这一点，它们是分组运算符并位于运算符优先级列表之上。

一个例子A = B + C 这就像A = (B + C)，因为Assignment运算符（单个=）优先级为3而Addition运算符（+）优先级为13，因此在=之前被解析

你的名词是A !== B || C。我们来看看优先级列表

| precedence | operator name     | operator |
| 10         | Strict Inequality |   !==    |
|  5         | Logical OR        |   ||     |

严格不等式运算符的优先级高于逻辑OR运算符。所以A !== B || C类似于(A !== B) || C所有运营商