前端进阶1 ——数据比对

数据比对

背景

在很开发场景中遇到了数据更新并渲染问题，而项目实际情况中会遇到页面数据量大的时候页面卡死。需要对其进行优化，数据更新渲染优化的主要思路是先对比数据变化情况，包含变化了的，新增的，减少的。然后针对变化的数据，局部更新数据。现在场景是地图要素的更新渲染，当渲染数据量过大，新的数据来之后要进行更新，如果直接全部清除，在重新渲染将直接导致系统Over。所以先对比数据，然后更新数据。

实现

使用Lodash实现数组对象对比

封装类

/**
 * 数组比较器
 */
import Lodash from 'lodash'
export default class Comparator {
    firstArray;
    lastArray;
    interArray;
    iteratee;
    constructor (sArrs, eArrs, iteratee) {
      this.firstArray = sArrs
      this.lastArray = eArrs

      if (iteratee) { this.interArray = Lodash.intersectionBy(sArrs, eArrs, iteratee) }
    }

    //重叠部分，id
    getInsertSection (iteratee) {
      if (!this.firstArray || !this.lastArray || !(this.firstArray instanceof Array) || !(this.lastArray instanceof Array)) {
        return []
      }
      if (!this.interArray) {
        this.interArray = Lodash.intersectionBy(this.firstArray, this.lastArray, iteratee)
      }
      return this.interArray
    }

    //重叠部分
    getDeepInsterSection () {
      if (!this.firstArray || !this.lastArray || !(this.firstArray instanceof Array) || !(this.lastArray instanceof Array)) {
        return []
      }
      return Lodash.intersectionWith(this.firstArray, this.lastArray, Lodash.isEqual)
    }

    //减少内容
    getDeleteSection (iteratee) {
      if (!this.interArray) {
        this.getInsertSection(iteratee)
      }
      if (!this.firstArray || !this.interArray) {
        return []
      }

      return Lodash.differenceBy(this.firstArray, this.interArray, iteratee)
    }

    //增加内容
    getAddSection (iteratee) {
      if (!this.interArray) {
        this.getInsertSection(iteratee)
      }
      if (!this.lastArray || !this.interArray) {
        return []
      }

      return Lodash.differenceBy(this.lastArray, this.interArray, iteratee)
    }

    //变化内容
    getChangeSection (iteratee) {
      const allSection = Lodash.intersectionBy(this.lastArray, this.firstArray, iteratee)// this.getInsertSection(iteratee)
      const unChangeSection = this.getDeepInsterSection()
      return Lodash.differenceBy(allSection, unChangeSection, iteratee)
    }
}

静态类

/**
 * 静态数组比较器
 */
import Lodash from 'lodash'
export default class Comparator {
    firstArray;
    lastArray;
    interArray;
    iteratee;
    constructor (sArrs, eArrs, iteratee) {
      this.firstArray = sArrs
      this.lastArray = eArrs

      if (iteratee) { this.interArray = Lodash.intersectionBy(sArrs, eArrs, iteratee) }
    }
    static setComparatorValue(sArrs, eArrs, iteratee){
      this.firstArray = sArrs
      this.lastArray = eArrs
      if (iteratee) { this.interArray = Lodash.intersectionBy(sArrs, eArrs, iteratee) }

    }

   static getInsertSection (firstArr,lastArr,iteratee) {   
        return Lodash.intersectionBy(firstArr,lastArr, iteratee)
    }

    getDeepInsterSection () {
      if (!this.firstArray || !this.lastArray || !(this.firstArray instanceof Array) || !(this.lastArray instanceof Array)) {
        return []
      }
      return Lodash.intersectionWith(this.firstArray, this.lastArray, Lodash.isEqual)
    }

   static  getDeleteSection (firstArr,lastArr,iteratee) {
      let interArr=Lodash.intersectionBy(firstArr, lastArr, iteratee)
      return Lodash.differenceBy(firstArr, interArr, iteratee)
    }

  static  getAddSection (firstArr,lastArr,iteratee) {
      let interArr=Lodash.intersectionBy(firstArr, lastArr, iteratee)
      return Lodash.differenceBy(lastArr, interArr, iteratee)
    }

   static  getChangeSection (firstArr,lastArr,iteratee) {
  
      const allSection = Lodash.intersectionBy(lastArr, firstArr, iteratee)
      const unChangeSection =Lodash.intersectionWith(firstArr, lastArr, Lodash.isEqual)// this.getDeepInsterSection()
      return Lodash.differenceBy(allSection, unChangeSection, iteratee)
    }
   
}

lodash

lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。

官网

https://www.lodashjs.com/

介绍到着应该知道怎么干了，加油！