举例说明javascript冒泡排序

目录
  • 一、什么是冒泡排序
  • 二、举个例子
    • 第一轮:
    • 第二轮:
    • 第三轮:
    • 第四轮:
    • 第五轮:
    • 第六轮:
  • 总结

一、什么是冒泡排序

冒泡排序Bubble Sort,通过依次来比较相邻两个元素的大小,在每一次的比较的过程中,两个元素,通过交换来达到有序的目的。

如果一组无序的数列想要从小到大排序,那么两个元素比较,通过交换来实现,左边的元素要比右边的元素要小。

如果一组无序的数列想要从大到小排序,那么两个元素比较,通过交换来实现,左边的元素要比右边的元素要大。

就像碳酸饮料中的气泡一样,从底部一直冒泡到顶部。

二、举个例子

假如有 2,4,7,5,3,6,1 这组数

第一轮:

i=0;

j(内层循环)循环 6次,内层循环做的工作:相邻两个数比较,大的最终会放在后面,小的在前,一次循环外层循环控制次数,内层循环做判断

j=0 1 2 3 4 5

2 2 2 2 2 2 2
4 4 4 4 4 4 4
7 7 7 5 5 5 5
5 5 5 7 3 3 3
3 3 3 3 7 6 6
6 6 6 6 6 7 1
1 1 1 1 1 1 7
arr[0] arr[1] arr[2]
arr[1] arr[2] arr[3]

第二轮:

i=1;

j(内层循环)循环 5次

j=0 1 2 3 4 5

2 2 2 2 2 2
4 4 4 4 4 4
5 5 5 3 3 3
3 3 3 5 5 5
6 6 6 6 6 1
1 1 1 1 1 6
7 7 7 7 7 7
arr[0] arr[1] arr[2]
arr[1] arr[2] arr[3]

第三轮:

i=2;

j(内层循环)循环 4次

2 2 2 2 2
4 4 3 3 3
3 3 4 4 4
5 5 5 5 1
1 1 1 1 5
6 6 6 6 6
7 7 7 7 7

第四轮:

i=3;

j(内层循环)循环 3次

2 2 2 2
3 3 3 3
4 4 4 1
1 1 1 4
5 5 5 5
6 6 6 6
7 7 7 7

第五轮:

i=4;

2 2 2
3 3 1
1 1 3
4 4 4
5 5 5
6 6 6
7 7 7

第六轮:

i=5;

2 1
1 2
3 3
4 4
5 5
6 6
7 7
*/

<script type="text/javascript" >
// 示例1:
function show(){
	var arr=[2,4,7,5,3,6,1];
	for(var i=0;i<arr.length-1;i++){
		for(var j=0;j<arr.length-1-i;j++){
			//1、比较相邻的两个数;大的在后,小的在前
			if(arr[j] > arr[j+1] ){
				var temp = arr[j];
				arr[j] = arr[j+1];
				arr[j+1] = temp;
			}
		}
	}
	console.log(arr);
}

// 示例2:
	<body>
	    <input type="text" id="test">
	    <button type="button" onclick="show()">按我</button>
	    <input type="text" id="sc">
	</body>

    function show() {
        let oT=document.getElementById("test").value;
        let sc=document.getElementById("sc");
        // console.log(sc);
        // console.log(oT);
        let arr=oT.split("");
        console.log(arr.length);
        for (var i = 0; i < arr.length - 1; i++) {
            for (var j = 0; j < arr.length - 1 - i; j++) {
                //1、比较相邻的两个数;大的在后,小的在前
                if (arr[j] > arr[j + 1]) {
                    var temp = arr[j];
                    arr[j] = arr[j + 1];
                    arr[j + 1] = temp;
                }
            }
        }
        // console.log(arr);
        sc.value=arr;
    }
</script>

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注我们的更多内容!

时间: 2021-11-18

JavaScript数据结构与算法之基本排序算法定义与效率比较【冒泡、选择、插入排序】

