JS对大量数据进行多重过滤的方法


Posted in Javascript onNovember 04, 2016

前言

主要的需求是前端通过 Ajax 从后端取得了大量的数据,需要根据一些条件过滤,首先过滤的方法是这样的:

class Filter {
 filterA(s) {
 let data = this.filterData || this.data;
 this.filterData = data.filter(m => m.a === s);
 }
 
 filterB(s) {
 let data = this.filterData || this.data;
 this.filterData = data.filter(m => m.b === s);
 }
}

现在迷糊了,觉得这样处理数据不对,但是又不知道该怎么处理。

发现问题

问题就在过滤上,这样固然可以实现多重过滤(先调用 filterA() 再调用 filterB() 就可以实现),但是这个过滤是不可逆的。

假如过滤过程是这样:

f.filterA("a1");
f.filterB("b1");
f.filterA("a2");

本来是希望按 "a1" 和 "b1" 过滤了数据之后,再修改第一个条件为 "a2",但结果却成了空集。

解决问题

发现了问题,就针对性的解决。这个问题既然是因为过滤过程不可逆造成的,那每次都直接从 this.data 开始过滤,而不是从 this.filterData 开始过滤,就能解决问题。如果要这样做,就需要将选择的过滤条件先记录下来。

记录过滤条件

用一个列表记录过滤条件当然是可行的,但是注意对同一个条件的两次过滤是互斥的,只能保留最后一个,所以应该用 HashMap 更为合适。

class Filter {
 constructor() {
 this.filters = {};
 }

 set(key, filter) {
 this.filters[key] = filter;
 }

 getFilters() {
 return Object.keys(this.filters).map(key => this.filters[key]);
 }
}

这种情况下,像上面的过程表示为

f.set("A", m => m.a === "a1");
f.set("B", m => m.b === "b1");
f.set("A", m => m.a === "a1");

let filters = f.getFilters(); // length === 2;

上面第 3 句设置的 filter 覆盖了第 1 句设置的那个。现在再用最后取得的 filters 依次来过滤原数据 this.data,就能得到正确的结果。

有人会觉得 getFilters() 返回的列表不是按 set 的顺序的——的确,这是 HashMap 的特点,无序。不过对于简单条件的判断,不管谁先谁后,结果是一样的。但是对于一些复合条件判断,就可能会有影响。

确实需要的话,可以通过 array 代替 map 来解决一下顺序的问题,但这样查找效率会降低(线性查找)。如果还想解决查找效率的问题,可以用 array + map 来处理。这里就不多说了。

过滤

实际上在使用的时候,每次都 getFilter() 再用一个循环来处理确实比较慢。既然 data 都封装成 Filter 中,可以考虑直接给一个 filter() 方法来送货过滤接口。

class Filter {
 filter() {
 let data = this.data;
 for (let f of this.getFilters()) {
  data = data.filter(f);
 }
 return data;
 }
}

不过这样我觉得效率不太好,尤其是对大量数据的时候。不妨利用一下 lodash 的延迟处理过程。

利用 lodash 的延迟处理

filter() {
 let chain = _(this.data);
 for (let f of this.getFilters()) {
 chain = chain.filter(f);
 }
 return chain.value();
}

lodash 在数据大于 200 的时候会启用延迟处理过程,也就是说,它会处理成一个循环中依次调用每一个 filter,而不是对每一个 filter 进行一次循环。

延迟处理和非延迟处理通过下图可以看出来区别。非延迟处理总共会进行 n(这里 n = 3) 次大循环,产生 n - 1 个中间结果。而延迟处理只会进行一次大循环,没有中间结果产生。

JS对大量数据进行多重过滤的方法

不过说实在的,我不太喜欢为了一点小事多加载一个库,所以干脆自己做个简单的实现

自己实现延迟处理

filter() {
 const filters = this.getFilters();
 return data.filter(m => {
 for (let f of filters) {
  // 如果某个 filter 已经把它过滤掉了,也不用再用后面的 filter 来判断了
  if (!f(m)) {
  return false;
  }
 }
 return true;
 });
}

里面的 for 循环还可以用 Array.prototype.every 来简化:

filter() {
 const filters = this.getFilters();
 return data.filter(m => {
 return filters.every(f => f(m));
 });
}

