简单理解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 相关文章推荐
网页中的图片的处理方法与代码
Nov 26 Javascript
jquery 跳到顶部和底部动画2句代码简单实现
Jul 18 Javascript
Jquery each方法跳出循环,并获取返回值(实例讲解)
Dec 12 Javascript
AngularJS基础学习笔记之简单介绍
May 10 Javascript
javascript验证邮件地址和MX记录的方法
Jun 16 Javascript
jQuery实现右键菜单、遮罩等效果代码
Sep 27 Javascript
利用vscode编写vue的简单配置详解
Jun 17 Javascript
Vue引入sass并配置全局变量的方法
Jun 27 Javascript
vue 点击按钮增加一行的方法
Sep 07 Javascript
Vue中消息横向滚动时setInterval清不掉的问题及解决方法
Aug 23 Javascript
p5.js码绘“跳动的小正方形”的实现代码
Oct 22 Javascript
JS实现图片懒加载(lazyload)过程详解
Apr 02 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日历[测试通过]
2008/03/27 PHP
PHP面向对象教程之自定义类
2014/06/10 PHP
php实现的zip文件内容比较类
2014/09/24 PHP
PHP单例模式详细介绍
2015/07/01 PHP
PHP PDOStatement::fetchAll讲解
2019/01/31 PHP
理解JavaScript变量作用域更轻松
2009/10/25 Javascript
javascript 窗口加载蒙板 内嵌网页内容
2010/11/19 Javascript
js如何实现设计模式中的模板方法
2013/07/23 Javascript
JQuery显示隐藏页面元素的方法总结
2015/04/16 Javascript
javascript函数式编程程序员的工具集
2015/10/11 Javascript
jQuery插件ajaxfileupload.js实现上传文件
2020/10/23 Javascript
jQuery EasyUI API 中文帮助文档和扩展实例
2016/08/01 Javascript
Nodejs中Express 常用中间件 body-parser 实现解析
2017/05/22 NodeJs
vue-cli构建项目使用 less的方法
2017/10/04 Javascript
webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)
2018/01/09 Javascript
vue 全选与反选的实现方法(无Bug 新手看过来)
2018/02/09 Javascript
angular4中*ngFor不能对返回来的对象进行循环的解决方法
2018/09/12 Javascript
react 组件传值的三种方法
2019/06/03 Javascript
JavaScript设计模式之观察者模式与发布订阅模式详解
2020/05/07 Javascript
[49:56]VG vs Optic 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python输出当前目录下index.html文件路径的方法
2015/04/28 Python
Python的Django框架中模板碎片缓存简介
2015/07/24 Python
Python实现压缩与解压gzip大文件的方法
2016/09/18 Python
Python交互环境下打印和输入函数的实例内容
2020/02/16 Python
HTML5之SVG 2D入门7—SVG元素的重用与引用
2013/01/30 HTML / CSS
军训心得体会
2013/12/31 职场文书
文明学生标兵事迹
2014/01/21 职场文书
数控专业个人求职信范文
2014/02/05 职场文书
网络宣传方案
2014/03/15 职场文书
竞选班长的演讲稿
2014/04/24 职场文书
学校政风行风自查自纠报告
2014/10/21 职场文书
幼儿园教师节活动总结
2015/03/23 职场文书
入党团支部推荐意见
2015/06/02 职场文书
婚育证明样本
2015/06/16 职场文书
体育部部长竞选稿
2015/11/21 职场文书
Python基本数据类型之字符串str
2021/07/21 Python