前端实现多条件查询
问题：有时候在没有后端参与的情况下我们需要前端独立进行数据多条件查表。
//多条件查询方法
const productFilter = (data, params) => data.filter(function(item){
return Object.keys(params).every(function(key){
return item[key]!=undefined && item[key]==params[key] //可以相应修改条件
})
})
逻辑：遍历数据内容data，在data中每条元素中对查询内容params对象的每个键进行遍历，并与params与data中相关键中的值进行比对，符合条件返回true，若每个键都返回true，将数据data中的该元素放入数组
//多条件查询使用
var data=[
{age:20,sex:0,from:'zhejiang'},
{age:20,sex:1,from:'zhejiang'},
{age:20,sex:0,from:'hubei'},
{age:30,sex:0,from:'shanghai'}
]
var params1={age:30}
var params2={from:'zhejiang'}
var params3={sex:0,from:'zhejiang'}
console.log(productFilter(data,params1))
// expected output: Array [{age:30,sex:0,from:'shanghai'}]
console.log(productFilter(data,params2))
// expected output: Array [{age:20,sex:0,from:'zhejiang'},{age:20,sex:1,from:'zhejiang'}]
console.log(productFilter(data,params3))
// expected output: Array [{age:20,sex:0,from:'zhejiang'}]
涉及的关键原生方法
1. filter
filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。即return true/false
注意： filter() 不会对空数组进行检测。
注意： filter() 不会改变原始数组。
const arr=[10,20,30,55]
const filterArr = arr.filter((item)=>{item<20})
console.log(filterArr) // [10]
2. Object.keys
const object1 = {
a: 'somestring',
b: 42,
c: false
};
console.log(Object.keys(object1));
// expected output: Array ["a", "b", "c"]
3.every()
检查数组是否都能通过条件，都通过返回true，反之返回false
const isBelow40 = (currentValue) => currentValue < 40;
const isBelow30 = (currentValue) => currentValue < 30;
const array1 = [1, 30, 39, 29, 10, 13];
console.log(array1.every(isBelow40));
// expected output: true
console.log(array1.every(isBelow30));
// expected output: false
