简单理解js的冒泡排序


Posted in Javascript onDecember 19, 2016

关于排序,其实不管是哪种语言,都有它内置的排序函数,我们要用的时候调用就行了,既然如此,我们为什么还要讲这个东西呢?我想,其实,我们讲排序更多是在于排序中包含的思想算法,因为,算法对于计算机来说相当重要,一个好的算法能够让计算机的效率达到事半功倍的效果,所以,算法是计算机语言中一门相当热门的课程,它所代表的计算机思维也是很值得我们去深入研究的。

我也知道,关于我标题中的排序,博客园中的很多作者都写过详细解释的文章,可能,笔者本人认为自己的理解更能体现出这个排序的工作原理吧,所以,笔者也就大惭不愧的在这里再次写下关于冒泡排序的文章,有需要的读者可以看一下。

再进入正题之前,我给大家介绍一下谷歌浏览器一个很有用的调试程序代码的功能,如果你已经知道,请略过。

首先,打开谷歌浏览器,输入我们的代码脚本:

简单理解js的冒泡排序

右键,点击检查,

简单理解js的冒泡排序

按顺序点击,获取脚本的运行代码:

简单理解js的冒泡排序

我的脚本是bubble.html,存储在www.test.com域名下面的js/f目录下面,每个人的脚本不一样,存储的目录也不一样,请根据自己的情况来。

调出脚本的内容后,下面就是调试代码了。

简单理解js的冒泡排序

选择好了断点之后,接下来在谷歌浏览器中再次运行脚本,就是对下面的www.test.com/js/f/bubble.html再回车运行

简单理解js的冒泡排序

再次运行之后,你会看到这样的东西:

简单理解js的冒泡排序

看到上面的那个蓝色矩形框了吗?这个蓝色矩形框就是脚本正在运行的代码位置,那我们怎么让脚本的代码一步步的运行呢?

简单理解js的冒泡排序

这里之所以对这个脚本的for循环代码进行断点监控,其实,我是为了查看冒泡排序到底是怎么循环操作的,对于新手来说,这样子直观的查看冒泡排序代码的运行情况会更好的了解算法的执行过程。

对于这个调试小功能就介绍到这里了,下面进入正题,没办法直接想象出冒泡排序的执行情况的话,你可以按我上面的步骤调出谷歌的调试功能,直观的查看冒泡排序的整个过程。

介绍一下两个变量互相调换的思维,我们借助中间变量来调换:

//交互元素,这里的代码是从脚本中截取出来的,这么简单,应该不影响理解
if(arr[j] > arr[j+1]){
mark = false;
var temp = arr[j];//temp是中间变量,把要交换的第一个元素arr[j]赋值给中间变量,也是把第一个元素存储起来
arr[j] = arr[j+1];//第二个元素赋值给第一个元素,因为第一个元素我们已经存储在中间变量中了,所以我们不用担心它的值会被覆盖掉
arr[j+1] = temp;//temp存储了第一个元素的值,把它赋值给第二个元素,就是把第一个元素赋值给第二个元素了,到这一步,两个元素已经交换位置了
}

再介绍一下,冒泡排序的算法过程:

冒泡排序:通过对相邻元素的对比,并交换位置,一步一步的把一个元素给挑选出来。

举个例子,对下面的数组进行排序:

这是一个无序的数组:2,9,4,8,5,1,0,7,3,6

比较规则:大于>

第一轮:

第一次比较:我们把2和9作比较:2>9吗 ?2和9比较是假,那么我们不管它,继续向前。

第二次比较:9和4做比较,9>4吗 ? 是真,那么我们让它们交换值,交换了值,它们的位置不就变了吗,是吧?怎么交换值上面已经讲过,这里不再重复了。

经过这次交换值,原来的数组已经变成:2,4,9,8,5,1,0,7,3,6

第三次比较:9和8做比较,9>8吗 ? 是真,那么它们两个继续交换值,此时,数组已经变成:2,4,8,9,5,1,0,7,3,6

......................

