JS中json数组多字段排序方法(解决兼容性问题)(转)
前端对一个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数组多字段排序方法(解决兼容性问题)(转)的更多相关文章
- js中Array数组的属性和方法
这是我自己整理出来的一些关于Array数组的属性和方法,即查即用. 1.Array.length属性:数组的项数组,始终返回0或者更大的值. 2.instanceof操作符:value instanc ...
- JS 中检测数组的四种方法
今天和大家分享一下 JS 中检测是不是数组的四种方法,虽然篇幅不长,不过方法应该算是比较全面了. 1. instanceof 方法 instanceof 用于检测一个对象是不是某个类的实例,数组也是一 ...
- cocos2d JS 中的数组拼接与排序
var arrA = [];//创建三个局部变量的新数组 var arrB = []; var arrC = []; var newCards = this.MyMahjong;//创建一个新的局部变 ...
- js便利json 数组的方法
这篇文章主要介绍了JQuery遍历json数组的3种方法,本文分别给出了使用each.for遍历json的方法,其中for又分成两种形式,需要的朋友可以参考下 $(function () { var ...
- java:JavaScript3(innerHTML,post和get,单选框,多选框,下拉列表值得获取,JS中的数组,JS中的正则)
1.innerHTML用户登录验证: <!DOCTYPE> <html> <head> <meta charset="UTF-8"> ...
- js中的数组
上网查了一下,js中的数组包含的内容还真不少.先给出两个学习的链接: w3school链接:http://www.w3school.com.cn/js/js_obj_array.asp 博客园链接:h ...
- 前端学习之——js解析json数组
** 前端学习之——js解析json数组** 解析json数组即对JSONArray的遍历 一.对于标准的json数组如: var result=[{"flag":1," ...
- js中的数组遍历
js中的数组遍历是项目中经常用到的,在这里将几种方法做个对比. ! for循环:使用评率最高,也是最基本的一种遍历方式. let arr = ['a','b','c','d','e']; for (l ...
- JS 中深拷贝的几种实现方法
JS 中深拷贝的几种实现方法1.使用递归的方式实现深拷贝 //使用递归的方式实现数组.对象的深拷贝 function deepClone1(obj) { //判断拷贝的要进行深拷贝的是数组还是对象,是 ...
随机推荐
- 图解Linux进程间通信实现原理(1)
为Linux应用程序的开发人员,对Linux的进程间通信方式肯定是了如指掌,平时的开发中应该会大量的使用到.当你迅速的在键盘上按下[CTRL+C]终止掉一个正在运行中的命令时,你有没有仔细的思考过背后 ...
- adb的一些命令
adb pull <手机路径> <本机路径> 从手机中拉取信息到本地电脑上 adb push <本机路径> <手机路径> 从本地电脑推送信息到手机上
- 关于mysql数据库远程访问
mysql数据库安装默认为只能本地访问,若需远程连接需根据不同的操作系统做一些操作 Windows: 新装的mysql本地无法登录,显示为1045错误 mysql#1045(1045Access de ...
- Hadoop常用操作汇总
Hadoop Streaming示例程序(wordcount) run_hadoop_word_counter.sh $HADOOP_BIN streaming \ -input "${IN ...
- 手把手教你实现RecyclerView的下拉刷新和上拉加载更多
手把手教你实现RecyclerView的下拉刷新和上拉加载更多 版权声明:本文为博主原创文章,遵循CC 4.0 by-sa版权协议,转载请附上原文出处链接和本声明. 本文链接:https:// ...
- Markdown 图片的简单处理
0. 前言 最近写 md 文章的时候发现,在 markdown 里插入一些很长的图片的时候,会显得很不好看,于是去查了一下如何实现 markdown 里图片的并排显示,参考了各个博客内的内容和 mar ...
- PAT 甲级 1019 General Palindromic Number (进制转换,vector运用,一开始2个测试点没过)
1019 General Palindromic Number (20 分) A number that will be the same when it is written forwards ...
- 安装“Microsoft SQL Server 2014 Management Objects”时报错"Error Writing to file: Microsoft.SqlServer.XEvent.Linq.dll."
问题: 当安装的软件依赖Microsoft SQL Server 2014 Management Objects时,会把这个组件打进安装包里,但是在服务器上安装时却报如下错误: “Error Writ ...
- IDEA配置虚拟机内存
修改idea64.exe.vmoptions(64位电脑选择此文件) 一个例子,电脑内存8G,设置如下: -Xms1024m -Xmx4096m -XX:MaxPermSize=1024m -XX:R ...
- IDEA在引入Maven项目后Dependencies中在出现红色波浪线
解决方法: 移除pom.xml中相关依赖,再重新添加即可. 情况及具体解决方法如下: 1.在Maven Project中 Dependencies 出现红色波浪线,如图所示 2.查询本地仓库:jar包 ...