最近新开发一个性能,点击立刻下单,会把售罄,库存有余的商品 id 和异样类型返回给我,我须要将状态在页面上展现:
须要做的就是将我上一次的商品列表和最新返回的商品列表进行比照,最新的数据是不蕴含售售罄
和库存有余的,我须要替换并且保留上一次的蕴含售罄和库存有余,用来在页面上展现标识:
模仿旧列表: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,});
},
性能实现。