如何通过检查多个值来过滤数组/对象

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.

我正在尝试使用数组来理解它们，因为我最近经常使用它们。我得到了这样的情况:我想搜索一个数组，并将它的元素值与另一个数组进行比较，该数组包含一些选定过滤器的值。

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

例如，如果我选择3个过滤器，我希望稍后在新的数组中写入匹配项——只有那些匹配所有3个过滤器的。

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

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

Code is:

代码是:

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));

I also tried with

我也试过用

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

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

但是它只匹配第一个过滤器，并且只有在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?

我尝试过很多不同的解决方案，但都没能成功。我应该使用什么函数来返回所需的结果?

3 个解决方案

#1

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

可以使用数组对象的.filter()方法:

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/

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.

一些老的浏览器，如IE8不支持。filter()方法的数组对象，如果你使用jQuery你可以使用。filter()方法jQuery对象。

jQuery version:

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;
});

#2

I think you need Array.prototype.filter

我觉得你需要Array.prototype.filter。

#3

You can use .filter() with boolean operators ie &&:

可以使用.filter()和布尔运算符ie &&:

 var find = my_array.filter(function(result) {
       return result.param1 === "srting1" && result.param2 === 'string2';
       });
    return find[0];
 }

#1