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 相关文章推荐
一段实现页面上的图片延时加载的js代码
Feb 11 Javascript
js URL参数的拼接方法比较
Feb 15 Javascript
JS中Iframe之间传值及子页面与父页面应用
Mar 11 Javascript
JavaScript闭包函数访问外部变量的方法
Aug 27 Javascript
微信WeixinJSBridge API使用实例
May 25 Javascript
关于javascript事件响应的基础语法总结(必看篇)
Dec 26 Javascript
整理关于Bootstrap导航的慕课笔记
Mar 29 Javascript
jQuery常用选择器详解
Jul 17 jQuery
JS中定位 position 的使用实例代码
Aug 06 Javascript
jQuery实现的事件绑定功能基本示例
Oct 11 jQuery
JS实现的抛物线运动效果示例
Jan 30 Javascript
vue定义全局变量和全局方法的方法示例
Aug 01 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的一个基础知识 表单提交
2011/07/04 PHP
php猜单词游戏
2015/09/29 PHP
详解WordPress中添加和执行动作的函数使用方法
2015/12/29 PHP
Yii2框架RESTful API 格式化响应,授权认证和速率限制三部分详解
2016/11/10 PHP
Laravel学习教程之model validation的使用示例
2017/10/23 PHP
JQUERY CHECKBOX全选,取消全选,反选方法三
2008/08/30 Javascript
js电信网通双线自动选择技巧
2008/11/18 Javascript
jquery 之 $().hover(func1, funct2)使用方法
2012/06/14 Javascript
jquery的live使用注意事项
2014/02/18 Javascript
JS实现AES加密并与PHP互通的方法分析
2017/04/19 Javascript
记录一次完整的react hooks实践
2019/03/11 Javascript
vue项目中仿element-ui弹框效果的实例代码
2019/04/22 Javascript
nest.js 使用express需要提供多个静态目录的操作方法
2019/10/24 Javascript
JavaScript闭包原理与用法学习笔记
2020/05/29 Javascript
Vue3配置axios跨域实现过程解析
2020/11/25 Vue.js
使用AutoJs实现微信抢红包的代码
2020/12/31 Javascript
element-ui封装一个Table模板组件的示例
2021/01/04 Javascript
[46:48]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第三局
2016/02/25 DOTA
python利用smtplib实现QQ邮箱发送邮件
2020/05/20 Python
浅谈python中str字符串和unicode对象字符串的拼接问题
2018/12/04 Python
python使用装饰器作日志处理的方法
2019/07/11 Python
使用Fabric自动化部署Django项目的实现
2019/09/27 Python
Python for i in range ()用法详解
2020/09/18 Python
PyCharm GUI界面开发和exe文件生成的实现
2020/03/04 Python
Python虚拟环境virtualenv创建及使用过程图解
2020/12/08 Python
CSS3教程(6):创建网站多列
2009/04/02 HTML / CSS
国外平面设计第一市场:99designs
2016/10/25 全球购物
英国办公家具网站:Furniture At Work
2019/10/07 全球购物
网络工程系信息安全技术专业大学生求职信
2013/10/22 职场文书
公司面试感谢信
2014/02/01 职场文书
项目申请汇报材料
2014/08/16 职场文书
银行员工犯错检讨书
2014/09/16 职场文书
合法的离婚协议书范本
2014/10/23 职场文书
计划生育工作总结2015
2015/04/03 职场文书
培训心得体会怎么写
2016/01/25 职场文书
股权投资协议书
2016/03/23 职场文书