JavaScript实现多层级数组排序：从两层到三层的算法演进

作者：纸飞机时间：2026-10-24 07:04:26浏览：366

本文详细解析了JavaScript中针对对象数组的多层级排序实现。通过提取唯一值、嵌套循环及中间数组拼接的方式，逐步实现了基于soNumber、item及amount的二维与三维排序。文章提供了完整的两层与三层排序代码示例，并探讨了代码复杂度随层级增加而上升的问题，为处理复杂业务数据排序提供了实用参考。

引言

排序操作在编程领域极为常见，无论是初学者学习编程语言，还是实际项目研发，几乎都会涉及各类排序场景。本文旨在分享一个在实际开发中遇到的排序难题。该问题初期耗费了较多时间排查，随着技术积累与实践经验的丰富才最终解决。由于搜索关键词可能不够精准或其他原因，网络上类似解决方案较少，特此记录分享。

数据结构与需求分析


var arr = [ {
"soNumber" : "52085848",
"item" : "313281",
"amount" : "3"
}, {
"soNumber" : "52085846",
"item" : "313321",
"amount" : "10"
}, {
"soNumber" : "52085848",
"item" : "313330",
"amount" : "5"
}, {
"soNumber" : "52085846",
"item" : "313321",
"amount" : "4"
}, {
"soNumber" : "52085843",
"item" : "313338",
"amount" : "13"
}, {
"soNumber" : "52085843",
"item" : "422784",
"amount" : "108"
} ]

如前文所示，数据结构为数组形式，每个元素均为对象。其中，soNumber字段代表采购订单编号，item字段代表物料信息。核心需求是：首先对soNumber（采购订单编号）进行升序排列；其次，在soNumber相同的组内，需进一步对item（物料编号）进行升序排列。

两层排序实现方案

解决思路如下：

第一步，提取所有soNumber并去重，按升序排列生成一个订单号数组；第二步，以该订单号数组作为外层循环，原始数据数组作为内层循环进行遍历；第三步，引入一个中间数组，用于存储当前订单号下按item升序排列的物料数据；第四步，将所有中间数组的元素依次追加到新数组中，完成排序。

具体实现代码如下：


/**
   * 两层排序算法
   */
  function multilayerSorting() {
   var arr = [ {
    "soNumber" : "52085848",
    "item" : "313281",
    "amount" : "3"
   }, {
    "soNumber" : "52085846",
    "item" : "313321",
    "amount" : "10"
   }, {
    "soNumber" : "52085848",
    "item" : "313330",
    "amount" : "5"
   }, {
    "soNumber" : "52085846",
    "item" : "313321",
    "amount" : "4"
   }, {
    "soNumber" : "52085843",
    "item" : "313338",
    "amount" : "13"
   }, {
    "soNumber" : "52085843",
    "item" : "422784",
    "amount" : "108"
   } ]
   // 整理soNumber成数组,并且从小到大排列
   var soData = getSoData(arr);
   var newData = [];
   for ( var i in soData) {
    var midData = []
    for ( var j in arr) {
     if (soData[i] == arr[j].soNumber) {
      midData.push(arr[j]);
     }
    }
    midData = midData.sort(function(obj1, obj2) {
     var val1 = Number(obj1.item);
     var val2 = Number(obj2.item);
     if (val1 < val2) {
      return -1;
     } else if (val1 > val2) {
      return 1;
     } else {
      return 0;
     }
    });
    log.debug('midData', midData);
    for ( var m in midData) {
     newData.push(midData[m]);
    }
   }
   log.debug('newData', newData);
   return newData;
  }
  function getSoData(arr) {
   var soData = [];
   for ( var i in arr) {
    if (soData.indexOf(arr[i].soNumber) == -1) {
     soData.push(arr[i].soNumber);
    }
   }
   soData.sort();
   log.debug('soData', soData);
   return soData;
  }<br>

排序后的数组截图展示如下：

对比排序前后的数组，可以看到soNumber和item两个字段已按预期顺序排列。然而，观察圈出部分可以发现，在soNumber和item均相同的情况下，amount（金额）字段并未排序。若需进一步实现amount字段的有序排列，该如何处理？

