阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      JavaScript 两个对象数组的更新迭代

      • 场景:页面开始会有一个对象数组 objAry,每隔一段时间会从服务器上请求到一个 objAry1 的对象数组
      • 要求:以 price 为基础,相同的 price 的对象,obj1 是最新的,需要替换掉 obj 中对应 price;
      • 如果 sprice 相同,obj1 中对应 number 为 0,则该项目需要去掉;
      • 如果 obj1 中有 obj 不存在的 sprice,则需要插入进去

      获取和迭代会非常的频繁,对执行效率有比较高的要求;

      开始的源数据;

      var obj = [
          { "price": 11.00089, "number": 5.0179, "heji": 123.980 },
          { "price": 0.189, "number": 5.01, "heji": 1 },
          { "price": 0.00009, "number": 1, "heji": 10 },
          { "price": 0.00008, "number": 2, "heji": 10 },
          { "price": 0.00009101, "number": 15.01, "heji": 123.980 },
          { "price": 0.00109102, "number": 15.01, "heji": 3.08 }
      ];
      var obj1 = [
          { "price": 11.00089, "number": 1, "heji": 123.980 },
          { "price": 0.189, "number": 0, "heji": 1 },
          { "price": 1.189, "number": 2, "heji": 1 }
      ];
      
      

      最终需要的数据

      [
          { price: 11.00089, number: 1, heji: 123.98 },
          { price: 0.00009, number: 1, heji: 10 },
          { price: 0.00008, number: 2, heji: 10 },
          { price: 0.00009101, number: 15.01, heji: 123.98 },
          { price: 0.00109102, number: 15.01, heji: 3.08 },
          { price: 1.189, number: 2, heji: 1 }
      ]
      

      首先按照要求先整理思路;如下;

      思路整理

      /*
      *
      * sourcesData   : 源数据,基础数据;
      * updateData    :需要更新的数据
      * key           :Merge的依据key;比如 price
      * deleteFlag    : 如果哪个key为0,则删除;比如number
      * */
      function mergeDataFn(sourcesData,updateData,key,deleteFlag){
          //判断是否数组类型,非数组退出
          if ({}.toString.call(sourcesData) !== '[object Array]') {
              return 'Type Error';
          }
      
          //为了不修改原有数据 todo 可以优化
          var tempAry = [];
          for (var i = 0; i < sourcesData.length; i++) {
              tempAry[i] = sourcesData[i];
          }
      
          //转化为对象,利用对象属性的唯一性;
          var toObj=function (ary) {
              var tempObj = {};
              for (var i = 0; i < ary.length; i++) {
              var curKey = ary[i][key];
              tempObj[curKey] = ary[i];//如果对象数组中,有2个相同price的对象,则后一个对象会覆盖前一个;
              }
              return tempObj;
          };
      
          //Merage2个转化后的对象
          var MerageObj=function (baseObj,updateObj) {
              for (var currentKey in updateObj){
                  //如果number=0;删除
                  if(updateObj[currentKey][deleteFlag]==0){
                  delete baseObj[currentKey];
                  continue;
                  }
                  //没有key ->添加 ; 有的key ->更新
                  baseObj[currentKey]=updateObj[currentKey];
              }
              return baseObj
          };
          var resultObj=MerageObj(toObj(tempAry),toObj(updateData));
      
          //对象还原成数组
          var resultAry=[];//储存最终的结果
          for (var resultKey in resultObj){
              resultAry.push(resultObj[resultKey])
          }
          return resultAry;
      }
      
      var base = [
          { price: '0.0001', number: 11, heji: 123 },
          { price: '0.0001', number: 14, heji: 123 },
          { price: '0.0002', number: 15, heji: 128 }
      ];
      var update1 =[
          { price: '0.0001', number: 7, heji: 777 },
          { price: '0.0003', number: 3, heji: 333 },
          { price: '0.0002', number: 0, heji: 888 }
      ];
      var currentResult=mergeDataFn(base,update1,'price','number');
      console.log(currentResult);
      
      

      然后整理优化代码,优化后的核心代码如下;

      //核心代码如下
      obj = obj.concat(obj1);
      var tempobj = {};
      obj.forEach(function (item, index) {
          var skey = item.price;
          tempobj[skey] = item;
      });
      obj = [];
      for (var i in tempobj) {
          if (tempobj[i].number !== 0) {
              obj.push(tempobj[i])
          }
      }
      console.log(obj);
      

      再把核心代码做对应的封装即可;

      目录
      目录