您的位置：首页 > 其它

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

2017-07-29 20:22 811 查看

今天做了一个题：

把一个排行榜数据渲染到表格中，要求：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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航