×

JS开发TIPS:理解Javascript冒泡排序

作者:demo2021.11.27来源:Web前端之家浏览:286评论:0
关键词:js冒泡排序

JS开发TIPS:理解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>

大家试试吧!

您的支持是我们创作的动力!
温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/js202111127a1.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

  • Web前端之家

    已经加上了。...

  • 访客

    wordpress主题https://www.22vd.com,交换下友链麻烦通过...

  • Web前端之家

    你是可以试试的,其实用途有区别的。...

  • qdxx

    跟国内的比较Hchart等,如何?...

  • qdxx

    不错啊,收藏了!...

  • Web前端之家

    是的,多学习吧!...

  • qdxx

    这个的确坑,我也是刚遇到,感谢分享。...

  • 访客

    大苏打...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2021 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.7.1