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高级学习笔记整理
Aug 14 Javascript
原生js实现fadein 和 fadeout淡入淡出效果
Jun 05 Javascript
PHP+jQuery+Ajax+Mysql如何实现发表心情功能
Aug 06 Javascript
JS实现超精简响应鼠标显示二级菜单代码
Sep 12 Javascript
2016年最热门的15 款代码语法高亮工具,美化你的代码
Jan 06 Javascript
浅析如何利用JavaScript进行语音识别
Oct 27 Javascript
JavaScript模拟文件拖选框样式v1.0的实例
Aug 04 Javascript
JavaScript实现的原生态兼容IE6可调可控滚动文字功能详解
Sep 19 Javascript
js实现同一个页面,多个enter事件绑定的示例
Oct 10 Javascript
如何为你的JavaScript代码日志着色详解
Apr 08 Javascript
使用imba.io框架得到比 vue 快50倍的性能基准
Jun 17 Javascript
vue+element项目中过滤输入框特殊字符小结
Aug 07 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执行速度全攻略
2006/10/09 PHP
js 获取浏览器高度和宽度值(多浏览器)
2009/09/02 Javascript
js判断url是否有效的两种方法
2014/03/04 Javascript
JavaScript用Number方法实现string转int
2014/05/13 Javascript
Js 正则表达式知识汇总
2014/12/02 Javascript
JavaScript实现获取dom中class的方法
2015/02/09 Javascript
深入理解js promise chain
2016/05/05 Javascript
JS中关于事件处理函数名后面是否带括号的问题
2016/11/16 Javascript
Jquery 整理元素选取、常用方法一览表
2016/11/26 Javascript
javascript中数组(Array)对象和字符串(String)对象的常用方法总结
2016/12/15 Javascript
Angular开发者指南之入门介绍
2017/03/05 Javascript
jQuery中ajax获取数据赋值给页面的实例
2017/12/31 jQuery
vue.js项目nginx部署教程
2018/04/05 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(上)
2018/04/18 Javascript
vue中Element-ui 输入银行账号每四位加一个空格的实现代码
2018/09/14 Javascript
Python使用Mechanize模块编写爬虫的要点解析
2016/03/31 Python
Python探索之静态方法和类方法的区别详解
2017/10/27 Python
Python实现识别手写数字 简易图片存储管理系统
2018/01/29 Python
Python多线程threading和multiprocessing模块实例解析
2018/01/29 Python
python如何处理程序无法打开
2020/06/16 Python
浅谈TensorFlow之稀疏张量表示
2020/06/30 Python
python基于pygame实现飞机大作战小游戏
2020/11/19 Python
python中Array和DataFrame相互转换的实例讲解
2021/02/03 Python
AmazeUI 缩略图的实现示例
2020/08/18 HTML / CSS
美国知名户外用品畅销中心:Sierra Trading Post
2016/07/19 全球购物
铭万公司.net面试题笔试题
2014/07/20 面试题
职工运动会邀请函
2014/01/19 职场文书
大学生优秀自荐信范文
2014/02/25 职场文书
基层党员公开承诺书
2014/05/29 职场文书
助学贷款贫困证明
2014/09/23 职场文书
预备党员转正思想汇报
2014/09/26 职场文书
县委常委班子对照检查材料思想汇报
2014/09/28 职场文书
2015年建党94周年演讲稿
2015/03/19 职场文书
《黄山奇石》教学反思
2016/02/18 职场文书
Django Paginator分页器的使用示例
2021/06/23 Python
MySQL8.0 Undo Tablespace管理详解
2022/06/16 MySQL