JS中多层次排序算法的实现代码


Posted in Javascript onJanuary 06, 2021

引子

排序在编程中随处可见,从开始学习变成,到项目开发,基本上或多或少会遇到一些排序问题,接下来我要写的是我在实际开发终于到的一个排序问题,一开始卡了我很久,后面随着知识积累,实践变多才解决掉了,不知道是不是我搜索关键字不对,还是其他原因,百度也没有找到这方面的内容。

数据结构和需求

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从小到大排序,最后按顺序将所有的中间数组元素放入新数组中。

实现代码:

/**
   * 两层排序算法
   */
  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>

最终数组截图:

JS中多层次排序算法的实现代码 

对比一开始的数组和排序后的数组确实实现了按照soNumber和item两个部分顺序排列,但是也可以看到圈出来的部分的amount金额在相同的soNumber和item下并没有顺序,如果要实现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;
   }

实现结果 

JS中多层次排序算法的实现代码 

从结果可以看出实现了依次按照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"
} ]

总结

到此这篇关于JS中多层次排序算法的文章就介绍到这了,更多相关JS多层次排序算法内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript 装载iframe子页面,自适应高度
Mar 20 Javascript
javascript 原型继承介绍
Aug 30 Javascript
Javascript Throttle &amp; Debounce应用介绍
Mar 19 Javascript
Ajax异步提交表单数据的说明及方法实例
Jun 22 Javascript
js 实现 input type=&quot;file&quot; 文件上传示例代码
Aug 07 Javascript
js返回上一页并刷新的多种实现方法
Feb 26 Javascript
Node.js中对通用模块的封装方法
Jun 06 Javascript
jQuery Mobile弹出窗、弹出层知识汇总
Jan 05 Javascript
javascript运动效果实例总结(放大缩小、滑动淡入、滚动)
Jan 08 Javascript
浅析JSONP技术原理及实现
Jun 08 Javascript
vue中利用iscroll.js解决pc端滚动问题
Feb 15 Javascript
three.js 制作动态二维码的示例代码
Jul 31 Javascript
如何使用原生Js实现随机点名详解
Jan 06 #Javascript
详解微信小程序「渲染层网络层错误」的解决方法
Jan 06 #Javascript
JavaScript 中的六种循环方法
Jan 06 #Javascript
JavaScript的一些小技巧分享
Jan 06 #Javascript
详解Vue2的diff算法
Jan 06 #Vue.js
如何利用JavaScript编写一个格斗小游戏
Jan 06 #Javascript
vuex的使用步骤
Jan 06 #Vue.js
You might like
php checkbox复选框值的获取与checkbox默认值输出方法
2010/05/15 PHP
table标签的结构与合并单元格的实现方法
2013/07/24 PHP
基于ThinkPHP5.0实现图片上传插件
2017/09/25 PHP
php+iframe 实现上传文件功能示例
2020/03/04 PHP
JS实现打开本地文件或文件夹
2021/03/09 Javascript
JS获取scrollHeight问题想到的标准问题
2007/05/27 Javascript
javascript实现面向对象类的功能书写技巧
2010/03/07 Javascript
javascript 防止刷新,后退,关闭
2010/08/07 Javascript
javascript实现促销倒计时+fixed固定在底部
2013/09/18 Javascript
js实现文本框中焦点在最后位置
2014/03/04 Javascript
通过点击jqgrid表格弹出需要的表格数据
2015/12/02 Javascript
基于JS实现Android,iOS一个手势动画效果
2016/04/27 Javascript
JS实现兼容各种浏览器的高级拖动方法完整实例【测试可用】
2016/06/21 Javascript
jQuery插件WebUploader实现文件上传
2016/11/07 Javascript
Vue.js常用指令之循环使用v-for指令教程
2017/06/27 Javascript
微信小程序实现验证码获取倒计时效果
2018/02/08 Javascript
vue中使用cropperjs的方法
2018/03/01 Javascript
浅谈Angularjs中不同类型的双向数据绑定
2018/07/16 Javascript
微信小程序如何修改本地缓存key中单个数据的详解
2019/04/26 Javascript
vue v-for 点击当前行,获取当前行数据及event当前事件对象的操作
2020/09/10 Javascript
解决vue打包 npm run build-test突然不动了的问题
2020/11/13 Javascript
python动态加载变量示例分享
2014/02/17 Python
python中利用Future对象异步返回结果示例代码
2017/09/07 Python
python入门教程 python入门神图一张
2018/03/05 Python
Centos7 Python3下安装scrapy的详细步骤
2018/03/15 Python
padas 生成excel 增加sheet表的实例
2018/12/11 Python
django多文件上传,form提交,多对多外键保存的实例
2019/08/06 Python
Python命名空间namespace及作用域原理解析
2020/06/05 Python
HTML5移动端开发遇见的东西
2019/10/11 HTML / CSS
师说教学反思
2014/02/07 职场文书
入党积极分子自我批评思想汇报
2014/10/10 职场文书
秦始皇兵马俑导游词
2015/02/02 职场文书
答辩状格式范本
2015/05/22 职场文书
2015中学教学工作总结
2015/07/22 职场文书
大学生活感想
2015/08/10 职场文书
redis击穿 雪崩 穿透超详细解决方案梳理
2022/03/17 Redis