使用Javascript比较（过滤）动态数组中的多个数组值

Posted 2023-05-09

【中文标题】使用Javascript比较（过滤）动态数组中的多个数组值

【英文标题】：Compare(filter) multiple array values from a dynamic array using Javascript

【发布时间】：2018-07-25 04:13:51

【问题描述】：

我喜欢从另一个数组中过滤掉静态数组值，该数组的值在单击时会动态变化，并基于该数组创建新的临时数组。如果不做一堆我不想做的 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 数组是我改变值的动态数组。基本上，当我单击例如过滤器类型-> 无气时，它会从我的第一个临时数组返回最后一个值，并从中创建另一个临时数组，其中只有一个项目。下面是我的第二个临时数组

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

我遇到的问题是当我单击不同的过滤器（例如材料）并选择 LDPE 时。它不仅过滤掉我在第二个临时数组中拥有的一项，还过滤掉所有 2 个具有 Tube 的“productCat”值的项目，然后返回 2 个项目，因为两者都具有 LDPE 的“productMaterial”值。

【问题讨论】：

我也希望其他人为我做很多事情，但 Stack Overflow 不是免费的编码写作服务。自己想出一个算法。

你应该看看Array函数。您可以使用filter 和includes 的组合来实现您想要的。

为什么不对某些属性使用单个对象而不是多个数组？如果你想保持结构，值的数组是否总是以相同的顺序和给定的？

@NinaScholz 我已经修改了我的问题，也许你可以帮我解决我最后一个我无法弄清楚的问题。

【参考方案1】：

为了更快的访问并且没有太多的嵌套迭代，如果找到', '，我建议使用拆分值构建一个对象，因为我不会依赖顺序并且所有属性都是以完全相同的顺序给出产品或过滤器。

然后您可以通过检查 all 给定的过滤器值与产品的单个值来过滤数组。

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; 

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