前端对一个json数组进行排序,用户需要动态的根据自己的选择来对json数据进行排序。

由于后台表设计问题所以不能用sql进行排序,这里用到了js的sort方法。

如果对单字段排序,那么很简单,一个sort就搞定。对多字段排序时需要用到for,而且需要对在sort中对任意两个元素进行比较,如果前一个字段相同那么才需要进行下一个字段的排序;反之则返回 0。秉承此思路编写代码如下:

var orderArr = sortObjectArray(dataObj,['path_cate','path_ver','path_id'],"asc");
function sortObjectArray(objArr, keyArr, type) {
if (type != undefined && type != 'asc' && type != 'desc') {
return 'error';
}
var order = 1;
if (type != undefined && type == 'desc') {
order = -1;
}
var key = keyArr[0];
objArr.sort(function (objA, objB) {
if (objA[key] > objB[key]) {
return order;
} else if (objA[key] < objB[key]) {
return 0 - order;
} else {
return 0;
}
})
for (var i = 1; i < keyArr.length; i++) {
var key = keyArr[i];
objArr.sort(function (objA, objB) {
for (var j = 0; j < i; j++) {
if (objA[keyArr[j]] != objB[keyArr[j]]) {
return 0;
}
}
if (objA[key] > objB[key]) {
return order;
} else if (objA[key] < objB[key]){
return 0 - order;
} else {
return 0;
}
})
}
return objArr;
}

在进行代码测试的时候遇到了一个问题,发现每次执行任务,json数组的顺序都会有变化。检查几遍自认为代码没有问题,百度时突然想到chrome的sort方法会有一个“bug”,那就是如果元素相同,那么排序会乱掉而不是保持原有顺序。用上面代码在firefox中测试果然没有问题。

知道问题所在就想如何解决此问题,网上的各路大神都提供了自己的想法,受到启发,如果是元素相同那么只要保持原排序即可。所以就有了如下改良代码:

function sortObjectArray(objArr, keyArr, type) {
for (var x = 0; x < objArr.length; x++) {
objArr[x].oldIndex = x;
}
if (type != undefined && type != 'asc' && type != 'desc') {
return 'error';
}
var order = 1;
if (type != undefined && type == 'desc') {
order = -1;
}
var key = keyArr[0];
objArr.sort(function (objA, objB) {
if (objA[key] > objB[key]) {
return order;
} else if (objA[key] < objB[key]) {
return 0 - order;
} else {
if (objA.oldIndex > objB.oldIndex) {
return order;
} else if (objA.oldIndex < objB.oldIndex) {
return 0 - order;
} else { return 0;
}
}
}) for (var i = 1; i < keyArr.length; i++) {
var key = keyArr[i];
for (var y= 0; y < objArr.length; y++) {
objArr[y].oldIndex = y;
}
objArr.sort(function (objA, objB) {
for (var j = 0; j < i; j++) {
if (objA[keyArr[j]] != objB[keyArr[j]]) {
if (objA.oldIndex > objB.oldIndex) {
return order;
} else if (objA.oldIndex < objB.oldIndex){
return 0 - order;
} else {
return 0;
}
}
}
if (objA[key] > objB[key]) {
return order;
} else if (objA[key] < objB[key]){
return 0 - order;
} else {
if (objA.oldIndex > objB.oldIndex) {
return order;
} else if (objA.oldIndex < objB.oldIndex){
return 0 - order;
} else {
return 0;
}
}
})
}
return objArr;
}

经过测试,此代码在chrome和firefox中都可正确执行。

至此,问题解决,在此记录分享。

转自 https://blog.csdn.net/windon12345/article/details/81075492

