前端对一个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