业务场景说明:
相信不少开发的小伙伴都遇到过这样的功能,历史足迹列表,时间列表,筛选分类这些,在我们开发功能中经常会遇到后端返回一维数组的分页数据
如果对这个数组不作处理直接渲染分页会存在一个问题,那就是上一页数据和下一页数据可能会同时存在同时时间的问题,为了避免出现相同的时间就会把请求的数组在前端再次组装成一个以时间分类的二维数组像这样:
实现代码:
let resultArray = []
data.map(mapItem => {
if (resultArray.length === 0) {
resultArray.push({superUnitId: mapItem['day'], superUnitList: [mapItem]})
} else {
let res = resultArray.some((someItem) => {
if (someItem['superUnitId'] === mapItem['day']) {
someItem['superUnitList'].push(mapItem)
return true
}
})
if (!res) {
resultArray.push({superUnitId: mapItem['day'], superUnitList: [mapItem]})
}
}
})
this.list = resultArray
实现逻辑:
首先给原始数据循环添加第一个时间数组:
if (resultArray.length === 0) {
resultArray.push({superUnitId: mapItem['day'], superUnitList: [mapItem]})
}
其次是判断已存在的时间等于原始数组中的day 的话就push进这个时间数组
let res = resultArray.some((someItem) => {
if (someItem['superUnitId'] === mapItem['day']) {
someItem['superUnitList'].push(mapItem)
return true
}
})
最后是 如果没有这个时间数组就再次添加新的数组
resultArray.push({superUnitId: mapItem['day'], superUnitList: [mapItem]})
这样就完成了
总结经验:
这个根据数组对象属性组装数组的应用在开发中还是很广泛的,只要分析清楚业务实现,我很多项目中都是拿来就用,就避免了对底层代码实现的思考,加快处理业务代码的能力,我这里只是举列的冰山一角,以我个人经验来看这段代码实用性很高,所以分享给大家,灵活使用喔,原理都一样,今天就这样,还有一堆事等着我去码呢,谢谢大家的关注,我会持续分享相关前端开发经验
标签:mapItem,转化成,resultArray,js,someItem,数组,push,day From: https://blog.csdn.net/2401_86332692/article/details/140869596