我有以下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 );
注意,语法不必完全像上面那样。这只是一个例子。
你可以使用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第5版标准的一部分,可以在几乎所有现代浏览器中找到。
对于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;
};
}
你可以很容易地做到这一点-可能有很多实现可供你选择,但这是我的基本想法(可能有一些格式,你可以用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;
});
这样,您可以根据定义的任何谓词调用筛选器,甚至可以使用更小的筛选器进行多次筛选。
这个问题是在考虑多种结果的情况下提出的,在这种情况下,过滤器是可行的方法,正如这里的其他回答者已经指出的那样。
然而,由于这个问题已经成为一个流行的重复目标,我应该提到,如果您正在寻找满足条件的单个元素,您不需要过滤器,而是可以使用find。它以同样的方式工作,但它只是返回第一个匹配的元素,如果没有元素匹配则返回undefined,而不是返回一个匹配数组:
const data = [
{ id: 1, value: 10 },
{ id: 2, value: 20 },
{ id: 3, value: 30 }
]
console.log(data.filter(o => o.value > 15))
// Output: [{ id: 2, value: 20 }, { id: 3, value: 30 }]
console.log(data.find(o => o.value > 15))
// Output: { id: 2, value: 20 }
console.log(data.filter(o => o.value > 100))
// Output: []
console.log(data.find(o => o.value > 100))
// Output: undefined
// `find` is often useful to find an element by some kind of ID:
console.log(data.find(o => o.id === 3))
// Output: { id: 3, value: 30 }