JavaScript算法学习之冒泡排序和选择排序


Posted in Javascript onNovember 02, 2019

前言

算法与数据结构构成了程序,数据结构用于实现数据的表示、存储、管理,算法通过使用数据完成一定的业务逻辑与操作,最终实现了程序的功能。因此算法在编程中的重要性是不言而喻的。很多复杂的算法都是借助最基本的算法实现的。本文主要选取经典排序算法中的冒泡排序与选择排序对JavaScript编程实现算法进行简单描述与说明。

JavaScript算法学习之冒泡排序和选择排序

程序算法

算法说明

算法(Algorithm)是解决问题的一种策略机制,算法也是有限操作指令的集合。按照算法策略输入符合要求的数据,最终获得解决问题的输出结果。冒泡算法与选择算法主要用于实现对无序的数字集合进行排序。算法描述分别如下:

1、冒泡排序算法

冒泡算法顾名思义,可以将待排序序列中的每一个元素看成一个个气泡,假设气泡的大小用元素的数值表示,这样的话最大气泡(最大的元素数字)会最先升起来,这一过程即为冒泡。冒泡算法的关键在于将未排序部分最大元素依次后移动,在序列尾端从小到大形成排序好的有序序列。冒泡排序示意如下图所示:

JavaScript算法学习之冒泡排序和选择排序

冒泡排序算法示意图

冒泡排序算法示意图如上图所示,其中每一行表示一次排序,排序目的找到最大值,从待排序序列中取出最大值,放到红色小球区域中,红色小球区域表示已完成排序的序列。通过上图我们可以看出,每趟排序冒泡出来的元素分别为(17,12,9,5,1)。最终排好的序列为(1,5,9,12,17)。

2、选择排序算法

选择排序是指从未排序的序列中找到最小的值并取出放到已经排好顺序的序列中,一直到未排序序列中的元素个数为零。即所有的元素都放到已经排好顺序的序列中。该算法的关键在于从未排序的序列中找到最轻(数值最小)元素,放到已经排序好的序列中。选择排序算法示意如下图所示:

JavaScript算法学习之冒泡排序和选择排序
选择排序示意图

选择排序示意图如上图所示,选择的关键在于找到最小的值,并将其放到已经排序好的序列中。上图中未排序(待排序)集合为黄色部分,排序好的部分为绿色背景部分,每一行为一次排序,排序目的找到最小元素。通过上图可知选择出来的最小值依次为(1,5,9,12,17)。

冒泡排序实现

JavaScript冒泡排序主要借助JavaScript array数字对象实现待排序序列的存储,通过循环语句遍历数组,从待排序序列的第一个元素开始与后面元素比较,如大于后面元素则交换,因此经过一趟遍历,最大元素将会跑到array数组的末尾。实现代码描述如下:

var arr1=[9,1,4,13,7,8,20,23,15]; 
 var wlen1=arr1.length;
 var count1=0;//记录总执行次数 
 for(var i=0;i<arr1.length-1;i++) { 
 for(var j=0;j<wlen1;j++) { 
 if(arr1[j]>arr1[j+1]) { 
 var temp; 
 temp=arr1[j]; 
 arr1[j]=arr1[j+1]; 
 arr1[j+1]=temp; 
 count1++; 
 } 
 } 
 wlen1=wlen1-1; 
 }

选择排序实现

按照算法描述选择排序需要使用两个JavaScript数组对象,一个为待排序序列存储数据,一个为排序完成数组。分别从待排序序列数组中找到最小值并取出存储到完成排序数组中。arr数组为待排序数组,res数组为排序完成数组。使用javaScript实现选择排序代码描述如下:

var arr=[9,1,4,13,7,8,20,23,15]; 
 var wlen=arr.length; 
 var count=0;//记录已完成排序元素数量 
 var res=[];//最终排序结果数组 
 var minvalue=0; //思路从未排序序列选择最小元素放到已经完成排序的数组中 
 for(var i=0;i<wlen;i++) { //找到最小元素 
 minvalue=arr[0]; 
 for(var j=0;j<arr.length;j++) { 
 if(minvalue>arr[j]) { 
 minvalue=arr[j]; 
 var temp; 
 temp=arr[0]; 
 arr[0]=arr[j]; 
 arr[j]=temp; 
 } 
 count++; 
 } 
 arr.shift(); 
 res[i]=minvalue; 
 }