看到这里9的位置了吗?它是不是一步一步往后移?第一次比较因为9本来就是大的,所以,它不应该和2交换位置,因此,9没有被放到前面去,第二次比较,因为9比4大,所以,根据比较规则,它们应该互换位置,也就是9向后移了一位,第三次比较,依然符合比较规则,所以9和8互换位置了,9又向后移了一步,接下来的比较和上面的比较是一样的过程,你自己比较想象一下吧,这里就不再重复了。

比较到最后一次:原数组的情况应该是:2,4,8,5,1,0,7,3,6,9

经过第一轮的比较,我们已经把最大的元素给放到最后面去了,对吧?

接下来,第二轮:

首先说一下,第二轮的时候,原来的数组2,9,4,8,5,1,0,7,3,6,已经变成了2,4,8,5,1,0,7,3,6,9,我们是在已经冒泡过一次的数组的基础上进行比较的,先确认这一点,要是你还认为是最初的数组,那么,接下来的比较你会被搞糊涂的。呵呵。

此刻的数组:2,4,8,5,1,0,7,3,6,9

根据比较规则:2>4 吗?是假,不管它,继续向前比较。

4>8吗?是假,不管它,继续向前比较。

8>5吗?是真,两者交换值,也就是互换位置,此刻数组:2,4,5,8,1,0,7,3,6,9

继续向前,8>1吗?是真,两者交换位置,此刻数组:2,4,5,1,8,0,7,3,6,9

.......

比较到最后,原数组又发生了改变,已经变成:2,4,5,1,0,7,3,6,8,9

经过两轮的比较,原数组是否已经变得有序一点了?呵呵,没有错,两轮之后,最后面的两位数已经是有序的了。

既然两轮之后,最后面的两位已经是有序的了,那么,十轮之后呢?你自己想象一下。

十轮之后,这个数组肯定已经排序好了。这就是冒泡排序的工作过程,相邻元素比较,每一轮冒泡出一个有序的值。

那么,我们怎么用代码的方式实现冒泡排序呢?

写到这里,我想大家应该知道怎么做了吧?

我们用两层嵌套的for循环来实现这个过程,也就是实现冒泡排序:

//外层控制轮数
for(var i=0;i<len;i++){
//内层对数组元素进行冒泡选择

for(var j=0;j<len-1-i;j++){


//交互元素


if(arr[j] > arr[j+1]){


var temp = arr[j];


arr[j] = arr[j+1];


arr[j+1] = temp;  


}

}
}

上面那两个嵌套的for循环看到了吗?外层的for循环,我们就是用来控制比较········轮数········的,

内层的for循环,我们用来控制···················每一轮的比较次数··················的,同时,在这个for循环里面,我们还要做什么呢?上面的文字叙述,你看懂了吗?上面的文字叙述中,我们是不是在···每一次比较···的时候,都要根据比较规则来交换数组元素的位置,是吧?那么,程序的工作过程也是一样的,我们也要在这里根据比较规则对数组的元素进行交换位置,为的是冒泡出我们需要的元素。

下面是冒泡排序的完整代码,我对他进行了优化,当然,如果还可以优化,你也可以继续优化的。

<!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">
 //参数数字数组
 function bubble(arr){
  //检查参数
  if(toString.call(arr) !== '[object Array]'){
   return false;
  }
  //获取数组长度
  var len = arr.length;
  if(len <= 1){//小于1不用排序
   return arr;
  }
  //外层控制轮数
  for(var i=0;i<len;i++){
   //标记是否有排序的元素
   var mark = true;
   //内层对数组元素进行冒泡选择
   for(var j=0;j<len-1-i;j++){
    //交互元素
    if(arr[j] > arr[j+1]){
     mark = false;
     var temp = arr[j];
      arr[j] = arr[j+1];
      arr[j+1] = temp; 
    }
   }
   if(mark){
   //当没有进行冒泡选择时,证明已经排序好了
    return arr; 
   }
  }
 }
 //测试
 var ar = [9,3,7,4,8,2,5,1,6,0];
 alert(bubble(ar));
 </script>
</head>
<body>
</body>
</html>

这里只是简单的介绍冒泡排序的工作原理,假如有时间,我再详细讲解一下另外三个排序,快速排序、选择排序、插入排序。

