如何比较 2 个数组中的值以过滤掉元素

Posted 2023-05-09

【中文标题】如何比较 2 个数组中的值以过滤掉元素

【英文标题】：How to Compare Values from 2 Arrays to Filter Out Elements

【发布时间】：2018-10-16 15:34:18

【问题描述】：

我很难解决这个问题。我有两个数组（cars 和 active_filters）。 cars 数组包含带有诸如汽车类型、座位数、价格等属性的 html li 标签。active_filters 数组包含与用户交互的过滤器相关的对象，并将用于显示或隐藏哪些汽车。

示例：当查看active filters 以获取 id data-type 时，value 属性包括用户想要显示的所有汽车代码的列表。如果未找到汽车数据类型或等于这些汽车代码之一，我的目标是通过向每辆汽车添加类 type 来隐藏这些汽车。所以在这种情况下，这些汽车应该添加 filtered-out-by-car-type 类。

我注意到我目前在下面的性能非常缓慢。另外，我一直不知道如何从与找到的汽车相关联的 active_filters 访问特定的type。感谢任何帮助！非常感谢！！

汽车：

<li data-partner-code="EZ" data-type="XXAR" data-seats="2" data-bags="2" data-prepaid="Y" data-transmission="Automatic" data-unlimited-miles="Y" data-price="84.81" class="listing">
<li data-partner-code="AV" data-type="SFAR" data-seats="4" data-bags="2" data-prepaid="N" data-transmission="Automatic" data-unlimited-miles="Y" data-price="125.54" class="listing">
<li data-partner-code="BU" data-type="CCAR" data-seats="4" data-bags="2" data-prepaid="N" data-transmission="Automatic" data-unlimited-miles="N" data-price="65.42" class="listing">
<li data-partner-code="BU" data-type="CCAR" data-seats="4" data-bags="2" data-prepaid="N" data-transmission="Automatic" data-unlimited-miles="N" data-price="65.42" class="listing">
<li data-partner-code="FX" data-type="MCAR" data-seats="2" data-bags="1" data-prepaid="N" data-transmission="Automatic" data-unlimited-miles="N" data-price="32.00" class="listing">

有源过滤器：

id: "data-seats", value: "1", type: "filtered-out-by-seats"
id: "data-bags", value: "2", type: "filtered-out-by-bags"
id: "data-partner-code", value: "ET,EY,BU", type: "filtered-out-by-company"
id: "data-type", value: "IFAR,SFAR,PGAR,RFAR,FFAR,XXAR", type: "filtered-out-by-car-type"

当前代码：

cars.forEach(function(car)

    var found = active_filters.find(function(filter) 
        var filter_value = filter.value.split(","); // getting unique value
        for (var i=0; i<filter_value.length; i++)
        
            if (car.attr(filter.id) === filter_value[i])
            
                return car; // Why is this returning active_filters element instead of car?
            
        
    );

    // Todo: How can I access active_filters.type associated to the car that was found?
    if (!found)
    
        car.addClass(active_filters.type); // ?
    
);

【参考方案1】：

您的要求对我来说并不完全清楚，但这个问题似乎是为基本数组操作量身定制的，所以也许我可以提供一个解决它的框架，您可以填写详细信息。

首先，似乎基本思想是将cars数组过滤到一个子集。事实证明，有一个 Array 方法只用于调用，自然而然地，filter

const filtered_cars = cars.filter(car => 
    // This function will get passed each car in turn. Return
    // true if the car should be kept in the list, false otherwise.
);

现在，对于每辆车，我认为您要检查所有活动过滤器。如果任何有源过滤器匹配，则应保留汽车。同样，还有一个 Array 方法，在本例中为 some。

const filtered_cars = cars.filter(car => 
    return active_filters.some(filter => 
        // Within this function, we have a car variable, and a filter
        // variable. We want to return true if the car matches the
        // filter, false otherwise
    );
);

从您的描述中可以看出，每个有源过滤器可能有多个 值，以逗号分隔。我们需要将它们提取到一个数组中。我们还可以为过滤器提取适当的汽车属性。

const filtered_cars = cars.filter(car => 
    return active_filters.some(filter => 
        const values = filter.value.split(",");
        const attribute = car.getAttribute(filter.id);
        // Return true if the attribute is in the set of values
    );
);

我们又可以使用some

const filtered_cars = cars.filter(car => 
    return active_filters.some(filter => 
        const values = filter.value.split(",");
        const attribute = car.getAttribute(filter.id);
        return values.some(value => 
            return value === attribute;
        );
    );
);

此时，我们已将 cars 数组减少为仅匹配过滤器的那些元素，但我们尚未将类型添加到那些未创建过滤器的汽车。为此，我们必须用forEach 替换第一个some，以确保我们循环遍历所有过滤器，而不是在第一个匹配时停止。我们还想根据需要添加或删除特殊类。

const filtered_cars = cars.filter(car => 
    let keep_car = false;
    active_filters.forEach(filter => 
        const values = filter.value.split(",");
        const attribute = car.getAttribute(filter.id);
        const matched = values.some(value => 
            return value === attribute;
        );
        car.classList.toggle(filter.type, !matched);
        keep_car = keep_car || matched;
    );
    return keep_car;
);

就像我说的那样，我不确定该代码是否正是您想要的，因为我可能误解了这个问题。但希望它足以让您克服当前的障碍。

【讨论】：

嗨，斯蒂芬。哇！非常感谢，这太棒了！快速提问：我注意到所有过滤器 ID 都正常工作，除了数据座位和数据袋。如果 data-seats 值为 10，并且我想为所有小于 10 的汽车添加类 filter.type，我将在哪里进行更改？我认为这是匹配的

我知道了prntscr.com/jekgak :) 非常感谢!!!!!!!