有的时候后端利用数据库条件查询语句返回数据并不一定能够满足业务需求,可能还要再做一层筛选;一两个条件还比较简单,几个if else可能就搞定了,那么3个4个...n个条件的时候怎么办,岂不是要写到天荒地老;如果后端的童鞋嫌麻烦不处理直接返回给前端,前端的童鞋就苦逼了😭。
伟大的程序员怎么可能去做这些无聊的苦逼工作,本着一切复杂的工作都交给别人(计算机)的原则,我们创造了如下神器;
/**
* 筛选数据 做前端筛选功能返回数据处理
* @param products 数据源
* @param conditions 筛选条件
* @returns {*}
*/
var dataFilter = function (products, conditions) {
var ProductFilters = {
/**
* 区间类型筛选
* @param {array<Product>} products
* @param {array<{type: String, low: number, high: number}>} ranges
*/
rangesFilter: function (products, ranges) {
if (ranges.length === 0) {
return products;
}
else {
/**
* 循环多个区间条件,
* 每种区间类型应该只有一个,
* 比如价格区间不会有1000-2000和4000-6000同时需要的情况
*/
ranges.forEach(function (range, index) {
// 多个不同类型区间是与逻辑,可以直接赋值给自身
products = products.filter(function (item) {
if (!range.low) {//区间最低值不存在
range.low = 0;
}
if (!range.high) {//区间最高值不存在
range.high = 100000000000000;
}
// console.log(item[range.type] >= range.low && item[range.type] <= range.high);
return item[range.type] >= range.low && item[range.type] <= range.high;
});
});
return products;
}
},
/**
* 选择类型筛选
* @param {array<Product>} products
* @param {array<{type: String, value: String}>} chooses
*/
choosesFilter: function (products, chooses) {
var tmpProducts = [];
if (chooses.length === 0) {
tmpProducts = products;
}
else {
chooses.forEach(function (choice, index) {
tmpProducts = products.filter(function (item) {
if (choice.value === '') {
choice.value = null;
}
return String(item[choice.type]).indexOf(choice.value) !== -1;
});
products = tmpProducts;
});
}
return tmpProducts;
}
};
// 根据条件循环调用筛选器里的方法
for (var key in conditions) {
// 判断是否有需要的过滤方法
if (ProductFilters.hasOwnProperty(key + 'Filter') && typeof ProductFilters[key + 'Filter'] === 'function') {
products = ProductFilters[key + 'Filter'](products, conditions[key]);
}
}
return products;
};
//use example
var products = [
{ name: '华为荣耀9', brand: '华为', price: 2299 ,size:'5.5'},
{ name: '华为P10', brand: '华为', price: 3488 ,size:'4.0'},
{ name: '小米MIX2', brand: '小米', price: 3599 ,size:'4.0'},
{ name: '小米MIX', brand: '小米', price: 3599 ,size:'4.0'},
{ name: '小米6', brand: '小米', price: 2499 ,size:'4.7'},
{ name: '小米Note3', brand: '小米', price: 2499 ,size:'4.9'},
{ name: 'iPhone7 32G', brand: '苹果', price: 4588 ,size:'7.0'},
{ name: 'iPhone7 Plus 128G', brand: '苹果', price: 6388 ,size:'6.0'},
{ name: 'iPhone8', brand: '苹果', price: 5888 ,size:'7.0'},
{ name: '三星Galaxy S8', brand: '三星', price: 5688,size:'5.0'},
{ name: '三星Galaxy S8', brand: '三星', price: 5688,size:'5.0'},
{ name: '三星Galaxy S7 edge', brand: '三星', price: 3399 ,size:'6.9'}
];
var Conditions = {
ranges: [
{
type: 'price',
low: 3000,
high: 5888
},
{
type:'size',
low:4,
high:6.9
}
],
chooses: [
{
type: 'brand',
value: '小米'
},
{
type:'size',
value:'4.0'
},{
type:'name',
value:'小米MIX2'
}
]
};
var result = dataFilter(products, Conditions);
console.log('---------------------------筛选结果: ',result);
声明:
本方法不是原创,也是自己在开发中遇到了上述问题,去问的度娘后加以整理出来的;因此并不能适用所有的情况,这个要开发者自行补充了;具体出自哪里忘记,如果原创作者看到请联系,我会及时注明出处。
网友评论