使用Javascript比較（過濾）動態數組中的多個數組值

Question

我喜歡從另一個數組中過濾掉靜態數組值，這些值在單擊時動態變化，並基於創建新的臨時數組。 我不知道如何在不做一堆我不想做的 if 語句或 switch 語句的情況下做到這一點。 我相信有更有效的方法來做到這一點。

例如我得到了這個靜態數組：

0:[
    ['productFilters',
        ['productCat', 'Bottle'],
        ['productType', 'Double wall airless pump'],
        ['productMaterial', 'PP'],
        ['productSizesMl', '10, 15, 60'],
        ['productSizesOz', '0.12, 0.18, 0.32']
    ]
],
1:[
    ['productFilters',
        ['productCat', 'Tube'],
        ['productType', 'Round Tube'],
        ['productMaterial', 'LDPE'],
        ['productSizesMl', '105, 260'],
        ['productSizesOz', '0.55, 12.17']
    ]
],
2:[
    ['productFilters',
        ['productCat', 'Tube'],
        ['productType', 'Airless'],
        ['productMaterial', 'LDPE, PP'],
        ['productSizesMl', '60, 70'],
        ['productSizesOz', '0.32, 0.38']
    ]
]

然后我們得到了這個動態數組，它的值可以在點擊時改變，甚至可以為空。

[               
    ['productCat', 'Tube'], 
    ['productType', 'Airless'], 
    ['productMaterial', 'PP'], 
    ['productSizesMl', '60'],
    ['productSizesOz', '0.32']
];

基於這些示例，我想比較兩個數組並將它們過濾掉。 在這一點上，我只會在過濾后取回第二個數組，因為基本上動態數組中的所有值都匹配，即使靜態數組具有例如“productSizesMl”這樣的多個值，它仍然會找到“60”。 然后從中創建一個新的臨時數組。

我創建了 2 個數組，一個用於過濾 ProductCat，因此如果您單擊 Tube，則只有兩個項目（1,2）將從我的靜態數組返回到我的新臨時數組中。 哪個工作正常。

我的第一個循環：

for ( p=0; p < newResults.length; p++ ) {
    if (newResults[p][0][1] == thisCat) {
      tempProArray[p] = newResults[p];
  }
}

然后我有另一個數組，以進一步過濾掉我的新臨時數組，如果單擊，它適用於第二個過濾器。

第二個臨時數組：

for ( f=0; f < tempProArray.length; f++ ) {
  newResult = tempProArray[f][1];
  for ( k=0; k < newResult[k].length; k++ ) {
      if (filterArray[k][1] !== 'none') {
        if (newResult[k][1].indexOf(filterArray[k][1]) > -1) {
          tempFilterArray[f] = tempProArray[f];
        }
      }
  } 
}

filterArray 數組是我更改值的動態數組。 基本上，當我單擊例如過濾器類型-> Airless 時，它會從我的第一個臨時數組返回最后一個值，並從中創建另一個臨時數組，其中只有一個項目。 下面是我的第二個臨時數組

0:[
    ['productFilters',
        ['productCat', 'Tube'],
        ['productType', 'Airless'],
        ['productMaterial', 'LDPE, PP'],
        ['productSizesMl', '60, 70'],
        ['productSizesOz', '0.32, 0.38']
    ]
]

我遇到的問題是當我單擊不同的過濾器（例如材料）並選擇 LDPE 時。 它不是只過濾掉我在第二個臨時數組中擁有的一項，而是遍歷並過濾掉所有 2 個具有 Tube 'productCat' 值的項目，然后返回 2 個項目，因為它們都具有 LDPE 的 'productMaterial' 值。

Answer 1

為了更快地訪問並且沒有太多的嵌套迭代，我建議構建一個帶有拆分值的對象，如果找到一個', ' ，因為我不會依賴順序，並且所有屬性都由一個產品或過濾器中的順序完全相同。

然后，您可以通過根據產品的單個值檢查所有給定的過濾器值來過濾數組。

 var data = [[['productFilters', ['productCat', 'Bottle'], ['productType', 'Double wall airless pump'], ['productMaterial', 'PP'], ['productSizesMl', '10, 15, 60'], ['productSizesOz', '0.12, 0.18, 0.32']]], [['productFilters', ['productCat', 'Tube'], ['productType', 'Round Tube'], ['productMaterial', 'LDPE'], ['productSizesMl', '105, 260'], ['productSizesOz', '0.55, 12.17']]], [['productFilters', ['productCat', 'Tube'], ['productType', 'Airless'], ['productMaterial', 'LDPE, PP'], ['productSizesMl', '60, 70'], ['productSizesOz', '0.32, 0.38']]]], filters = [['productCat', 'Tube'], ['productType', 'Airless'], ['productMaterial', 'PP'], ['productSizesMl', '60'], ['productSizesOz', '0.32']], result = data.filter(([p]) => { var product = Object.create(null); p.slice(1).forEach(([key, value]) => product[key] = value.split(', ')); return filters.every(([key, value]) => product[key].includes(value)); }); console.log(result);

 .as-console-wrapper { max-height: 100% !important; top: 0; }

不用說，沒有嵌套數組的良好數據結構可以使開發更容易。