console
(function() {
var aim = [{
name: 'Anne',
age: 23,
gender: 'female'
},
{
name: 'Leila',
age: 16,
gender: 'female'
},
{
name: 'Jay',
age: 19,
gender: 'male'
},
{
name: 'Mark',
age: 40,
gender: 'male'
}
];
//单条件过滤
function filterByName(aim, name) {
return aim.filter(item => item.name == name)
}
console.log("--单条件筛选--")
console.log(filterByName(aim, "Leila"))
// 根据单条件多数据筛选
function filterByName1(aim, nameArr) {
var result = []
for (var i in nameArr) {
result.push(aim.find(item => item.name == nameArr[i]))
}
return result
};
// 输入 aim ['Anne','Jay']
//期望输出为 [{name:'Anne', age: 23, gender:'female'},{name:'Jay', age: 19, gender:'male'}]
console.log("--根据名字选出多个数据筛选--");
console.log(filterByName1(aim, ["Leila", "Jay"]))
//console.log("第二种单条件多数据筛选方法");
// function filterByName11(aim, nameArr) {
// let v = nameArr.filter(item => {
// if (aim.indexOf(item.name) > -1) {
// return item
// //console.log(item)
// }
// })
// return v
// }
// console.log(filterByName11(aim,["Leila", "Jay"]));
//根据名字或者年龄筛选
function filterByName2(aim, name, age) {
return aim.filter(item => item.name == name || item.age == age)
}
console.log("--根据名字或者年龄筛选--")
console.log(filterByName2(aim, 'Leila', 19));
console.log("多条件多数据筛选")
function multiFilter(array, filters) {
const filterKeys = Object.keys(filters)
// filters all elements passing the criteria
return array.filter((item) => {
// dynamically validate all filter criteria
return filterKeys.every(key => {
//ignore when the filter is empty Anne
if (!filters[key].length) return true
return !!~filters[key].indexOf(item[key])
})
})
}
/*
* 这段代码并非我原创,感兴趣的可以去原作者那里点个赞
* 作者是:@author https://gist.github.com/jherax
* 这段代码里我只加了一行,解决部分筛选条件清空时候整体筛选失效的问题
*/
var filters = {
name: ['Leila', 'Jay'],
age: []
}
console.log(multiFilter(aim, filters))
})()
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>