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) { //判断拷贝的要进行深拷贝的是数组还是对象,是 ...
随机推荐
- Java并发指南12:深度解读 java 线程池设计思想及源码实现
深度解读 java 线程池设计思想及源码实现 转自 https://javadoop.com/2017/09/05/java-thread-pool/hmsr=toutiao.io&utm_ ...
- 冲刺阶段——Day2
[今日进展] 完成黄金点游戏的算法与代码架构. 使用文字界面完成任务 码云链接:https://gitee.com/jxxydwt1999/20175215-java/blob/master/Gold ...
- ArcGIS超级工具SPTOOLS-线封闭,点集转面
一.线封闭 操作视频:https://weibo.com/tv/v/HvyvbAxKh?fid=1034:4375207666991674 将末端不闭合线,自动生成闭合的线,效果如下 原始线:末端不闭 ...
- VS Code文本编辑快捷操作(2)
1. 光标移动 移动光标最常用的就是方向键,但是方向键每次只能把光标移动一个位置,可以说是一种相对低效的方式.下面介绍针对单词.行.代码块.整个文档等多种光标移动方式. 1.1 ...
- android studio的安装和配置及解决uiautomatorviewer报错
参考博客:https://www.cnblogs.com/singledogpro/p/9551841.html 安装Android Studio 走了不少弯路,现在整理出来,仅当备忘使用. 首先要先 ...
- Facebook币Libra学习-4.新的智能合约语言Move入门
Move是一种新的编程语言,旨在为Libra Blockchain提供安全可编程的基础.Libra Blockchain中的帐户是任意数量的Move资源和Move模块的容器.提交给Libra Bloc ...
- 实用的在线预览数据字典的工具(php编写)
前言 无论是刚接手新项目,或者是维护老项目,有一个方便的数据字典可用是最棒哒! 本文是我为了方便使用数据字典而写的代码. 代码无版权,随便使用. 拷贝代码后,只需修改数据库名,主机,用户名,密码,开箱 ...
- LeetCode_13. Roman to Integer
13. Roman to Integer Easy Roman numerals are represented by seven different symbols: I, V, X, L, C, ...
- ubuntu 18.04设置开机自动挂载移动硬盘
首先在命令行执行df -h指令,可以看到如下结果: zifeiy@zifeiy-PC1:~$ df -h 文件系统 容量 已用 可用 已用% 挂载点 udev 964M 0 964M 0% /dev ...
- Thinking - 一些有效阅读的方法
有策略,忌盲目.讲方法,别蛮干! 1- 阅读方法 1.1 做好眼前事 排除其他事项干扰,营造适合阅读的状态和环境,专注地投入阅读之中. 如果被一堆乱糟糟的事情烦扰,身心处于一个疲惫的状态,必然无法保持 ...