JavaScript实现基本冒泡与选择排序算法描述如上所示,本例设计测试用例为(9,1,4,13,7,8,20,23,15),该待排序测试用例分别执行冒泡排序与选择排序,效果展示如下图

JavaScript算法学习之冒泡排序和选择排序

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
javascript针对DOM的应用分析(三)
Apr 15 Javascript
jquery动态分页效果堪比时光网
Sep 25 Javascript
javascript学习笔记(二)数组和对象部分
Sep 30 Javascript
jQuery链使用指南
Jan 20 Javascript
浅谈被jQuery抛弃的函数及替代函数
May 03 Javascript
在Html中使用Requirejs进行模块化开发实例详解
Apr 15 Javascript
node.js cookie-parser之parser.js
Jun 06 Javascript
AngularJS打开页面隐藏显示表达式用法示例
Dec 25 Javascript
纯js的右下角弹窗实例
Mar 12 Javascript
详解ES6通过WeakMap解决内存泄漏问题
Mar 09 Javascript
vue使用vue-i18n实现国际化的实现代码
Apr 08 Javascript
vue 全局封装loading加载教程(全局监听)
Nov 05 Javascript
如何正确理解vue中的key详解
Nov 02 #Javascript
Javascript 关于基本类型和引用类型的个人理解
Nov 01 #Javascript
javascript 关于赋值、浅拷贝、深拷贝的个人理解
Nov 01 #Javascript
vue iview的菜单组件Mune 点击不高亮的解决方案
Nov 01 #Javascript
解决vue项目刷新后,导航菜单高亮显示的位置不对问题
Nov 01 #Javascript
vue实现点击追加选中样式效果
Nov 01 #Javascript
vue 导航内容设置选中状态样式的例子
Nov 01 #Javascript
You might like
php sprintf()函数让你的sql操作更安全
2008/07/23 PHP
php 执行系统命令的方法
2009/07/07 PHP
PHP反向代理类代码
2014/08/15 PHP
PHP 7.0新增加的特性介绍
2017/06/08 PHP
List Installed Software Features
2007/06/11 Javascript
获取鼠标在div中的相对位置的实现代码
2013/12/30 Javascript
浅谈JavaScript正则表达式分组匹配
2015/04/10 Javascript
jquery实现的缩略图预览滑块实例
2015/06/25 Javascript
JScript实现地址选择功能
2017/08/15 Javascript
Bootstrap实现翻页效果
2017/11/27 Javascript
vue移动端实现红包雨效果
2020/06/23 Javascript
微信提示 在浏览器打开 效果实现过程解析
2019/09/10 Javascript
微信小程序canvas截取任意形状的实现代码
2020/01/13 Javascript
解决Vue router-link绑定事件不生效的问题
2020/07/22 Javascript
[03:12]完美世界DOTA2联赛PWL DAY6集锦
2020/11/05 DOTA
python中的多重继承实例讲解
2014/09/28 Python
Python守护线程用法实例
2017/06/23 Python
Python数据结构与算法之常见的分配排序法示例【桶排序与基数排序】
2017/12/15 Python
使用pandas对矢量化数据进行替换处理的方法
2018/04/11 Python
PyQt4实时显示文本内容GUI的示例
2019/06/14 Python
python绘制多个子图的实例
2019/07/07 Python
解决python tkinter界面卡死的问题
2019/07/17 Python
Python3.9又更新了:dict内置新功能
2020/02/28 Python
tensorflow模型文件(ckpt)转pb文件的方法(不知道输出节点名)
2020/04/22 Python
解决Django Haystack全文检索为空的问题
2020/05/19 Python
快速了解Python开发环境Spyder
2020/06/29 Python
python闭包与引用以及需要注意的陷阱
2020/09/18 Python
详解Django中的FBV和CBV对比分析
2021/03/01 Python
CSS的pointer-events属性详细介绍(作用和注意事项)
2014/04/23 HTML / CSS
CSS3动画和HTML5新特性详解
2020/08/31 HTML / CSS
HTML5在canvas中绘制复杂形状附效果截图
2014/06/23 HTML / CSS
马来西亚最好的婴儿商店:Motherhood
2017/09/14 全球购物
历史系毕业生自荐信
2013/10/28 职场文书
环保倡议书怎么写
2014/05/16 职场文书
2015年妇产科工作总结
2015/05/18 职场文书
Java SSH 秘钥连接mysql数据库的方法
2021/06/28 Java/Android