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其他C”
因此，如果A !== B为true，则整个项的值为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)

什么是运算符优先级

MDN文档说：

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

这意味着我们对所有可能的运算符进行了排序，并且列表中较高的运算符在较低的运算符之前进行了解析。
我们可以使用括号[(和)]对其进行可视化，它们是分组运算符，位于运算符优先级列表的顶部。

一个示例A = B + C
这类似于A = (B + C)，因为赋值运算符（单个=）的优先级为3，加法运算符（+）的优先级为13，因此在= < / p>

您的任期为A !== B || C。让我们看一下优先级列表

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

“严格不等式”运算符的优先级高于“逻辑或”运算符。所以A !== B || C与(A !== B) || C类似所有操作员

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

3 个答案:

什么是运算符优先级