JS桶排序的简单理解与实现方法示例


Posted in Javascript onNovember 25, 2019

本文实例讲述了JS桶排序的简单理解与实现方法。分享给大家供大家参考,具体如下:

桶排序,利用编号分组存储数字,再利用编号合并分组的一种算法排序。

举个易于理解的例子:

一组数字,9,3,4,0,2,8,5,1,7,6,11,10,18,15,17,12,16,13,19,14

我们把这组数字分组编号成10个桶装起来,但怎么编号分组呢?

这里我们利用数字范围来对数字进行分桶。首先,最大数减去最小数,获取这组数字的取值范围,然后,我们让这个取值范围除以桶数,获取一个桶的取值范围,既然知道一个桶的取值范围,那么,通过对比每个数字占用多少个桶,我们就可以获取这个数字所对应的桶的编号了。(换一句话说,就是每个数字占用多少个取值范围,这里的桶其实就是数字的取值范围的具体化东西)

利用上面的例子做解释:

上面的最大值是19,最小值是0,所以这组数的取值范围是:19-0=19。

我们要用10个桶来分装这组数字,则一个桶的取值范围是:19 / 10 = 1.9。

所以,一个桶的取值范围就是:1.9。

知道了这些之后,我们怎么知道每个数字所对应的桶的编号呢?

我们让每个数字减去最小值再除以一个桶的取值范围就可以获得这个数字所对应的桶编号了,为什么这么说呢?因为我们就是利用数值范围来分桶的,所以理所当然的也是获取每个数字的取值范围来分桶的编号,而最小值就是我们的取值标准,当然是要每个数字都减去它才能准确的获取每个数的取值范围了。

根据上面的解释,那么,第一个数字的桶编号就是:(9-0) / 1.9 = 4.7368·······

当然为了确保编号为整数,我们必须给编号取整,这里我们是向上取整,所以第一个数:9的桶编号就是5啦。

其他的数字获取桶编号都是同样的原理,这里就不再重复叙述了。

下面是js程序的实现:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  <title>桶排序</title>
  <meta name="keywords" content="关键字列表" />
  <meta name="description" content="网页描述" />
  <link rel="stylesheet" type="text/css" href="" />
  <style type="text/css"></style>
  <script type="text/javascript">
  //桶排序,参数数组,桶的个数,这里用数组模拟桶
  var cask=function (arr,caskCount){
    //不是数组,返回false
    if(toString.call(arr) != '[object Array]'){
      return false;
    }
    //获取数组的长度
    var len = arr.length;
    if(len <=1){
      return arr;//长度小于等于1不用排序
    }
    var list  = [],//装桶的桶,用它来控制存储桶的编号
      result = [],//返回的结果
      max  = arr[0],
      min  = arr[0];
    //默认桶的个数为10
    var  caskCount = parseInt(caskCount) > 0 ? parseInt(caskCount) : 10;
    //获取数组的最大值和最小值
    for(var i=1;i<len-1;i++){
       max = arr[i] <= max ? max : arr[i] ; 
       min = arr[i] >= min ? min : arr[i] ; 
    }
    //分成caskCount个桶,桶所占用的范围
    var range = (max - min) / caskCount;
    for(var i=0;i<len;i++){
      //桶的数值减去最小数 min 获取的是桶占用的范围,再除以一个桶的范围,就是获取对应的桶编号
      var index = Math.floor((arr[i] - min) / range);
      //桶里是否有值,有值则进行排序
      if(list[index]){//用数组模拟桶
        //获取桶最后一个值的下标 
        var k=list[index].length - 1;
        //桶最后的值大于要插进来的值,所以要把这个值插到桶的前面去,但不知道这个值要插入到前面的哪个位置,所以,就只能对比排序了
          //对桶进行排序
          while(k >=0 && list[index][k] > arr[i]){
            //桶前面的数字放到后面去
            list[index][k+1] = list[index][k];//第一个k+1为新增的桶
            //小的提前一个位置
            //list[index][k] = arr[i];
            k--;
          }
        //不用排序的,直接加在桶的最后面
        list[index][k+1] = arr[i];
      }else{
      //没有值则生成桶,并把值放到对应的桶中
        list[index]=[];
        list[index][0]=arr[i];
      }
    }
    //合并桶
    var n=0;
    while(n <= caskCount){
      if(list[n]){
        result = result.concat(list[n]);
      }
      n++;
    }
    return result;
  }
  var arr=[8,39,400,500,3,4,20,44,440];
  alert(cask(arr,10));
  //alert(parseInt(-1) ? parseInt(-1) : 1);
  </script>
