首页 > 其他分享 >js数组对象根据属性转化成二位数组

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

时间:2024-08-02 13:27:50浏览次数:15  
标签:mapItem 转化成 resultArray js someItem 数组 push day

业务场景说明:

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

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

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

相关文章

  • js 并发
    functionconcurRequest(maxnum){returnnewPromise((resolve,reject)=>{letindex=0letcount=0constresults=[]asyncfunctionrequest(){consti=indexconsturl=urls[index]......
  • uni-app h5 使用微信JSSDK的方式
    综合各方经验及文档总结了以下我的使用方法,希望对有需要的同学有些帮助第一步:npminstalljweixin-module--save第二步:common文件夹新建js文件,我这里命名jwx.js jwx.js文件内容varjWeixin=require('jweixin-module');exportdefault{//判断是否在微信中......
  • 数组算法
    数组的算法目录数组的算法搜索方法排序方法排序算法库搜索方法线性搜索(LinearSearch):算法:遍历数组,直到找到目标值或遍历完数组。时间复杂度:O(n)。应用:在未排序的数组中查找元素。publicintlinearSearch(int[]arr,inttarget){for(inti=0;i<arr.......
  • 一维数组
    一维数组一维数组是数组的一种形式,它包含单一维度的元素。创建数组int[]myArray=newint[10];//创建一个长度为10的整型数组遍历数组:可以使用循环结构(如for循环)来遍历数组中的每个元素。例如:javafor(inti=0;i<myArray.length;i++){System.out.println(my......
  • 多维度数组
    多维度数组多维度数组(也称为多维数组或数组的数组)是一种数据结构,它由多个一维数组组成,每个一维数组称为子数组。多维数组可以有任意数量的维度,但最常用的是二维和三维数组。基本概念维度:多维数组的每个“层次”称为一个维度。例如,二维数组有两个维度,三维数组有三个维度。子数......
  • 随机生成10个整数(1-100的范围)保存到数组,并倒序打印以及求平均值、求最大值和最大值
    1publicclassshuzu19{2//编写一个main方法3publicstaticvoidmain(String[]args){4/*5随机生成10个整数(1-100的范围)保存到数组6并倒序打印以及求平均值、求最大值和最大值的下标、7并查找里面是否有88......
  • 数组的算法
    数组的算法常见排序算法主要有:冒泡排序,选择排序,计数排序,基数排序,堆排序,桶排序,归并排序,希尔排序,插入排序,快速排序等等。冒泡排序(BubbleSort):两个for循环(外面的遍历数组,数组最后个元素不用遍历,因为要两两比较。里面的进行两两比较)通过重复遍历要排序的数列,比较每对相邻......
  • 数组
    数组概念数组是一种数据结构,用于存储固定大小的同类型元素序列。数组可以是一维的,也可以是多维的(例如二维、三维等)。声明数组:在Java中,声明数组需要指定元素的数据类型和数组的名称。例如,声明一个整型一维数组可以写作:int[]myArray;声明并分配内存空间,但不初始化元素:int[]......
  • JS性能评估的一般要求
    一般性能评估原则用户体验:响应时间:对于前端应用,用户界面通常需要在100毫秒内响应用户操作,以确保界面交互的流畅性。因此,任何操作若能在几毫秒内完成,并且不会阻塞主线程,则一般算作性能良好。流畅性:例如,对于需要保持流畅动画的应用,60帧每秒(每帧大约16.67毫秒)的刷新频率是一个......
  • js日期时间前端转换
    //转换列值//数据库表字段是datetime(2,7)transformColumnValue(scope,column){consttype=column.type;letvalue=scope.row[column.property.dataField.value];console.log('value',value,Date.parse(value),newDate(Date.parse(va......