如何通过检查多个值来过滤数组/对象 [英] How to filter an array/object by checking multiple values

问题描述

我正在尝试使用数组来更深入地理解它们，因为我最近经常使用它们.我遇到了这种情况，我想搜索一个数组并将其元素值与另一个包含某些选定过滤器值的数组进行比较.

I'm playing around with arrays trying to understand them more since I tend to work with them alot lately. I got this case where I want to search an array and compare it's element values to another array which contains values of some selected filters.

例如，如果我选择 3 个过滤器，我想稍后在新数组中写入匹配项 - 仅匹配所有 3 个过滤器的那些.

For example if I select 3 filters, I want later to write matches in new array - only those which match all 3 filters.

为了更容易理解，我在 http://jsfiddle.net/easwee/x8U4v/上设置了一个示例36/

For easier understanding I set up an example on http://jsfiddle.net/easwee/x8U4v/36/

代码是:

var workItems =   [
    { "id": 2616, "category": ".category-copy .category-beauty .category-fashion"}, //this is a match
    { "id": 1505, "category": ".category-beauty"}, // NOT
    { "id": 1500, "category": ".category-beauty .category-fashion"}, // NOT
    { "id": 692, "category": ".category-stills .category-retouching"}, // NOT
    { "id": 593, "category": ".category-beauty .category-capture .category-fashion .category-product .category-stills .category-stills-retouching "}, // NOT
    { "id": 636, "category": ".category-beauty .category-copy .category-fashion"}, //this is a match
    { "id": 547, "category": ".category-fashion .category-lifestyle .category-stills .category-stills-retouching "}, // NOT
    { "id": 588, "category": ".category-capture .category-recent-work .category-copy .category-beauty .category-fashion"} //this is a match
];

var filtersArray = [".category-beauty", ".category-fashion", ".category-copy"];

var i;
for (i = 0; i < filtersArray.length; ++i) {
    var searchString = filtersArray[i];
    console.log('Searching for: ' + searchString);
    var filtered = $(workItems).filter(function(){
        return this.category.indexOf(searchString);
    });    
}   
console.log('Filtered results: ' + JSON.stringify(filtered, null, 4));

我也试过

filtered = $.grep(workItems, function(element, index){
    return element.category.indexOf(filtersArray[i]); 
}, true);

但它仅匹配第一个过滤器，并且仅当它位于 workItems.category

but it matches only the first filter and only if it's at the begining of workItems.category

我尝试了许多不同的解决方案，但无法真正做到这一点.我应该使用什么函数来返回所需的结果?

I've tried many different solutions but can't really make this work. What function should I use to return the desired result?

推荐答案

你可以使用Array对象的.filter()方法:

You can use .filter() method of the Array object:

var filtered = workItems.filter(function(element) {
   // Create an array using `.split()` method
   var cats = element.category.split(' ');

   // Filter the returned array based on specified filters
   // If the length of the returned filtered array is equal to
   // length of the filters array the element should be returned  
   return cats.filter(function(cat) {
       return filtersArray.indexOf(cat) > -1;
   }).length === filtersArray.length;
});

http://jsfiddle.net/6RBnB/

一些旧浏览器如IE8不支持Array对象的.filter()方法，如果你使用jQuery你可以使用.filter() jQuery 对象的方法.

Some old browsers like IE8 doesn't support .filter() method of the Array object, if you are using jQuery you can use .filter() method of jQuery object.

jQuery 版本:

var filtered = $(workItems).filter(function(i, element) {
   var cats = element.category.split(' ');

    return $(cats).filter(function(_, cat) {
       return $.inArray(cat, filtersArray) > -1;
    }).length === filtersArray.length;
});

这篇关于如何通过检查多个值来过滤数组/对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！