js数组对象根据属性转化成二位数组

业务场景说明:

相信不少开发的小伙伴都遇到过这样的功能,历史足迹列表,时间列表,筛选分类这些,在我们开发功能中经常会遇到后端返回一维数组的分页数据

如果对这个数组不作处理直接渲染分页会存在一个问题,那就是上一页数据和下一页数据可能会同时存在同时时间的问题,为了避免出现相同的时间就会把请求的数组在前端再次组装成一个以时间分类的二维数组像这样:

实现代码:
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]})

这样就完成了

总结经验:

这个根据数组对象属性组装数组的应用在开发中还是很广泛的,只要分析清楚业务实现,我很多项目中都是拿来就用,就避免了对底层代码实现的思考,加快处理业务代码的能力,我这里只是举列的冰山一角,以我个人经验来看这段代码实用性很高,所以分享给大家,灵活使用喔,原理都一样,今天就这样,还有一堆事等着我去码呢,谢谢大家的关注,我会持续分享相关前端开发经验

  • 11
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值