当前位置:Gxlcms > JavaScript > JavaScript前端数据多条件筛选的功能实现详解

JavaScript前端数据多条件筛选的功能实现详解

时间:2021-07-01 10:21:17 帮助过:56人阅读

这篇文章主要为大家详细介绍了基于JavaScript实现前端数据多条件筛选功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

有时候也会需要在前端进行数据筛选,增强交互体验。当数据可用的筛选条件较多时,把逻辑写死会给后期维护带来很*烦。下面是我自己写的一个简单的筛选器,筛选条件可以根据数据包含的字段动态设置。

仿照京东的筛选条件,这里就取价格区间和品牌作为测试。

代码

代码中主要使用js的过滤器Array.prototype.filter,该方法会对数组元素进行遍历检查,返回一个符合检查条件的新数组,不会改变原数组。


有了这个方法,筛选数据方便了很多,下面先定义一个商品类。


创建一个过滤器对象,把所有过滤数据的方法放在里面。为了能自动适配不同的筛选条件,将筛选条件分为两个大类,一个是区间类型rangesFilter ,如:品牌、内存等;一个是选择类型choosesFilter,如:价格、屏幕尺寸等。

不同大类同时筛选时,进行的是与逻辑,每个大类在上一个大类筛选结果上进行筛选。比如我要筛选2000-5000块的华为手机,先调用rangesFilter筛选products并返回结果result1,然后用choosesFilter筛选result1并返回结果resulte2。

当然,如果还有其它大类,不一定是与逻辑,再另行处理。


区间类型的筛选,代码如下。



选择类型筛选:



定义一个执行函数doFilter()。



测试

创建10个商品数据,以及筛选条件


调用函数


输出

代码的扩展性和可维护性都很好,只要保证筛选条件中的type字段在商品数据中一致都可以筛选,比如将筛选条件改为


输出

搜索匹配等一些地方也需要优化,是否区分大小写、是完全匹配还是模糊匹配等。

以上就是JavaScript前端数据多条件筛选的功能实现详解的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行