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 相关文章推荐
Jquery多选下拉列表插件jquery multiselect功能介绍及使用
May 24 Javascript
Node.js开发之访问Redis数据库教程
Jan 14 Javascript
JS中的eval 为什么加括号
Apr 13 Javascript
JavaScript与JQUERY获取元素的宽、高和位置
Feb 26 Javascript
使用gulp搭建本地服务器并实现模拟ajax
Apr 05 Javascript
vue mixins组件复用的几种方式(小结)
Sep 06 Javascript
使用Bootrap和Vue实现仿百度搜索功能
Oct 26 Javascript
微信小程序图片选择区域裁剪实现方法
Dec 02 Javascript
使用JavaScript生成罗马字符的实例代码
Jun 08 Javascript
JS实现textarea通过换行或者回车把多行数字分割成数组并且去掉数组中空的值
Oct 29 Javascript
vue prop属性传值与传引用示例
Nov 13 Javascript
JavaScript类的继承多种实现方法
May 30 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
PHP模拟SQL Server的两个日期处理函数
2006/10/09 PHP
PHP面向对象的使用教程 简单数据库连接
2006/11/25 PHP
php 购物车实例(申精)
2009/05/11 PHP
php文章内容分页并生成相应的htm静态页面代码
2010/06/07 PHP
php中XMLHttpRequest(Ajax)不能设置自定义的Referer的解决方法
2011/11/26 PHP
phplot生成图片类用法详解
2015/01/06 PHP
Php-Redis安装测试笔记
2015/03/05 PHP
PHP设计模式之装饰器模式定义与用法详解
2018/04/02 PHP
在laravel中实现事务回滚的方法
2019/10/10 PHP
强悍无比的WEB开发好助手FireBug(Firefox Plugin)
2007/01/16 Javascript
JavaScript学习笔记之数组随机排序
2016/03/23 Javascript
JavaScript的字符串方法汇总
2016/07/31 Javascript
Angularjs中controller的三种写法分享
2016/09/21 Javascript
hammer.js实现图片手势放大效果
2017/08/29 Javascript
Bootstrap框架建立树形菜单(Tree)的实例代码
2017/10/30 Javascript
一步步教你利用webpack如何搭一个vue脚手架(超详细讲解和注释)
2018/01/08 Javascript
React路由管理之React Router总结
2018/05/10 Javascript
解决layer弹出层的内容页点击按钮跳转到新的页面问题
2019/09/14 Javascript
高性能js数组去重(12种方法,史上最全)
2019/12/21 Javascript
python中的代码编码格式转换问题
2015/06/10 Python
Python实战小程序利用matplotlib模块画图代码分享
2017/12/09 Python
Python实现八皇后问题示例代码
2018/12/09 Python
python实现求特征选择的信息增益
2018/12/18 Python
python调用pyaudio使用麦克风录制wav声音文件的教程
2019/06/26 Python
python3 实现函数写文件路径的正确方法
2019/11/27 Python
对tensorflow中cifar-10文档的Read操作详解
2020/02/10 Python
使用jupyter notebook直接打开.md格式的文件
2020/04/10 Python
PyQt5 QDockWidget控件应用详解
2020/08/12 Python
CSS3中border-radius属性设定圆角的使用技巧
2016/05/10 HTML / CSS
css3打造一款漂亮的卡哇伊按钮
2013/03/20 HTML / CSS
追悼会上的答谢词
2014/01/10 职场文书
2015年公务员转正工作总结
2015/04/24 职场文书
入学证明
2015/06/23 职场文书
国庆放假通知怎么写
2015/07/30 职场文书
新学期小学班主任工作计划
2019/06/21 职场文书
MySQL开启事务的方式
2021/06/26 MySQL