其实这三个排序的工作原理都和冒泡排序很相似,网上也有很多文章介绍,大家可以自己研究一下。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
jQuery timers计时器简单应用说明
Oct 28 Javascript
JavaScript插入动态样式实现代码
Feb 22 Javascript
动态标签 悬停效果 延迟加载示例代码
Nov 21 Javascript
使用js判断当前时区TimeZone是否是夏令时
Feb 23 Javascript
js拖拽一些常见的思路方法整理
Mar 19 Javascript
jQuery 过滤方法filter()选择具有特殊属性的元素
Jun 15 Javascript
JS组件Bootstrap Table表格行拖拽效果实现代码
Aug 27 Javascript
整理AngularJS框架使用过程当中的一些性能优化要点
Mar 05 Javascript
jQuery动态生成Bootstrap表格
Nov 01 Javascript
html+javascript+bootstrap实现层级多选框全层全选和多选功能
Mar 09 Javascript
Vue项目自动转换 px 为 rem的实现方法
Oct 29 Javascript
微信小程序获取当前时间及星期几的实例代码
Sep 20 Javascript
JS瀑布流实现方法实例分析
Dec 19 #Javascript
移动端日期插件Mobiscroll.js使用详解
Dec 19 #Javascript
JavaScript闭包和范围实例详解
Dec 19 #Javascript
JS前端笔试题分析
Dec 19 #Javascript
利用vue实现模态框组件
Dec 19 #Javascript
JS中如何实现复选框全选功能
Dec 19 #Javascript
BootStrapValidator校验方式
Dec 19 #Javascript
You might like
PHP生成便于打印的网页
2006/10/09 PHP
php错误提示failed to open stream: HTTP request failed!的完美解决方法
2011/06/06 PHP
php入门之连接mysql数据库的一个类
2012/04/21 PHP
美图秀秀web开放平台--PHP流式上传和表单上传示例分享
2014/06/22 PHP
php计算两个文件相对路径的方法
2015/03/14 PHP
PHP实现简单ajax Loading加载功能示例
2016/12/28 PHP
XP折叠菜单&amp;仿QQ2006菜单
2006/12/16 Javascript
jQuery 隐藏和显示 input 默认值示例
2014/06/03 Javascript
JS+CSS实现淡入式焦点图片幻灯切换效果的方法
2015/02/26 Javascript
jQuery实现时尚漂亮的弹出式对话框实例
2015/08/07 Javascript
JQuery菜单效果的两个实例讲解(3)
2015/09/17 Javascript
JS实现动态修改table及合并单元格的方法示例
2017/02/20 Javascript
详解webpack打包时排除其中一个css、js文件或单独打包一个css、js文件(两种方法)
2018/10/26 Javascript
jQuery实现获取当前鼠标位置并输出功能示例
2019/01/05 jQuery
bootstrapValidator表单校验、更改状态、新增、移除校验字段的实例代码
2020/05/19 Javascript
搭建vscode+vue环境的详细教程
2020/08/31 Javascript
vue+axios 拦截器实现统一token的案例
2020/09/11 Javascript
使用python绘制人人网好友关系图示例
2014/04/01 Python
Python常用算法学习基础教程
2017/04/13 Python
ubuntu17.4下为python和python3装上pip的方法
2018/06/12 Python
PyCharm安装Markdown插件的两种方法
2019/06/24 Python
使用python批量修改文件名的方法(视频合并时)
2020/03/24 Python
Python基于paramunittest模块实现excl参数化
2020/04/26 Python
python 爬虫如何实现百度翻译
2020/11/16 Python
css3选择器基本介绍
2014/12/15 HTML / CSS
Html5 Canvas 实现一个“刮刮乐”游戏
2019/09/05 HTML / CSS
爱游人:Travelliker
2017/09/05 全球购物
历史专业个人求职信分享
2013/12/20 职场文书
保护水资源的标语
2014/06/17 职场文书
地理信息科学专业推荐信
2014/09/08 职场文书
白酒代理协议书范本
2014/10/26 职场文书
上课说话检讨书500字
2014/11/01 职场文书
选调生挂职锻炼工作总结
2015/10/23 职场文书
剖析后OpLog订阅MongoDB的数据变更就没那么难了
2022/02/24 MongoDB
解决Mysql中的innoDB幻读问题
2022/04/29 MySQL
Java对文件的读写操作方法
2022/04/29 Java/Android