</head>
<body>
</body>
</html>

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

Javascript 相关文章推荐
JavaScript 原型学习总结
Oct 29 Javascript
JavaScript定时显示广告代码分享
Mar 02 Javascript
JavaScript DSL 流畅接口(使用链式调用)实例
Mar 15 Javascript
遮罩层点击按钮弹出并且具有拖动和关闭效果(两种方法)
Aug 20 Javascript
jqueryMobile 动态添加元素,展示刷新视图的实现方法
May 28 Javascript
jQuery实现对象转为url参数的方法
Jan 11 Javascript
node.js的exports、module.exports与ES6的export、export default深入详解
Oct 26 Javascript
Vuejs实现购物车功能
Nov 05 Javascript
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
Jan 18 jQuery
vue移动端路由切换实例分析
May 14 Javascript
node.js部署之启动后台运行forever的方法
May 23 Javascript
关于layui 实现点击按钮添加一行(方法渲染创建的table)
Sep 29 Javascript
JavaScript交换两个变量方法实例
Nov 25 #Javascript
three.js利用gpu选取物体并计算交点位置的方法示例
Nov 25 #Javascript
基于javascript实现贪吃蛇小游戏
Nov 25 #Javascript
JavaScript This指向问题详解
Nov 25 #Javascript
简单了解JavaScript sort方法
Nov 25 #Javascript
vue使用swiper实现中间大两边小的轮播图效果
Nov 24 #Javascript
通过GASP让vue实现动态效果实例代码详解
Nov 24 #Javascript
You might like
js限制textarea每行输入字符串长度的代码
2012/10/31 Javascript
jQuery 遍历-nextUntil()方法以及prevUntil()方法的使用介绍
2013/04/26 Javascript
Jquery仿IGoogle实现可拖动窗口示例代码
2014/08/22 Javascript
JavaScript中Math.SQRT2属性的使用详解
2015/06/14 Javascript
浅析AngularJS Filter用法
2015/12/28 Javascript
jQuery Ajax和getJSON获取后台普通json数据和层级json数据用法分析
2016/06/08 Javascript
全面解析Javascript无限添加QQ好友原理
2016/06/15 Javascript
详解网站中图片日常使用以及优化手法
2017/01/09 Javascript
JavaScript常用正则验证函数实例小结【年龄,数字,Email,手机,URL,日期等】
2017/01/23 Javascript
利用Jquery实现几款漂亮实用的时间轴(附示例代码)
2017/02/15 Javascript
在JS中如何把毫秒转换成规定的日期时间格式实例
2017/05/11 Javascript
微信小程序对接七牛云存储的方法
2017/07/30 Javascript
小程序scroll-view组件实现滚动的示例代码
2018/09/20 Javascript
web页面和微信小程序页面实现瀑布流效果
2018/09/26 Javascript
Vue-input框checkbox强制刷新问题
2019/04/18 Javascript
详解如何使用router-link对象方式传递参数?
2019/05/02 Javascript
p5.js实现动态图形临摹
2019/10/23 Javascript
js通过循环多张图片实现动画效果
2019/12/19 Javascript
Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
2020/11/18 Vue.js
python批量修改图片后缀的方法(png到jpg)
2018/10/25 Python
python RabbitMQ 使用详细介绍(小结)
2018/11/08 Python
python flask框架实现传数据到js的方法分析
2019/06/11 Python
python分布式计算dispy的使用详解
2019/12/22 Python
python如何通过闭包实现计算器的功能
2020/02/22 Python
django model的update时auto_now不被更新的原因及解决方式
2020/04/01 Python
法国女性内衣购物网站:Glamuse
2019/05/13 全球购物
接口的多继承会带来哪些问题
2015/08/17 面试题
党员教师工作决心书
2014/03/13 职场文书
招标授权委托书样本
2014/09/23 职场文书
公民授权委托书
2014/10/15 职场文书
党的群众路线教育实践活动领导班子整改措施
2014/10/28 职场文书
商务代表岗位职责
2015/02/15 职场文书
出生证明格式
2015/06/15 职场文书
2016年感恩教师节活动总结
2016/04/01 职场文书
Django展示可视化图表的多种方式
2021/04/08 Python
Nginx反向代理至go-fastdfs案例讲解
2021/08/02 Servers