javascript - 如何比较 2 个数组中的值以过滤掉元素
问题描述
我很难弄清楚这个问题。我有两个数组(cars
和active_filters
)。cars 数组包含带有诸如汽车类型、座位数、价格等属性的 html li 标签。active_filters 数组包含与用户交互的过滤器相关的对象,并将用于显示或隐藏哪些汽车。
示例:查看active filters
iddata-type
时, value 属性包括用户想要显示的所有汽车代码的列表。如果找不到汽车数据类型或等于这些汽车代码之一,我的目标是通过为每辆汽车添加类type
来隐藏这些汽车。所以在这种情况下,这些汽车应该增加等级filtered-out-by-car-type
。
我注意到我目前在下面的表现非常缓慢。另外,我一直坚持如何type
从与找到的汽车相关联的 active_filters 访问特定内容。感谢任何帮助!非常感谢!!
汽车:
<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); // ?
}
});
解决方案
你的要求对我来说并不完全清楚,但这个问题似乎是为基本数组操作量身定做的,所以也许我可以提供一个解决它的框架,你可以填写详细信息。
首先,似乎基本思想是将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;
});
});
});
此时,我们已将汽车数组减少为仅匹配过滤器的那些元素,但我们没有将类型添加到那些没有制作过滤器的汽车。为此,我们必须将第一个替换为some
aforEach
以确保我们循环遍历所有过滤器,而不是在第一个匹配时停止。我们还想根据需要添加或删除特殊类。
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;
});
就像我说的那样,我不确定该代码是否正是您想要的,因为我可能误解了这个问题。但希望这足以让你通过当前的路障。
推荐阅读
- javascript - 在 javascript 中动态填充对象数组的问题
- ios - 'AppDelegate' 仅适用于 iOS 13.0 或更高版本
- amazon-web-services - 有人可以使用硬编码的“AWS-cognito-identity-poolID”侵入我的 s3 吗?
- java - Android 总是在没有 PocketSphinx 的情况下进行启动指令检测
- reactjs - Eslint 道具缺少使用 Formik 的验证
- sql - 优化 SELECT 查询以处理大型数据库
- python - 出现错误 a.empty、a.bool()、a.item()、a.any() 或 a.all()
- javascript - 如何在量角器茉莉花中报告每个测试的执行时间?
- amazon-web-services - AWS Rekognition:是否有任何 API 可以从集合中删除或取消索引人脸
- apache-spark - pyspark 跳过了一些导入阶段,这个阶段应该处理新数据,不应该被跳过