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

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' }
]

我想做的是过滤掉几个对象，return 剩下的。

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

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

并且使用这个过滤器我得到了正确的数组 returned 减去 "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';
  });
}

但随后我得到了包含所有对象的数组 return，但没有任何内容被过滤掉。任何帮助都会受到极大的欢迎。非常感谢

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 not equal to B else C'
因此，如果 A !== B 为真，则整个项的值为真（因为 true || anything 始终为 true）。但是，如果 A !== B 为假，则整个术语的计算结果为 V（因为 false || anything 始终为 anything）因此，您将获得 C 的值 true，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 文档说：

Operator precedence determines the way in which operators are parsed with respect to each other. Operators with higher precedence become the operands of operators with lower precedence.

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

一个例子A = B + C
这就像 A = (B + C)，因为赋值运算符（单个 =）的优先级为 3，加法运算符（+）的优先级为 13，因此在 =

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

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

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

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

How to filter out more than one object from an array using multiple text string condition

javascript

filtering

nightwatch.js

什么是运算符优先级