如何根据属性过滤对象数组？

472

我有以下JavaScript数组的房地产主页对象：

var json = {
    'homes': [{
            "home_id": "1",
            "price": "925",
            "sqft": "1100",
            "num_of_beds": "2",
            "num_of_baths": "2.0",
        }, {
            "home_id": "2",
            "price": "1425",
            "sqft": "1900",
            "num_of_beds": "4",
            "num_of_baths": "2.5",
        },
        // ... (more homes) ...     
    ]
}

var xmlhttp = eval('(' + json + ')');
homes = xmlhttp.homes;

我想做的是能够对对象执行过滤，以返回“家庭”对象的子集。

例如，我想根据能够过滤：price，sqft，num_of_beds，和num_of_baths。

我该如何在JavaScript中执行类似下面的伪代码的操作：

var newArray = homes.filter(
    price <= 1000 & 
    sqft >= 500 & 
    num_of_beds >=2 & 
    num_of_baths >= 2.5 );

注意，语法不必与上面完全相同。这只是一个例子。

javascript 
— 格里格
source
7
— Crescent Fresh
3
var json = { ... }JSON是用于数据交换的文本符号。（更多在这里。）如果要处理JavaScript源代码，而不要处理字符串，那么就不涉及JSON。
— TJ Crowder
1
不要使用eval。这通常是错误的做法，并且可能导致性能问题。我们只需要摆脱项目中的一堆东西，因为处理器被锁定了。
— SDH

Answers:

716

您可以使用以下Array.prototype.filter方法：

var newArray = homes.filter(function (el) {
  return el.price <= 1000 &&
         el.sqft >= 500 &&
         el.num_of_beds >=2 &&
         el.num_of_baths >= 2.5;
});

现场示例：

显示代码段

此方法是新ECMAScript 5th Edition标准的一部分，几乎可以在所有现代浏览器中找到。

对于IE，可以包括以下兼容性方法：

if (!Array.prototype.filter) {
  Array.prototype.filter = function(fun /*, thisp*/) {
    var len = this.length >>> 0;
    if (typeof fun != "function")
      throw new TypeError();

    var res = [];
    var thisp = arguments[1];
    for (var i = 0; i < len; i++) {
      if (i in this) {
        var val = this[i];
        if (fun.call(thisp, val, i, this))
          res.push(val);
      }
    }
    return res;
  };
}
— 内容管理系统
source
8
什么是/ *，thisp * /？
— JGreig 2010年
2
@JGreig：只是表明可以传递可选参数的注释，该参数未直接指定，因为ECMA标准精确地指出此方法应仅包含一个参数（Array.prototype.filter.length == 1;）。当使用第二个参数时，它将用作this回调函数中的值。
— CMS
1
@CMS，您确定此代码有效吗？这将返回一个空数组，即使我将价格设置为很高而将平方英尺/床/浴室设置为非常低时也是如此。您确定此代码有效吗？
— JGreig 2010年
2
@JGreig：是的，它可以工作，您应该检查您的条件，也许您可​​以在pastie.org或jsbin.com中发布更完整的JSON示例以及您要过滤的条件，所以我可以为您提供更好的帮助。
— CMS 2010年
2
@CMS如果答案中包含以下事实，那就是返回新数组，而不修改原始数组，这将是很好的。即使在提供的链接中说了这一点，我也发现答案不完全或不正确
— GWorking'Aug
26

我更喜欢Underscore框架。它建议了许多有用的对象操作。你的任务：

var newArray = homes.filter(
    price <= 1000 & 
    sqft >= 500 &
    num_of_beds >=2 & 
    num_of_baths >= 2.5);

可以像这样覆盖：

var newArray = _.filter (homes, function(home) {
    return home.price<=1000 && sqft>=500 && num_of_beds>=2 && num_of_baths>=2.5;
});

希望对您有用！