数据过滤其实并不是多复杂的事情,只要把思路理清楚,搞明白什么数据是需要保留的,什么数据是临时(中间过程)的,什么数据是最终结果……利用 Array.prototype 中的相关方法,或者诸如 lodash 之类的工具,很容易就处理出来了。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能有所帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
JQuery从头学起第一讲
Jul 04 Javascript
jquery获取元素索引值index()示例
Feb 13 Javascript
jquery取消选择select下拉框示例代码
Feb 22 Javascript
jquery实现漂亮的二级下拉菜单代码
Aug 26 Javascript
JavaScript自学笔记(必看篇)
Jun 23 Javascript
输入法的回车与消息发送快捷键回车的冲突解决方法
Aug 09 Javascript
jQuery css() 方法动态修改CSS属性
Sep 25 Javascript
Vue数据双向绑定原理及简单实现方法
May 18 Javascript
vue弹窗插件实战代码
Sep 08 Javascript
vue.js+elementUI实现点击左右箭头切换头像功能(类似轮播图效果)
Sep 05 Javascript
js函数和this用法实例分析
Mar 13 Javascript
JS实现表单中点击小眼睛显示隐藏密码框中的密码
Apr 13 Javascript
AngularJS模板加载用法详解
Nov 04 #Javascript
jQuery 遍历map()方法详解
Nov 04 #Javascript
Sortable.js拖拽排序使用方法解析
Nov 04 #Javascript
jQuery图片加载显示loading效果
Nov 04 #Javascript
JavaScript 深层克隆对象详解及实例
Nov 03 #Javascript
jQuery.ajax实现根据不同的Content-Type做出不同的响应
Nov 03 #Javascript
简单学习vue指令directive
Nov 03 #Javascript
You might like
我整理的PHP 7.0主要新特性
2016/01/07 PHP
PHP CURL实现模拟登陆并上传文件操作示例
2020/01/02 PHP
PHP7创建COOKIE和销毁COOKIE的实例方法
2020/02/03 PHP
js获取控件位置以及不同浏览器中的差别介绍
2013/08/08 Javascript
JavaScript新窗口与子窗口传值详解
2014/02/11 Javascript
深入分析escape()、encodeURI()、encodeURIComponent()的区别及示例
2014/08/04 Javascript
js判断手机访问或者PC的几个例子(常用于手机跳转)
2015/12/15 Javascript
jQuery+JSON实现AJAX二级联动实例分析
2015/12/18 Javascript
JS组件Bootstrap Table使用方法详解
2016/02/02 Javascript
js+flash实现的5图变换效果广告代码(附演示与demo源码下载)
2016/04/01 Javascript
Angular在一个页面中使用两个ng-app的方法
2017/02/20 Javascript
javascript html5轻松实现拖动功能
2017/03/01 Javascript
nodejs中使用HTTP分块响应和定时器示例代码
2017/03/19 NodeJs
基于jQuery实现瀑布流页面
2017/04/11 jQuery
angular-ngSanitize模块-$sanitize服务详解
2017/06/13 Javascript
图文讲解vue的v-if使用方法
2019/02/11 Javascript
Typescript的三种运行方式(小结)
2019/09/18 Javascript
使用webpack将ES6转化ES5的实现方法
2019/10/13 Javascript
Webpack5正式发布,有哪些新特性
2020/10/12 Javascript
[47:08]OG vs INfamous 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python中用Ctrl+C终止多线程程序的问题解决
2013/03/30 Python
Python新手们容易犯的几个错误总结
2017/04/01 Python
python获取txt文件词向量过程详解
2019/07/05 Python
在linux系统下安装python librtmp包的实现方法
2019/07/22 Python
django框架面向对象ORM模型继承用法实例分析
2019/07/29 Python
Python3.6实现根据电影名称(支持电视剧名称),获取下载链接的方法
2019/08/26 Python
python文字转语音的实例代码分析
2019/11/12 Python
利用python在excel中画图的实现方法
2020/03/17 Python
HTML5实现锚点时请使用id取代name
2013/09/06 HTML / CSS
孤独星球出版物:Lonely Planet Publications
2018/03/17 全球购物
数控机械专业个人的自我评价
2014/01/02 职场文书
关于爱情的广播稿
2014/01/16 职场文书
2014年团员学习十八大思想汇报
2014/09/13 职场文书
审查起诉阶段律师意见书
2015/05/19 职场文书
民事申诉状范本
2015/05/20 职场文书
曾国藩励志经典名言37句,蕴含哲理
2019/10/14 职场文书