本文实例讲述了JavaScript数据结构与算法之基本排序算法定义与效率比较.分享给大家供大家参考,具体如下: javascript数据结构与算法--基本排序算法(冒泡.选择.排序)及效率比较 一.数组测试平台 javascript数据结构与算法--基本排序(封装基本数组的操作),封装常规数组操作的函数,比如:插入新数据,显示数组数据,还有交换数组元素等操作来调用不同的排序算法 function CArray(numElements) { this.dataStore = []; this.po

JavaScript实现经典排序算法之冒泡排序

冒泡排序可谓是最经典的排序算法了,它是基于比较的排序算法,时间复杂度为O(n^2),其优点是实现简单,n较小时性能较好. 1)算法原理        相邻的数据进行两两比较,小数放在前面,大数放在后面,这样一趟下来,最小的数就被排在了第一位,第二趟也是如此,如此类推,直到所有的数据排序完成. 2)算法描述        <1>比较相邻的元素.如果第一个比第二个大,就交换它们两个:        <2>对每一对相邻元素作同样的工作,从开始第一对到结尾的最后一对,这样在最后的元素应该会

JS前端面试必备——基本排序算法原理与实现方法详解【插入/选择/归并/冒泡/快速排序】

本文实例讲述了JS前端面试必备--基本排序算法原理与实现方法.分享给大家供大家参考,具体如下: 排序算法是面试及笔试中必考点,本文通过动画方式演示,通过实例讲解,最后给出JavaScript版的排序算法 插入排序 算法描述: 1. 从第一个元素开始,该元素可以认为已经被排序 2. 取出下一个元素,在已经排序的元素序列中从后向前扫描 3. 如果该元素(已排序)大于新元素,将该元素移到下一位置 4. 重复步骤 3,直到找到已排序的元素小于或者等于新元素的位置 5. 将新元素插入到该位置后 6. 重复

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

前言 算法与数据结构构成了程序,数据结构用于实现数据的表示.存储.管理,算法通过使用数据完成一定的业务逻辑与操作,最终实现了程序的功能.因此算法在编程中的重要性是不言而喻的.很多复杂的算法都是借助最基本的算法实现的.本文主要选取经典排序算法中的冒泡排序与选择排序对JavaScript编程实现算法进行简单描述与说明. 程序算法 算法说明 算法(Algorithm)是解决问题的一种策略机制,算法也是有限操作指令的集合.按照算法策略输入符合要求的数据,最终获得解决问题的输出结果.冒泡算法与选择算法主要

JavaScript实现的冒泡排序法及统计相邻数交换次数示例

本文实例讲述了JavaScript实现的冒泡排序法及统计相邻数交换次数.分享给大家供大家参考,具体如下: <html> <head>JS冒泡排序</head> <body> <script> var arr=[-1,-2,-30,-4,-5,-6]; var flag=false; //判断相邻两个数是否交换过 var n=0; //计算交换次数 for(var i=0;i<arr.length-1;i++){ //i表示的是每次找出来的最

详解JS中的快速排序与冒泡

