关于前端排序的需求场景总结@慕课网原创_慕课网

在平时工作中，我们常常会有这样一种场景，我们需要在页面上展示一些商品，按照价格或者上架时间排序，价格相同时按照上架时间排序展示。面对这种需求，我们有一种做法是传一个排序字段的参数给后端同学，后端同学拿着这个参数拼装在sql里去数据库查询，然后将结果返回。但很多时候数据库里的数据短时间内没有任何增量，而页面也频繁有排序操作，我们就没有必要通过这种方式去实现，直接在前端实现group by和order by的功能既简单又方便。但如果说数据不断有实时更新，客户端排序显然就不适用了，比如直播中礼物排行榜的实时更新，就需要用到socket等实时通讯来实现礼物榜的实时更新了。

数组排序。

[1,5,3,9,6].sort(function(a,b){
        return a-b;        //return b-a
    })

数组对象排序(单字段)。

[{name:"name1",price:66},
 {name:"name3",price:99},
 {name:"name2",price:88}].sort(function(a,b){
    return a.price-b.price //return b.price-a.price
})

数组对象排序(多字段)

[{name:"name1",price:66,date:21},
{name:"name3",price:88,date:5},
{name:"name2",price:88,date:1}].sort(function(a,b){
if(a.price===b.price){        //价格相同时则按照时间排序
    return a.date-b.date
}else{
    return a.price-b.price
}
})
也可参考[thenBy][https://github.com/Teun/thenBy.js]
data.sort(
firstBy(function (a,b) { return a.price-b.price })
.thenBy(function (a, b) { return a.date-b.date})
);

hash对象排序

{"2015":[{},{}],
 "2016":[{},{}],
 "2013":[{},{}]
}
先拆分后还原，先把所有的key放在数组里排序后，根据结果生成新的hash对象。

group by实现

[{"date":2015,"from":"北京","to":"上海"},{"date":2015,"from":"上海","to":"天津"},
{"date":2015,"from":"天津","to":"上海"},{"date":2015,"from":"上海","to":"北京"}]
需求:根据数据统计不同地方的轨迹次数并从排序。
步骤:1.遍历数据得到所有地点
  var city={};//定义{}利用key键的唯一性对地点进行去重，去重的同时统计重复的次数。
    items.forEach(function(v,k){
        var from=v.from;
        var to=v.to;
        if(city[from]&&city[from].num>0){
            city[from].num++
        }else{
            city[from]={num:1}
        }
        if(city[to]&&city[to].num>0){
            city[to].num++
        }else{
            city[to]={num:1}
        }
    })
 2.得到city={"北京":{num:2},"上海":{}num:4}....}
 3.然后根据hash对象排序的方法排序。

总结

排序的算法有很多很多，比如非常熟知的冒泡排序，快速排序，插入排序，递归等等。本文涉及的javascript中原生的Array.prototype.sort()方法在各个浏览器中实现的方式也是不尽相同的，想要深入了解可以查阅相关资料文档。

关于前端排序的需求场景总结原创

总结