针对前端大数据量处理（如10W+）

遇到问题

一般对两个数组做做交集和并集处理用遍历方法一般就是通过遍历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进行更多的扩展！

结语

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