如何使用多個文本字符串條件從數組中過濾出多個對象

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值

像這樣使用邏輯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'; option.text !== 'Product Two' || 'Product Three';
我把它縮短為A !== B || C A !== B || C
運算符優先級使其等於： (A !== B) || C (A !== B) || C
這就是“ A不等於B，其他C”
因此，如果A !== B為true，則整個項的值為true（因為true || anything始終為true ）。 但是，如果A !== B為假，則整個項將求值為V （因為false || anything始終是anything ），所以您將擁有C true值， C是字符串'Product Three' ，這是一個事實值。
最后，您的完整期限option.text !== 'Product Two' || 'Product Three' option.text !== 'Product Two' || 'Product Three'將永遠是正確的，因此不會濾除任何東西

您需要的是A !== B && A !== C ，其計算方式類似於(A !== B) && (A !== C)
在這種情況下，該術語將僅是true 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) ，因為賦值運算符（single = ）的優先級為3，加法運算符（ + ）的優先級為13，因此在=之前進行解析。

您的條件是A !== B || C A !== B || C 讓我們看一下優先級列表

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

嚴格不等式運算符的優先級高於邏輯或運算符。 所以A !== B || C A !== B || C類似於(A !== B) || C (A !== B) || C所有運營商