对象数组排序&&对象数组去除重复数据

最新推荐文章于 2022-02-22 17:25:14 发布

xiangwei_csdn

最新推荐文章于 2022-02-22 17:25:14 发布

阅读量486

点赞数

文章标签： javascipt 对象数组

本文链接：https://blog.csdn.net/xiangwei_csdn/article/details/76356616

版权

今天做了一个题：

把一个排行榜数据渲染到表格中，要求：1）按照手机号去重 2）按照积分进行排序，积分相同按照时间先后排序

解析：排行榜数据是一个对象数组，我们完成要求主要有两点：1）对对象数组按照属性值排序 2）去除对象数组中的重复数据

第一点，我们可以使用sort（）方法，Array.prototype.sort()方法接收一个参数---function(){},function提供两个参数,分别是进行比较的两个元素,
.如果比较的两个元素的返回值是1,则两元素交换位置,如果是0或-1,则不交换位置。

第二点，我们可以参考普通数组利用对象属性唯一的特点去重，即先将数组中的数据赋值成对象的属性，然后又将对象的属性变成数组。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>排行榜榜单</title>
		<style>
			table{
				width: 30%;
				margin:30px;
			}
			td{
				text-align:center;
				
			}
		</style>
	</head>
	<body>
		<table border="1" cellspacing="0" cellpadding="5" id="mytable">
			
			<caption>游戏榜单排行</caption>
			<tr>
				<th>手机号</th>
				<th>积分</th>
				<th>时间</th>
			</tr>
			<!--<tr>
				<td>15773134546</td>
				<td>60</td>
				<td>2107年3月</td>
			</tr>-->
		</table>
		<script>
			var stastic=[
			        {phone:15673134444,score:90,time:new Date(2017,6,6) },
			        {phone:15323475555,score:80,time:new Date(2017,6,1) },
			        {phone:15673134444,score:70,time:new Date(2017,6,2) },
			        {phone:15673134444,score:87,time:new Date(2017,6,3) },
			        {phone:15111166066,score:90,time:new Date(2017,6,4) },
			        ];
			var toDate=function(date){//添加一个将date转为yyyy-mm-dd的函数
				var year=date.getFullYear();
//               var year=2017;
				var month=date.getMonth()+1;
				var dd=date.getDate();
				return year+'年'+month+'月'+dd+'日';
			};
			 var by=function(x,y){
			 	if(x.score < y.score){
			 		return 1;
			 	}else if(x.score == y.score){
			 		  if(x.time > y.time ) {  //x的时间晚于y
			 		  	 return 1;
			 		  }else{
			 		  	return -1;
			 		  }
			 	}else{
			 		return -1;
			 	}
			 };
			 var arr=stastic.sort(by);  //arr是先根据积分，后根据时间排序后的数组
              ///根据手机号去重
             var obj={};
            for(var i=arr.length-1;i>=0;i--){  //注意顺序，因为想留下排行靠前的，所以倒着来
            	obj[arr[i].phone]=i;  //数组的手机号码是属性，数组的索引是值
            	
            }
            var list=[];//存放每个手机号对应的分最大的对象，但此时的顺序是乱的
            for(var key in obj){
            	list.push(arr[obj[key]]);
            }
            list=list.sort(by);//重新排序，存放最后的结果榜单
            去重完毕
             //渲染数据
            var mytable= document.getElementById('mytable');
            for(var j=0;j<list.length;j++){  
            	var data=list[j];
            	mytable.innerHTML+='<tr><td>'+data.phone+'</td><td>'+data.score+'</td><td>'+toDate(data.time)+'</td></tr>';
            }
		</script>
	</body>
</html>