最近项目遇到一个需求,前台获取到一个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中都可正确执行。

至此,问题解决,在此记录分享。