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 相关文章推荐
XMLHTTPRequest的属性和方法简介
Nov 23 Javascript
jquery延迟加载外部js实现代码
Jan 11 Javascript
jQuery滚动加载图片效果的实现
Mar 06 Javascript
原生js实现改变随意改变div属性style的名称和值的结果
Sep 26 Javascript
JavaScript获取当前页面上的指定对象示例代码
Feb 28 Javascript
Js操作树节点自动折叠展开的几种方法
May 05 Javascript
jQuery中attr()与prop()函数用法实例详解(附用法区别)
Dec 29 Javascript
javascript 四十条常用技巧大全
Sep 09 Javascript
一个例子轻松学会Vue.js
Jan 02 Javascript
jquery实现超简单的瀑布流布局【推荐】
Mar 08 Javascript
Cookies 和 Session的详解及区别
Apr 21 Javascript
create-react-app使用antd按需加载的样式无效问题的解决
Feb 26 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
MOTOROLA 摩托罗拉 MODEL 66-XI五灯中波收音机
2021/03/02 无线电
php部分常见问题总结
2008/03/27 PHP
PHP可逆加密/解密函数分享
2012/09/25 PHP
Smarty中调用FCKeditor的方法
2014/10/27 PHP
CodeIgniter配置之routes.php用法实例分析
2016/01/19 PHP
JavaScript高级程序设计 阅读笔记(十八) js跨平台的事件
2012/08/14 Javascript
基于jquery DOM写的类似微博发布的效果
2012/10/20 Javascript
再JavaScript的jQuery库中编写动画效果的指南
2015/08/13 Javascript
JS+html5制作简单音乐播放器
2020/09/13 Javascript
vue 解决循环引用组件报错的问题
2018/09/06 Javascript
vue、react等单页面项目部署到服务器的方法及vue和react的区别
2018/09/29 Javascript
Python数据类型详解(一)字符串
2016/05/08 Python
python3新特性函数注释Function Annotations用法分析
2016/07/28 Python
Python3中正则模块re.compile、re.match及re.search函数用法详解
2018/06/11 Python
win10下tensorflow和matplotlib安装教程
2018/09/19 Python
Python从单元素字典中获取key和value的实例
2018/12/31 Python
用Python+OpenCV对比图像质量的几种方法
2019/07/15 Python
在Pytorch中使用样本权重(sample_weight)的正确方法
2019/08/17 Python
简单了解python协程的相关知识
2019/08/31 Python
Python 类的魔法属性用法实例分析
2019/11/21 Python
python实现图片插入文字
2019/11/26 Python
python 爬虫 实现增量去重和定时爬取实例
2020/02/28 Python
python GUI库图形界面开发之PyQt5滑块条控件QSlider详细使用方法与实例
2020/02/28 Python
Python matplotlib修改默认字体的操作
2020/03/05 Python
基于Html5 canvas实现裁剪图片和马赛克功能及又拍云上传图片 功能
2019/07/09 HTML / CSS
美国半成品食材配送服务商:Home Chef
2018/01/25 全球购物
英国和爱尔兰最大的地毯零售商:Kukoon
2018/12/17 全球购物
泰国排名第一的家居用品中心:HomePro
2020/11/18 全球购物
餐厅经理岗位职责范本
2014/02/17 职场文书
助残日活动总结
2014/08/27 职场文书
学校2015年纠风工作总结
2015/05/15 职场文书
2016年小学生寒假家长评语
2015/10/10 职场文书
区域销售大会开幕词
2016/03/04 职场文书
SpringAop日志找不到方法的处理
2021/06/21 Java/Android
总结python多进程multiprocessing的相关知识
2021/06/29 Python
nginx刷新页面出现404解决方案(亲测有效)
2022/03/18 Servers