— 朱莉娅·凯撒（JuliaCesar）
source
下划线是如何工作的，它的确切含义是什么？
— John Demetriou 2015年
4
刚刚发现underscore-query（github.com/davidgtonge/underscore-query），它使用类似于MongoDB的语法查询javascript数组。因此，您将在这里使用_.query(homes, {price: {$lt:1000}, sqft: {$gte: 500}, num_of_beds: {$gte:2}, num_of_baths: {$gte: 2.5}}
— 原型
12

令我惊讶的是，没有人发表过一句回应：

const filteredHomes = json.homes.filter(x => x.price <= 1000 && x.sqft >= 500 && x.num_of_beds >=2 && x.num_of_baths >= 2.5);

...这样您就可以更轻松地阅读它：

const filteredHomes = json.homes.filter( x => 
  x.price <= 1000 && 
  x.sqft >= 500 && 
  x.num_of_beds >=2 && 
  x.num_of_baths >= 2.5
);
— 卢·百吉尔
source
2
可能是因为它与CMS的答案只是箭头功能相同
— Erich
7

从jQuery 1.0开始就可以使用jQuery.grep（）：

$.grep(homes, function (h) {
  return h.price <= 1000
    && h.sqft >= 500
    && h.num_of_beds >= 2
    && h.num_of_baths >= 2.5
});
— 山本彰
source
7

您可以很容易地做到这一点-可能有很多实现可以选择，但这是我的基本想法（并且可能有一些格式可以使用jQuery遍历对象，我现在无法想到）：

function filter(collection, predicate)
{
    var result = new Array();
    var length = collection.length;

    for(var j = 0; j < length; j++)
    {
        if(predicate(collection[j]) == true)
        {
             result.push(collection[j]);
        }
    }

    return result;
}

然后您可以像下面这样调用此函数：

filter(json, function(element)
{
    if(element.price <= 1000 && element.sqft >= 500 && element.num_of_beds > 2 && element.num_of_baths > 2.5)
        return true;

    return false;
});

这样，您可以根据定义的谓词调用过滤器，甚至可以使用较小的过滤器多次过滤。

— Tejs
source
请在第一段中将“ int length”更改为“ var length”
— 马来德赛
4

您可以自己实现满足您需要的过滤器方法，方法如下：

function myfilter(array, test){
    var passedTest =[];
    for (var i = 0; i < array.length; i++) {
       if(test( array[i]))
          passedTest.push(array[i]);
    }

    return passedTest;
}

var passedHomes = myfilter(homes,function(currentHome){
     return ((currentHome.price <= 1000 )&& (currentHome.sqft >= 500 )&&(currentHome.num_of_beds >=2 )&&(currentHome.num_of_baths >= 2.5));
});

希望能帮助到你！

— 用户名
source
我的谓词条件因各种onclicks而改变。我想如何存储当前谓词值并将其应用于myfilter函数？
— 马来德赛
3

您应该检出OGX.List，它具有内置的过滤方法并扩展了标准javascript数组（以及分组，排序和查找）。以下是过滤器支持的运算符列表：

'eq' //Equal to
'eqjson' //For deep objects, JSON comparison, equal to
'neq' //Not equal to
'in' //Contains
'nin' //Doesn't contain
'lt' //Lesser than
'lte' //Lesser or equal to
'gt' //Greater than
'gte' //Greater or equal to
'btw' //Between, expects value to be array [_from_, _to_]
'substr' //Substring mode, equal to, expects value to be array [_from_, _to_, _niddle_]
'regex' //Regex match

你可以这样使用

  let list = new OGX.List(your_array);
  list.addFilter('price', 'btw', 100, 500);
  list.addFilter('sqft', 'gte', 500);
  let filtered_list = list.filter();

甚至这样

  let list = new OGX.List(your_array);
  let filtered_list = list.get({price:{btw:[100,500]}, sqft:{gte:500}});

或作为一个班轮

   let filtered_list = new OGX.List(your_array).get({price:{btw:[100,500]}, sqft:{gte:500}});
— 埃里克
source
2

或者，您可以简单地使用$.each（它也适用于对象，不仅适用于数组），并像这样构建新的数组：

var json = {
    'homes': [{
            "home_id": "1",
            "price": "925",
            "sqft": "1100",
            "num_of_beds": "2",
            "num_of_baths": "2.0",
        }, {
            "home_id": "2",
            "price": "1425",
            "sqft": "1900",
            "num_of_beds": "4",
            "num_of_baths": "2.5",
        },
        // ... (more homes) ...     
        {
            "home_id": "3-will-be-matched",
            "price": "925",
            "sqft": "1000",
            "num_of_beds": "2",
            "num_of_baths": "2.5",
        },
    ]
}

var homes = [];
$.each(json.homes, function(){
    if (this.price <= 1000
        && this.sqft >= 500
        && this.num_of_beds >= 2
        && this.num_of_baths >= 2.5
    ) {
        homes.push(this);
    }
});
— 纽克斯
source
2

我使用我的ruleOut函数根据特定的不需要的属性值过滤对象。我知道在您的示例中，您想使用条件而不是值，但是我的答案对问题标题有效，因此我想在这里保留我的方法。

function ruleOut(arr, filterObj, applyAllFilters=true) {    
    return arr.filter( row => {            
        for (var field in filterObj) {
            var val = row[field];
            if (val) {                    
                if (applyAllFilters && filterObj[field].indexOf(val) > -1) return false;                
                else if (!applyAllFilters) {                        
                    return filterObj[field].filter(function(filterValue){ 
                        return (val.indexOf(filterValue)>-1);
                    }).length == 0;                 
                }
            }
        }
        return true;
    });
}

假设您有一个这样的演员列表：

let actors = [
  {userName:"Mary", job:"star", language:"Turkish"},
  {userName:"John", job:"actor", language:"Turkish"},
  {userName:"Takis", job:"star", language:"Greek"},
  {userName:"Joe", job:"star", language:"Turkish"},
  {userName:"Bill", job:"star", language:"Turkish"}
];

并且您想查找所有被评为好莱坞明星的演员，他们的国籍不应该是“英语”，“意大利语”，“西班牙人”，“希腊语”之一，而且他们的名字也不应该是“玛丽”之一， “乔”。Bizzar的例子，我知道！无论如何，使用这组条件，您将创建以下对象：

let unwantedFieldsFilter= { 
  userName: ['Mary', 'Joe'],    
  job: ['actor'],   
  language: ['English', 'Italian', 'Spanish', 'Greek']  
};

好吧，现在，如果您ruleOut(actors, unwantedFieldsFilter)只得到

[{userName：“ Bill”，工作：“ star”，语言：“ Turkish”}]

比尔是你的男人，因为他的名字不是'Mary'，'Joe'之一，所以他的国籍不包括在['English'，'Italian'，'Spanish'，'Greek']中，而且他是明星！

我的方法中有一个选项，即applyAllFilters默认情况下为true。如果您尝试将此参数设置为false的RuleOut，则将其用作“或”过滤，而不是“与”过滤。示例：ruleOut(actors, {job:["actor"], language:["Italian"]}, false)将为您提供所有不是演员或意大利语的人：

[{{用户名：“玛丽”，工作：“星””，语言：“土耳其语”}，
{用户名：“ Takis”，工作：“星”，语言：“希腊语”}，
{用户名：“乔”，工作： “ star”，语言：“土耳其语”}，
{用户名：“ Bill”，工作：“ star”，语言：“土耳其语”}]

— 潘
source
1 
var filterHome = homes.filter(home =>
  return (home.price <= 999 &&
         home.num_of_baths >= 2.5 &&
         home.num_of_beds >=2 &&
         home.sqft >= 998));
console.log(filterHome);

您可以使用此lambda函数。在这里可以找到更多详细信息，因为我们将根据您具有返回true或false的条件来过滤数据，并且它将以不同的数组收集数据，因此不会修改您的实际数组。

@JGreig请调查一下。

— 哈迪克·贝拉迪亚
source
1 
const x = JSON.stringify(data);
const y = 'search text';

const data = x.filter(res => {
        return(JSON.stringify(res).toLocaleLowerCase()).match(x.toLocaleLowerCase());
      });
— ThứcTrần
source
0 
const state.contactList = [{
    name: 'jane',
    email: 'jane@gmail.com'
  },{},{},...]

const fileredArray = state.contactsList.filter((contactItem) => {
  const regex = new RegExp(`${action.payload}`, 'gi');
  return contactItem.nameProperty.match(regex) || 
    contactItem.emailProperty.match(regex);
});


// contactList: all the contacts stored in state
// action.payload: whatever typed in search field
— anoNewb
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.