前端关于数组大数据量（10万数据）交集和并集

遇到问题

一般对两个数组做做交集和并集处理用遍历方法一般就是通过遍历for等方法，但是如果遇到大数据量（10万条数据）就会用到很长的时间和耗费内存，因为javascrip为单线程，会影响到用户的体验和页面渲染、逻辑处理等问题！

解决方案

使用定时器去让大数据遍历的时候能分成很多个异步方法(每个异步方法去遍历大数据数组的一部分数据)去执行，互相也不影响，并监听到所有异步方法执行完成再进行下一步处理！岂不美滋滋！

setTimrout(()=>{
    ......
},200)

之前方法

使用for循环一次性遍历10万条数据来查找交集和并集，发现使用的时间能达到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; // 使用类型交集or并集

  //差集
  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进行更多的扩展！

结语

多学习、多看报、多运动，不对的地方望指出来，谢谢！