前端对一个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. maven的pom报错web.xml is missing and <failOnMissingWebXml> is set to true

    错误信息:web.xml is missing and <failOnMissingWebXml> is set to true 解决办法:https://blog.csdn.net/si ...

  2. 第11组 Alpha冲刺(4/6)

    第11组 Alpha冲刺(4/6)   队名 不知道叫什么团队 组长博客 https://www.cnblogs.com/xxylac/p/11884529.html 作业博客 https://edu ...

  3. mvc partialView断点调试问题

    mvc中的partialview 在前端f12调试时,默认看不到代码的.  在Js中加上debugger;  调试时会走到断点,多出个VM打头的局部视图页面.

  4. tortoiseGit did not exit cleanly (exit code 128)

    安装并配置好tortoiseGit之后,clone项目时,报错: git did not exit cleanly (exit code 128)如下图: 该问题解决方式: 1.确保Pageant启动 ...

  5. Android检测服务是否运行

    直接上代码: /** * 判断服务是否后台运行 * * @param context * Context * @param className * 判断的服务名字 * @return true 在运行 ...

  6. Mysql5.6.45配置安装

    ##1.1简介 因为之前电脑比较卡,自己重装了个系统,麻烦的就是装一些编程软件,但是自己吃饭的家伙也要会装啊,为了以后更方便的安装,自己总结一下步骤,进入正题 ##1.2资源下载 官方网站链接:    ...

  7. Build Telemetry for Distributed Services之Open Telemetry简介

    官网链接:https://opentelemetry.io/about/ OpenTelemetry is the next major version of the OpenTracing and  ...

  8. 阶段5 3.微服务项目【学成在线】_day04 页面静态化_24-页面预览-页面预览测试

    通过nginx转发到预览的地址 重启nginx 添加页面预览按钮 调整下列表的列的宽度

  9. webview的学习总结:

    1.1: Weview常见的坑 及其 内存泄漏的解决方案: WebView 1. WebView常见的坑 API 16之前版本存在远程代码执行漏洞,该漏洞源自于程序没有正确限制使用WebView.ad ...

  10. RESTful架构(Representational State Transfer资源表现层状态转换)

    1. 什么是REST REST全称是Representational State Transfer,中文意思是表述(编者注:通常译为表征)性状态转移. 它首次出现在2000年Roy Fielding的 ...