1.快速排序思想: 1.1 先找数组的最中间的一个数为基准 1.2 把数组通过此基准分为小于基准的left数组和大于基准的right数组, 1.3 递归重复上面的两个步骤, 代码如下: function quickSort(arr) { if (arr.length <=1 ){ return arr; } var middleIndex = Math.floor(arr.length / 2); var left = []; var right = []; var middle = arr.s

详解js中构造流程图的核心技术JsPlumb(2)

前言:上篇详解js中构造流程图的核心技术JsPlumb介绍了下JsPlumb在浏览器里面画流程图的效果展示,以及简单的JsPlumb代码示例.这篇还是接着来看看各个效果的代码说明. 一.设置连线的样式和颜色效果代码示例 大概的效果如图: 这些效果看着很简单,那么,我们如何用代码去实现它呢.上章我们说过,JsPlumb的连线样式是由点的某些属性决定的,既然如此,我们就通过设置点的样式来动态改变连线的样式即可.来看代码: 首先来看看连线类型的那个select <div id="btn_line

详解js中构造流程图的核心技术JsPlumb

项目里面用到了Web里面的拖拽流程图的技术JsPlumb,其实真不算难,不过项目里面用HTML做的一些类似flash的效果,感觉还不错,在此分享下. 一.效果图展示 1.从左边拖动元素到中间区域,然后连线 2.连线类型可以自定义:这里定义为直线.折线.曲线.实际项目中根据业务我们定义为分装线.分装支线.总装线等 3.鼠标拖动区域选中元素,并且选中元素统一拖动位置. 4.对选中的元素左对齐. 5.对选中元素居中对齐 6.右对齐 7.上对齐 8.垂直居中对齐 9.下对齐 10.根据第一个选中的元素上

详解js中let与var声明变量的区别

ES6 新增了let命令,用来声明局部变量,所声明的变量,只在let命令所在的代码块内有效,而且有暂时性死区的约束. 1.ES6可以用let定义块级作用域变量 代码如下: function f1(){ { var a = 10; let b = 20; } console.log(a); // 10 console.log(b); // Uncaught ReferenceError: b is not defined } f1(); 说明:在ES6之前只有全局作用域和函数作用域,在ES6中新增

详解js中class的多种函数封装方法

本文实例讲解了js中class的多种函数封装方法,分享给大家供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>关于class的多种函数封装</title> <style> body{ margin: 0; } li{ height: 20px; } </style

详解JS中的this、apply、call、bind(经典面试题)

这又是一个面试经典问题~/(ㄒoㄒ)/~~也是 ES5中众多坑中的一个,在 ES6 中可能会极大避免 this 产生的错误,但是为了一些老代码的维护,最好还是了解一下 this 的指向和 call.apply.bind 三者的区别. this 的指向 在 ES5 中,其实 this 的指向,始终坚持一个原理:this 永远指向最后调用它的那个对象,来,跟着我朗读三遍:this 永远指向最后调用它的那个对象,this 永远指向最后调用它的那个对象,this 永远指向最后调用它的那个对象.记住这句话

详解JS中的attribute属性

Attribute是属性的意思,文章仅对部分兼容IE和FF的Attribute相关的介绍. attributes:获取一个属性作为对象getAttribute:获取某一个属性的值 object.getAttributes(attribute) getAttribute方法不属于document对象,所以不能通过document对象获取,只能通过元素节点的调用.例如document.getElementsByTagName("p")[0]. getAttributes("tit

详解JS中的柯里化(currying)

何为Curry化/柯里化? curry化来源与数学家 Haskell Curry的名字 (编程语言 Haskell也是以他的名字命名). 柯里化通常也称部分求值,其含义是给函数分步传递参数,每次传递参数后部分应用参数,并返回一个更具体的函数接受剩下的参数,这中间可嵌套多层这样的接受部分参数函数,直至返回最后结果. 因此柯里化的过程是逐步传参,逐步缩小函数的适用范围,逐步求解的过程. 柯里化一个求和函数 按照分步求值,我们看一个简单的例子 var concat3Words = function (

详解js中常规日期格式处理、月历渲染和倒计时函数

前言 相信大家都知道日期格式处理在前端的日常任务中非常常见,但是为此引入monent.js这样的类库又会显得有点臃肿,毕竟我们一个特定的项目中,并不需要monent.js那么全的涵盖范围.另外,如果现在公司让你自己手写一个日历组件(月历.周历),日历组件中需要耦合我们的其他业务需求,如果有一个任务列表,当11月22号的待进行任务,我需要在日历上有一个绿色圆点,表示当天有待办事项. 下面介绍一些常规的函数,希望对大家有用. 月历效果图 函数目录 getFormatDateStr 获得指定日期格式的

详解JS中定时器setInterval和setTImeout的this指向问题

前言 Js是一个单线程语言,可以通过setTimeout()和setInterval()来设置代码在指定时刻运行,前者是在指定时间后执行,后者是指每隔一段时间执行.两者的使用方法类似. 最近在练习写一个小例子的时候用到了定时器,发现在setInterval和setTimeout中传入函数时,函数中的this会指向window对象,详细的介绍通过一个示例展开,一起来看看吧. 如下例: var num = 0; function Obj (){ this.num = 1, this.getNum =