如何根据属性过滤对象数组?
Posted
技术标签:
【中文标题】如何根据属性过滤对象数组?【英文标题】:How to filter object array based on attributes? 【发布时间】:2011-02-12 21:50:19 【问题描述】:我有以下房地产住宅对象的 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;
我想做的是能够对对象执行过滤器以返回“home”对象的子集。
例如,我希望能够根据: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 );
注意,语法不必与上面完全相同。这只是一个例子。
【问题讨论】:
这似乎与***.com/questions/1694717/…几乎相同var json = ...
JSON 是一种用于数据交换的文本表示法。 (More here.) 如果你在处理 JavaScript 源代码,而不是在处理 string,那么你就不是在处理 JSON。
不要使用 eval。这通常是不好的做法,可能会导致性能问题。由于处理器被锁定,我们只需要摆脱项目中的一堆。
【参考方案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)
【讨论】:
以上是关于如何根据属性过滤对象数组?的主要内容,如果未能解决你的问题,请参考以下文章