三层排序实现

针对上述问题，扩展实现三层排序的代码如下：


/**
    * 三层排序算法
    */
   function multilayerSorting() {
    var arr = [ {
     "soNumber" : "52085848",
     "item" : "313281",
     "amount" : "3"
    }, {
     "soNumber" : "52085846",
     "item" : "313321",
     "amount" : "10"
    }, {
     "soNumber" : "52085848",
     "item" : "313330",
     "amount" : "5"
    }, {
     "soNumber" : "52085846",
     "item" : "313321",
     "amount" : "4"
    }, {
     "soNumber" : "52085843",
     "item" : "313338",
     "amount" : "13"
    }, {
     "soNumber" : "52085843",
     "item" : "422784",
     "amount" : "108"
    } ]
    // 整理soNumber成数组,并且从小到大排列
    var soData = getSoData(arr);
    var newData = [];
    for ( var i in soData) {
     var midData = []
     for ( var j in arr) {
      if (soData[i] == arr[j].soNumber) {
       midData.push(arr[j]);
      }
     }
     midData = midData.sort(function(obj1, obj2) {
      var val1 = Number(obj1.item);
      var val2 = Number(obj2.item);
      if (val1 < val2) {
       return -1;
      } else if (val1 > val2) {
       return 1;
      } else {
       return 0;
      }
     });
     var itemData = []
     for ( var m in midData) {
      if (itemData.indexOf(midData[m].item) == -1) {
       itemData.push(midData[m].item)
      }
     }
     for ( var n in itemData) {
      var midData1 = [];
      for ( var x in midData) {
       if (midData[x].item == itemData[n]) {
        midData1.push(midData[x]);
       }
      }
      midData1 = midData1.sort(function(obj1, obj2) {
       var val1 = Number(obj1.amount);
       var val2 = Number(obj2.amount);
       if (val1 < val2) {
        return -1;
       } else if (val1 > val2) {
        return 1;
       } else {
        return 0;
       }
      });
      for ( var y in midData1) {
       newData.push(midData1[y]);
      }
     }
    }
    log.debug('newData', newData);
    return newData;
   }
   function getSoData(arr) {
    var soData = [];
    for ( var i in arr) {
     if (soData.indexOf(arr[i].soNumber) == -1) {
      soData.push(arr[i].soNumber);
     }
    }
    soData.sort();
    log.debug('soData', soData);
    return soData;
   }

排序结果展示：

从结果可见，数据已依次按照soNumber、item、amount三个字段从小到大进行了排序。

思考与探讨

从两层排序过渡到三层排序，可以明显感觉到代码逻辑日益复杂。若需实现四层或更多维度的排序，代码将变得更加繁琐。因此，探索更高效、更简洁的多维度、多层次排序方法显得尤为重要。


var arr = [ {
"soNumber" : "52085848",
"item" : "313281",
"amount" : "3"
}, {
"soNumber" : "52085846",
"item" : "313321",
"amount" : "10"
}, {
"soNumber" : "52085848",
"item" : "313330",
"amount" : "5"
}, {
"soNumber" : "52085846",
"item" : "313321",
"amount" : "4"
}, {
"soNumber" : "52085843",
"item" : "313338",
"amount" : "13"
}, {
"soNumber" : "52085843",
"item" : "422784",
"amount" : "108"
} ]

总结

至此，关于JavaScript中多层次排序算法的介绍完毕。如需了解更多相关JS多层次排序内容，欢迎查阅本站历史文章或继续阅读后续系列文章。感谢大家的支持！

作者最新文章

core-js v2 迁移到 v3 的破坏性变更与注意事项

2026-11-05 18:10:26

JavaScript中%是取余还是取模？与Math.floor实现的区别

2026-11-05 18:09:12

React中怎么不可变地删除JS数组元素

2026-11-05 18:06:01

JS动态构建复杂嵌套JSON对象的方法

2026-11-05 15:41:52

JS负数取余为什么是负数？详解余数与模运算区别

2026-11-05 13:34:41