javascript - 如何动态过滤对象？

Question

我有一个 Javascript 数组:

var peoples = [  
{'people':{'sex':'male', 'diet':'vegetarian','favPlaces':['place1','place2']}},  
{'people':{'sex':'female', 'diet':'flexitarian','favPlaces':['place2','place3']}},  
{'people':{'sex':'male', 'diet':'flexitarian', 'favPlaces':['place4','place1']}}  
];

如果我选择 {'sex':['female','male']} && {'diet':['flexitarian']} 输出应该是['place2', 'place3', 'place4', 'place1']。

我的代码的问题是，如果我只选择'sex'，它不会显示结果，但如果我同时选择'sex' 和' diet' 它会显示结果。我想不出如何使我的代码动态化，以便在我选择性别或饮食或性别和饮食时代码将动态过滤并显示结果。

这是我的代码:

 var filterObj = {'sex': ['female', 'male'], 'diet': ['flexitarian']};

    for(var p in peoples){  
       for(var s in filterObj.sex){  
          for(var d in filterObj.diet){
          if((filterObj.sex[s] == peoples[p].people.sex) && (filterObj.diet[d] == peoples[p].people.diet)){  
            console.log(peoples[p].people.favPlaces);
           }
       }  
    }  

这是 HTML:

<ul id="sex">
<li><label><input type="checkbox" value="male">Male</label></li>
<li><label><input type="checkbox" value="female">Female</label></li>
</ul>
<ul id="diet">
<li><label><input type="checkbox" value="none">None</label></li>
<li><label><input type="checkbox" value="flexitarian">Flexitarian</label></li>
<li><label><input type="checkbox" value="vegetarian">Vegetarian</label></li>
</ul>

Answer 1

您可以使用 Array.indexOf 并反转条件，例如...检查是否可以在条件内找到单个数据，但如果其中没有任何内容，也可以忽略过滤器(通过检查其长度)如下图...

var matchingSet = peoples.filter(function(p) {
    return (filterObj.sex.length === 0 || filterObj.sex.indexOf(p.people.sex) !== -1)     //peoples' sex must exists in the filter.sex or ignore it if filter not specified
    && (filterObj.diet.length === 0 || filterObj.diet.indexOf(p.people.diet) !== -1);     //and people's diet must exists in the filter.diet or ignore it if filter not specified
});

然后，使用 Array.map 从匹配集中提取 favPlaces。

var matchingPlaces = matchingSet.map(function(p) { return p.people.favPlaces; });

最后，使用 Underscore(比自己制作更容易，因为我认为目前还没有原生的 JavaScript Array 方法...来展平，从 favPlaces 数组中提取唯一值并对其进行排序(作为额外奖励):

var flatten = _.chain(matchingPlaces)
    .flatten()
    .uniq()
    .sortBy(function(p) { return p; })
    .value();

这将产生您正在寻找的结果。

["place1","place2","place3","place4"]

完整示例可在以下位置找到:http://jsfiddle.net/rdfyp5c9/2/

请注意，在示例中我删除了 diet 过滤器元素:

var filterObj = {
    'sex' : ['male'],
    'diet': []
};

它正在正确返回

["place1","place2","place4"]

结果。

您绝对可以在 matchingSet 赋值行细化过滤器，以检查 filterObj.sex 是否为真，如果它是数组等则只执行长度检查，但为了简单起见...这个特定的解决方案假设如果您不想在过滤器中使用饮食，则需要将空数组作为饮食传递...