• 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

  • 相关阅读:
    实现 (5).add(3).minus(2) 功能
    vue兄弟组件传值的三种方法
    Web渗透测试思路整理
    PHP代码审计基础
    简单易用,用Powershell劫持Windows系统快捷键
    javascript脚本混淆
    秒杀系统架构优化思路
    什么是OOP
    一分钟了解负载均衡的一切
    MVC
  • 原文地址:https://www.cnblogs.com/autoXingJY/p/11125421.html
Copyright © 2020-2023  润新知