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

【问题标题】：How to filter object array based on attributes?如何根据属性过滤对象数组？
【发布时间】：2021-04-15 14:50:47
【问题描述】：

我有以下房地产住宅对象的 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 );

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

【问题讨论】：

这似乎与stackoverflow.com/questions/1694717/…几乎相同
var json = { ... } JSON 是一种用于数据交换的文本表示法。 (More here.) 如果您正在处理 JavaScript 源代码，而不是处理 字符串，那么您就不是在处理 JSON。
不要使用 eval。这通常是不好的做法，可能会导致性能问题。由于处理器被锁定，我们只需要摆脱项目中的一堆。

标签： javascript

【解决方案1】：

您可以使用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;
});

现场示例：

var obj = {
    '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) ...     
    ]
};
// (Note that because `price` and such are given as strings in your object,
// the below relies on the fact that <= and >= with a string and number
// will coerce the string to a number before comparing.)
var newArray = obj.homes.filter(function (el) {
  return el.price <= 1000 &&
         el.sqft >= 500 &&
         el.num_of_beds >= 2 &&
         el.num_of_baths >= 1.5; // Changed this so a home would match
});
console.log(newArray);

此方法是新 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;
  };
}

【讨论】：

@JGreig: 只是一个注释，表示可以传递一个可选参数，没有直接指定参数，因为 ECMA 标准准确地说这个方法应该只需要一个参数 (Array.prototype.filter.length == 1;) .当您使用第二个参数时，它将被用作回调函数内部的this 值。
@CMS，您确定此代码有效吗？这将返回一个空数组，即使我将价格设置得非常高并且平方英尺/床/浴室非常低。你确定这段代码有效吗？
@JGreig：是的，它有效，您应该检查您的标准，也许您可以在pastie.org 或jsbin.com 中发布更完整的 JSON 示例以及您用于过滤的标准，所以我可以更好地帮助你。
@CMS，我已经用实时网站更新了我的原始帖子。如果您可以查看代码，那就太好了。我真的，真的很感激。提前致谢
@CMS 如果答案包括返回一个新数组而不修改原始数组这一事实，那就太好了。即使在提供的链接中说了这一点，我发现没有这个的答案是不完整或不准确的

【解决方案2】：

我很惊讶没有人发布一条回复：

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

【讨论】：

可能是因为它和CMS's answer一样只是箭头函数

【解决方案3】：

您可以尝试使用 jLinq 之类的框架 - 以下是使用 jLinq 的代码示例

var results = jLinq.from(data.users)
.startsWith("first", "a")
.orEndsWith("y")
.orderBy("admin", "age")
.select();

更多信息可以点击链接http://www.hugoware.net/projects/jlinq

【讨论】：

【解决方案4】：

我更喜欢 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;
});

希望对你有用！

【讨论】：

这个下划线是如何工作的，它到底是什么意思？
刚刚发现 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}}

【解决方案5】：

这是使用 jquery MAP 函数在 IE8 中正常工作的工作小提琴

http://jsfiddle.net/533135/Cj4j7/

json.HOMES = $.map(json.HOMES, function(val, key) {
    if (Number(val.price) <= 1000
            && Number(val.sqft) >= 500
            && Number(val.num_of_beds) >=2
            && Number(val.num_of_baths ) >= 2.5)
        return val;
});

【讨论】：

【解决方案6】：

你可以使用 jQuery.grep() 从 jQuery 1.0 开始：

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

【讨论】：

【解决方案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;
});

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

【讨论】：

请在第一个sn-p中将“int length”改为“var length”

【解决方案8】：

使用过滤器

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",
        },
         
    ]
}


let filter = 
  json.homes.filter(d => 
  
    d.price >= 1000 & 
    d.sqft >= 500 & 
    d.num_of_beds >=2 & 
    d.num_of_baths >= 2.5
)

console.log(filter)

【讨论】：

【解决方案9】：

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

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

希望，它会有所帮助！

【讨论】：

我的谓词条件因各种点击而变化。如何存储当前谓词值并在需要时将其应用于 myfilter 函数？

【解决方案10】：

我使用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) 你只会得到

[{用户名：“比尔”，工作：“明星”，语言：“土耳其语”}]

比尔是你的人，因为他的名字不是“玛丽”、“乔”之一，他的国籍不包括在 ['English'、'Italian'、'Spanish'、'Greek'] 中，而且他是一个明星！

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

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

【讨论】：

VM586:1 Uncaught ReferenceError: ruleOut is not defined at :1:1
@MohammadAyoubKhan 在浏览器控制台中复制我的代码（ruleOut、actors 和不需要的FieldsFilter 定义）并像我的示例一样运行 ruleOut(actors,不需要的FieldsFilter)，它工作正常。显然你有一个超出范围的调用。另请注意，仅粘贴错误既没有帮助也没有礼貌，只是说！

【解决方案11】：

您应该查看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}});

【讨论】：

【解决方案12】：

或者您可以简单地使用$.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);
    }
});

【讨论】：

【解决方案13】：

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 函数。可以在此处找到更多详细信息，因为我们根据您的条件过滤数据，返回真或假，它将收集不同数组中的数据，因此您的实际数组不会被修改。

@JGreig 请调查一下。

【讨论】：

【解决方案14】：

const y = 'search text';
const a = [{key: "x", "val: "y"},  {key: "d", "val: "z"}]
const data = a.filter(res => {
        return(JSON.stringify(res).toLocaleLowerCase()).match(y.toLocaleLowerCase());
});

【讨论】：

【解决方案15】：

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

【讨论】：

【解决方案16】：

在数组中搜索对象的所有属性的高级代码

b=[]; 
yourArray.forEach(x => {
      Object.keys(x).forEach(i => {if (x[i].match('5') && !b.filter(y => y === x).length) { b.push(x) }})
    });
console.log(b)

【讨论】：