遇到问题
一般对两个数组做做交集和并集处理用遍历方法一般就是通过遍历for等方法，但是如果遇到大数据量（10万条数据）就会用到很长的时间和耗费内存，因为javascrip为单线程，会影响到用户的体验和页面渲染、逻辑处理等问题！
解决方案
使用定时器去让大数据遍历的时候能分成很多个异步方法(每个异步方法去遍历大数据数组的一部分数据)去执行，互相也不影响，并监听到所有异步方法执行完成再进行下一步处理！岂不美滋滋！
setTimrout(()=>{
......
},200)
之前方法
使用for循环一次性遍历0W条数据来查找交集和并集，发现使用的时间能达到10S左右（相当影响体验感受和逻辑处理）
方法优化 DataProcessing 类
enum TypeFun {
Intersection = 'intersection', // 交集
Difference = 'difference', // 差集
}
class DataProcessing {
public groupNumber: number = 10000;//每组的个数
public onFinish: any = null;//全部完成的回调
public sourceDataField: string = "";
public targetDataField: string = "";
private matchList: any = [];//找出的符合比配的列表
private groupCount: number = 0;//当前处理有多少个分组
private groupFinishList: any = [];//标记每个分组完成
private targetDataObj: any = {};
private stime: any;
private Type: TypeFun = TypeFun.Intersection;//差集1 ，交集2
//差集
Except(sourceDataList: any, targetDataList: any): void {
this.Type = TypeFun.Difference;
this.init(sourceDataList, targetDataList);
}
//交集
Intersect(sourceDataList: any, targetDataList: any): void {
this.Type = TypeFun.Intersection;
this.init(sourceDataList, targetDataList);
}
// 开始
private init(sourceDataList: any, targetDataList: any) {
this.stime = new Date();
this.InitTargetDataObj(targetDataList);
//通过 groupNumber 计算 得到需要做多少个分组去延迟并行比对
this.groupCount = Math.ceil(sourceDataList.length / this.groupNumber);
//循环分组处理
for (let index = 0; index < this.groupCount; index++) {
let grouplist = sourceDataList.slice(index * this.groupNumber, ((index + 1) * this.groupNumber));
this.groupProcess(grouplist);
}
this.monitorFinish();
}
// 标记字段名
private InitTargetDataObj(targetDataList: any) {
this.targetDataObj = {};
let len = targetDataList.length;
for (let index = 0; index < len; index++) {
// 给目标列表的每一个targetDataField字段名做一次标记
let field = targetDataList[index][this.targetDataField];
this.targetDataObj[field] = 1;
}
}
//监听是否全部分组都做完了
private monitorFinish() {
let Interval = setInterval((This: DataProcessing) => {
if (This.groupCount == This.groupFinishList.length) {
let etime: any = new Date();
let exetime = etime - This.stime;
console.log("执行时间：" + exetime + "毫秒");
//取消
clearInterval(Interval);
This.onFinish(This.matchList);
This.clearTargetDataObj();
}
}, 10, this);
}
///清空临时对象
private clearTargetDataObj() {
for (let f in this.targetDataObj) {
delete this.targetDataObj[f];
}
this.targetDataObj = null;
this.groupFinishList = [];
}
//分组处理
private groupProcess(list: any) {
setTimeout((This: DataProcessing) => {
//延迟处理每组数据
for (let index = 0; index < list.length; index++) {
const element = list[index];
let val = element[This.sourceDataField];
switch (this.Type) {
case TypeFun.Difference:
//判断使用源数据列表的字段放在 标记targetDataObj里面看是否存在
if (This.targetDataObj[val] == undefined) {
This.matchList.push(element);
}
break;
case TypeFun.Intersection:
if (This.targetDataObj[val] != undefined) {
This.matchList.push(element);
}
break;
}
}
This.groupFinishList.push(1);
}, 0, this);
}
}
使用
// 测试数据
class TestData {
public do() {
//初始化数据
//处理所有源数据
let testList: any[] = [];
for (let index = 0; index < 100000; index++) {
testList.push({
id: index,
name: "测试" + index
});
}
//对比的目标对象
let targetDataList: any[] = [];
for (let index = 0; index < 5000; index++) {
let id = Number.parseInt((Math.random() * 100000) + "");
targetDataList.push({
id: id,
code: "测试" + id
});
}
//调用DataProcessing类来实现处理方法
let manage = new DataProcessing();
//设置每个异步方法要处理的数据量
manage.groupNumber = 5000;
//设置数据列表需要比对的字段
manage.sourceDataField = "name";
//设置目标列表需要比对的字段
manage.targetDataField = "code";
manage.onFinish = function (list: any) {
//完成后的处理；
console.log("空闲：" + list.length);
};
manage.Except(testList, targetDataList);
}
}
调用
let arrayHandle = new TestData();
arrayHandle.do();
效果
63毫秒！ 可以对DataProcessing进行更多的扩展！
结语
多学习、多看报、多运动，不对的地方望指出来，谢谢
网友评论