js对比对象数组的原数据和传递过来的新数据,如果有新数据则替换成新数据,否则保留原数据

最近新开发一个功能,点击立即下单,会把售罄,库存不足的商品id和异常类型返回给我,我需要将状态在页面上展示:
js对比对象数组的原数据和传递过来的新数据,如果有新数据则替换成新数据,否则保留原数据_第1张图片
需要做的就是将我上一次的商品列表和最新返回的商品列表进行对比,最新的数据是不包含售售罄
和库存不足的,我需要替换并且保留上一次的包含售罄和库存不足,用来在页面上展示标识:

模拟旧列表:
var arr1 = 
[
  { id:'1',name:'zhangsan', age:'15'}, 
  { id:'2', name:'lisi', age:'16' },
  { id:'3', name:'ani', age:'17'},
]
 模拟新列表:
var arr2 = 
[
  { id:'1',name:'zhangsan', age:'100' }, 
  { id:'2', name:'lisi' },
]

// 值传递和引用传递
function concatFailSpecs(oldList, newList) {
  let oldList1= oldList.map((item) => {
    newList.forEach((item2) => {
      if(item.id == item2.id) {
        item = item2
      }
    })
    return item
  });
  return oldList1;
}

// 或者
function concatFailSpecs(oldList, newList) {
  return oldList.map(oldItem=> {
    const newItem = newList.map(newItem=> newItem.id === oldItem.id);
    return newItem || oldItem;
  });
}

真实渲染数据:
this.setData({
  productList: concatFailSpecs(this.data.productList, res.body.productList),
});

通过封装的concatFailSpecs方法,就可以把最新返回的数据替换我的老列表里的数据,并且保留售罄和库存不足的商品。因为如果有库存不足或者售罄会另外返回一个FailSpecs列表,里面是异常类型和商品id,我拿到处理过的商品列表和FailSpecs列表对比,将符合条件的异常作为属性添加到productList里面:

    // failSpecs: 1已下架  2:库存不足 3:已售罄 列表
    failSpecsCheck(productList,failSpecs) {
      productList.forEach((item) => {
        failSpecs.forEach((item2) => {
          if (item.productSpecId == item2.specId) {
            item.failType = item2.failType;
            item.sku = item2.sku;
            item.maxBuyNum = item2.maxBuyNum;
            if(item.count > item2.maxBuyNum) {
              item.count = item2.maxBuyNum;
            }
          }
        })
      });
      this.setData({
        productList,
      });
    },

功能完成。

你可能感兴趣的:(小程序javascript)