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 利用className得到对象的实现代码
Nov 15 Javascript
js 输出内容到新窗口具体实现代码
May 31 Javascript
jquery选择器-根据多个属性选择示例代码
Oct 21 Javascript
多引号嵌套的变量命名的问题
May 09 Javascript
jQuery中insertAfter()方法用法实例
Jan 08 Javascript
基于jQuery实现最基本的淡入淡出效果实例
Feb 02 Javascript
JQuery CheckBox(复选框)操作方法汇总
Apr 15 Javascript
JQuery点击事件回到页面顶部效果的实现代码
May 24 Javascript
使用Bootstrap打造特色进度条效果
May 02 Javascript
基于vue和react的spa进行按需加载的实现方法
Sep 29 Javascript
详解express使用vue-router的history踩坑
Jun 05 Javascript
OpenLayer3自定义测量控件MeasureTool
Sep 28 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
我的论坛源代码(十)
2006/10/09 PHP
Egret引擎开发指南之发布项目
2014/09/03 Javascript
js选项卡的实现方法
2015/02/09 Javascript
JavaScript中常见获取元素的方法汇总
2015/03/04 Javascript
js实现适用于素材网站的黑色多级菜单导航条效果
2015/08/24 Javascript
jQuery实现点击小图显示大图代码分享
2015/08/25 Javascript
js面向对象之常见创建对象的几种方式(工厂模式、构造函数模式、原型模式)
2015/11/09 Javascript
JQuery.Ajax()的data参数类型实例详解
2015/11/20 Javascript
老生常谈js动态添加事件--- 事件委托
2016/07/19 Javascript
只要1K 纯JS脚本送你一朵3D红色玫瑰
2016/08/09 Javascript
jQuery+HTML5实现弹出创意搜索框层
2016/12/29 Javascript
nodejs超出最大的调用栈错误问题
2017/12/27 NodeJs
bootstrap-table.js扩展分页工具栏(增加跳转到xx页)功能
2017/12/28 Javascript
Vue脚手架的简单使用实例
2018/07/10 Javascript
使用svg实现动态时钟效果
2018/07/17 Javascript
Vue监听数据渲染DOM完以后执行某个函数详解
2018/09/11 Javascript
JavaScript实现随机点名器实例详解
2019/05/07 Javascript
Vue拖拽组件列表实现动态页面配置功能
2019/06/17 Javascript
js实现验证码功能
2020/07/24 Javascript
[48:27]EG vs Liquid 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
使用Django的模版来配合字符串翻译工作
2015/07/27 Python
通过实例浅析Python对比C语言的编程思想差异
2015/08/30 Python
python2.7读取文件夹下所有文件名称及内容的方法
2018/02/24 Python
python实现大文本文件分割
2019/07/22 Python
Python可变参数会自动填充前面的默认同名参数实例
2019/11/18 Python
Python如何实现远程方法调用
2020/08/07 Python
python中doctest库实例用法
2020/12/31 Python
HTML5 File接口在web页面上使用文件下载
2017/02/27 HTML / CSS
开发人员所需要知道的HTML5性能分析面面观
2012/07/05 HTML / CSS
为什么group by 和order by会使查询变慢
2014/05/16 面试题
文员个人的求职信范文
2013/09/26 职场文书
《夏夜多美》教学反思
2014/02/17 职场文书
大型会议接待方案
2014/03/01 职场文书
入党政审材料范文
2014/12/24 职场文书
导游词之江南园林狮子林
2019/09/16 职场文书
深入探讨opencv图像矫正算法实战
2021/05/21 Python