使用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; }

不用说，没有嵌套数组的良好数据结构可以使开发更容易。