在Javascript中按多个条件过滤数组

Posted 2023-03-10

【中文标题】在Javascript中按多个条件过滤数组

【英文标题】：Filtering array by multiple conditions in Javascript

【发布时间】：2020-08-05 19:31:00

【问题描述】：

我有一个对应于 html 元素的对象数组。这些是应该根据条件是否满足而出现/消失的卡片。我已将 HTMLCollection 转换为 javascript 数组，因此我可以在其上使用数组方法。

我还使用 HTML 选择标签来生成一个 javascript 对象以用作过滤器。我需要知道如何通过对象上的所有键/值对来过滤我的数组。现在我的代码只满足一个条件，最近的条件。

这是 HTML：

<label for="numProperties"></label>
<label for="location"></label>
<label for="retired"></label>

<select class="filter" id="numProperties" onchange="updateFilters(this.value)">
    <option value="none" selected disabled hidden>Choose Num Properties</option>
    <option value="all">All</option>
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

<select class="filter" id="location" onchange="updateFilters(this.value)">
    <option value="none" selected disabled hidden>Choose Location</option>
    <option value="all">All Locations</option>
    <option value="New York">New York</option>
    <option value="New Jersey">New Jersey</option>
    <option value="Connecticut">Connecticut</option>
</select>

<select class="filter" id="retired" onchange="updateFilters(this.value)">
    <option value="none" selected disabled hidden>Choose If Retired</option>
    <option value="true">Yes</option>
    <option value="false">No</option>
</select>

这是我的 javascript：

        function updateFilters(value) 
        var filters = document.getElementsByClassName('filter');
        var activeFilters = ;

        for (var i = filters.length - 1; i >= 0; i--) 
            if (filters[i].value != 'none' && filters[i].value != 'all') 
                activeFilters[filters[i].id] = filters[i].value;
            
        

            filterCards(activeFilters)
        

        function filterCards(activeFilters) 
        var test = allCards.filter(function (card) 
            for (var key in activeFilters) 
                if (card.attributes[key].value === activeFilters[key]) 
                   card.style.display = 'inline-block' 
                 else 
                   card.style.display = 'none'
                
            
        )
    

如您所见，我需要能够过滤任何/所有条件。在纽约拥有 2 处房产且已退休的人。现在我的过滤器只适用于最近的搜索。例如，如果我选择一个新位置，我的数组将显示该新位置中的所有内容，即使该数组中的对象具有不同数量的属性或不同的“已退休”布尔值。

【问题讨论】：

所以如果card匹配所有的过滤器，你设置display为'none'，否则'inline-block'？

对不起，我的错误，应该是相反的。我现在已经编辑了。

【参考方案1】：

当过滤器不匹配时，您需要在 for 循环中添加一个“中断”：

for (var key in activeFilters) 
  if (card.attributes[key].value === activeFilters[key]) 
    card.style.display = 'inline-block' 
   else 
    card.style.display = 'none'
    break; // stop filtering this card