JS中json数组多字段排序方法(解决兼容性问题)(转)的更多相关文章

  1. js中Array数组的属性和方法

    这是我自己整理出来的一些关于Array数组的属性和方法,即查即用. 1.Array.length属性:数组的项数组,始终返回0或者更大的值. 2.instanceof操作符:value instanc ...

  2. JS 中检测数组的四种方法

    今天和大家分享一下 JS 中检测是不是数组的四种方法,虽然篇幅不长,不过方法应该算是比较全面了. 1. instanceof 方法 instanceof 用于检测一个对象是不是某个类的实例,数组也是一 ...

  3. cocos2d JS 中的数组拼接与排序

    var arrA = [];//创建三个局部变量的新数组 var arrB = []; var arrC = []; var newCards = this.MyMahjong;//创建一个新的局部变 ...

  4. js便利json 数组的方法

    这篇文章主要介绍了JQuery遍历json数组的3种方法,本文分别给出了使用each.for遍历json的方法,其中for又分成两种形式,需要的朋友可以参考下 $(function () { var ...

  5. java:JavaScript3(innerHTML,post和get,单选框,多选框,下拉列表值得获取,JS中的数组,JS中的正则)

    1.innerHTML用户登录验证: <!DOCTYPE> <html> <head> <meta charset="UTF-8"> ...

  6. js中的数组

    上网查了一下,js中的数组包含的内容还真不少.先给出两个学习的链接: w3school链接:http://www.w3school.com.cn/js/js_obj_array.asp 博客园链接:h ...

  7. 前端学习之——js解析json数组

    ** 前端学习之——js解析json数组** 解析json数组即对JSONArray的遍历 一.对于标准的json数组如: var result=[{"flag":1," ...

  8. js中的数组遍历

    js中的数组遍历是项目中经常用到的,在这里将几种方法做个对比. ! for循环:使用评率最高,也是最基本的一种遍历方式. let arr = ['a','b','c','d','e']; for (l ...

  9. JS 中深拷贝的几种实现方法

    JS 中深拷贝的几种实现方法1.使用递归的方式实现深拷贝 //使用递归的方式实现数组.对象的深拷贝 function deepClone1(obj) { //判断拷贝的要进行深拷贝的是数组还是对象,是 ...

随机推荐

  1. cesium billboard跨域问题1

    群里小伙伴问道使用billboard加载图片时出现跨域问题,一般认为在服务器端设置 Access-Control-Allow-Origin: * 例如用tomcat发布图片服务,可以这样设置:http ...

  2. 一文教你读懂Python中的异常信息

    正文共:11813 字 2 图 预计阅读时间: 30 分钟 原文:https://realpython.com/python-traceback/ 译者:陈祥安 原文有所改动. 在写 Python 代 ...

  3. 《梁宁·产品思维30讲》课程学习笔记(内含全套音频+ppt资料

    科技进步.产品迭代.公司演化.组织变迁……不变的是用户的情绪和人性. 那些信奉“用户驱动”的人,从普通人变成了行业大佬,建立了自己的世界.乔布斯.马化腾.马云.雷军.张小龙.周鸿祎.傅盛……这些改变世 ...

  4. Flume-数据流监控 Ganglia

    Ganglia 由 gmond.gmetad 和 gweb 三部分组成. gmond(Ganglia Monitoring Daemon)是一种轻量级服务,安装在每台需要收集指标数据的节点主机上.使用 ...

  5. 客户端配置代理服务实现yum上外网

    vi  /etc/profile http_proxy=http://172.20.188.193:3128/https_proxy=https://172.20.188.193:3128/expor ...

  6. vue单页面项目架构方案

    这里的架构方案是基于vue-cli2生成的项目应用程序产生的,是对项目应用程序或者项目模板的一些方便开发和维护的封装.针对单页面的解决方案. 主要有四个方面: 一,不同环境下的分别打包 主要是测试环境 ...

  7. UML期末复习题——2.4:Domain Model

    第四题:领域模型 重要概念: 1. 领域模型:是对领域内的概念类或现实世界中对象的可视化表示.领域模型也称为概念模型,领域对象模型和分析对象模型. 2. 应用UML表示法,领域模型被描述为一组没有定义 ...

  8. 一个很好的开源视频播放器GiraffePlayer2(支持rtmp,rtsp,http,https)

    一个很好的开源视频播放器GiraffePlayer2(支持rtmp,rtsp,http,https) https://github.com/tcking/GiraffePlayer2 GiraffeP ...

  9. kotlin函数的参数和返回值

    fun main(arg: Array<String>) { val asList = asList(, , , , , ) println(asList) } fun <T> ...

  10. tomcat配置使用log4j管理日志

    从tomcat官网下载和tomcat对应的tomcat-juli.jar和tomcat-juli-adapters.jar,从log4j官网下载log4j的jar包(我用的是log4j-1.2.17. ...