基于JavaScript的前端数据多条件过滤功能

有时候需要在前端过滤数据，增强交互体验。当数据可用的过滤条件很多时，把逻辑写死会给后期维护带来很大的麻烦。下面是我自己写的一个简单的滤镜。可以根据数据中包含的字段动态设置过滤条件。

遵循JD.COM的筛选标准，我们这里以价格区间和品牌作为检验。

密码

js的过滤器Array.prototype.filter主要用于代码中。此方法将遍历数组元素，并返回满足检查条件的新数组，而不更改原始数组。

//filter()var foo=[0，1，2，3，4，5，6，7，8，9]；var foo1=foo.filter(函数(item){ return item=5 })；console . log(foo 1)；//[5，6，7，8，9]有了这个方法，过滤数据就方便多了。我们先定义一个商品类。

//定义商品类别功能产品(名称、品牌、价格){这个。name=name//name this . brand=brand；//品牌this.price=价格；//Price}创建一个过滤对象，把过滤数据的所有方法都放进去。为了自动适应不同的过滤条件，过滤条件分为两类，一类是区间型rangesFilter，如品牌、内存等；一是选择选择过滤器的类型，如价格和屏幕大小。

当同时筛选不同类别时，进行“与”逻辑，在上一个类别的筛选结果上筛选每个类别。比如我想过滤2000-5000部华为手机，先调用rangesFilter过滤产品并返回结果1，然后使用choosesFilter过滤结果1并返回结果2。

当然，如果有其他类别，也不一定是AND逻辑，会单独处理。

//商品筛选器const ProductFilters={/** *间隔类型筛选器* @ param {arrayproduct}产品* @ param {array {type:string，low:number，high: number}}范围*/rangesFilter:函数(产品，范围){} /** *选择类型筛选器* @ param {arrayproduct}产品* @ param {array {type:string，value:string}}选择*/选择筛选器3360 function

//区间类型条件结构范围： [{type :' price '，//筛选器类型/字段low: 3000，//最小值为high: 6000 //最大值为}]/* * * @ param { array product } products * @ param { array { type : string，low3360number，high : number } } ranges */rangesfilterr 3360 function(products，ranges) { if (ranges)。} else {/** *循环多个区间条件，*应该只有一个区间类型，*比如价格区间不会同时需要1000-2000和4000-6000 */for(让范围的范围){//多个不同类型的区间都是and逻辑。可以直接分配给自己的产品=products . filter(function(item){ return item[range . type]=range . low item[range . type]=range . high；});}退回产品；}}选择类型过滤器：

//选择类型条件结构choose: [{type:' brand '，value:' Huawei'}，{type3360' brand '，value : ' apple ' }]/* * * @ param { array product } products * @ param { array { type : string，value : string } } choose */choose filter : function(products，choose){ let tmprobles=[]；if(choice . length===0){ tmp problems=products；} else {/** *选择类型条件为or逻辑，concat */for (let choice的选择){ tmp problems=tmp problems . concat(products . filter(function(item)){ return item[choice . type]。(choice.value)的索引！==-1;}));} }返回tmpProducts}定义了一个执行函数doFilter()。

函数doFilter(products，Conditions) {//根据条件循环调用过滤器中for (key in conditions)的方法{//判断if (productfilters)是否有需要的过滤方法。hasownproperty(键“filter”)类型的product filters[键“Filter”]===“function”){ products=product filters[键“Filter”](产品，条件[键])；} }退货产品；}//将两个类别的过滤条件放在同一个对象中，让条件={ranges : [{type :' price '，low : 3000，high : 6000}]，选择3360 [{type :' brand '，value :' Huawei。

创建10个商品数据和过滤条件

//商品数组const products=[新产品('华为荣耀9 '，'华为'，2299)，新产品('华为P10 '，'华为'，3488)，新产品('小米MIX2 '，'小米'，3599)，新产品('小米6 '，小米'，2499)，新产品('小米Note3 '，'小米'，2499)，新产品(' iPhone7 32G '，'苹果'，4588)，新产品(' iPhone 7 Plus 128g '，'苹果'，6388)，新//过滤条件让条件={ranges : [{type:' price '，low: 3000，high: 6000}]，choose: }，{type: 'brand '，value:' Huawei'}，{type:

让结果=多过滤器(产品、条件)；console.log(结果)；输出

代码的可扩展性和可维护性都很好，只要筛选条件中的类型字段在商品数据中是一致的，就可以进行筛选，比如将筛选条件改为

让条件={范围：[{类型： '价格'，低： 3000，高： 6000}]，选择：[{类型3360 '名称'，值3360' iphone'}]输出

有些地方比如搜索匹配也需要优化，比如是区分大小写、完美匹配还是模糊匹配。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。