最近项目遇到一个需求,前台获取到一个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中都可正确执行。
至此,问题解决,在此记录分享。