基本算法的js实现【一】冒泡_js冒泡的实现方法-优快云博客

本文链接：https://blog.youkuaiyun.com/Lily_sayhi/article/details/79759525

本文详细介绍了冒泡排序算法的工作原理及实现过程，并提供了一个具体的HTML页面示例，其中包括JavaScript代码来演示冒泡排序如何对一组数字进行排序。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

【一】冒泡

解析：1.比较相邻的两个元素，如果前一个比后一个大，则交换位置。

　　　2.第一轮的时候最后一个元素是最大的一个。

　　　3.按照步骤一的方法进行相邻两个元素的比较，这个时候由于最后一个元素已经是最大的了，所以最后一个元素不用比较。

4.代码注意点：外层循环长度为len-1；内层循环len-i-1;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<h1>冒泡</h1>
		<p>请以逗号分隔输入数字</p>
		<input type="text" id="before" /><a id="result" href="javascript:action();">排序后</a>
		<p id="after"></p>
		
		
		<script type="text/javascript">
			function maopaoSort(arr){
				//debugger;
				var len = arr.length;
				for(var i=0;i<len-1;i++){
					for(var j=0;j<len-i-1;j++){
						if(arr[j]>arr[j+1]){
							var tmp = arr[j];
							arr[j]=arr[j+1];
							arr[j+1]=tmp;
						}
						
					}
				}
				return arr;
			}
			//测试
			var arr=[5,6,90,2,3,1,100];
			console.log(arr);
			
			maopaoSort(arr);
			console.log(arr);
			
			function action(){
				var before=document.getElementById("before").value;
				var arr=before.split(",");
				var intArr=[];
				//将元素类型由string变为number
				arr.forEach(function(data,index,arr){
        			intArr.push(+data);  
    			}); 
				console.log(arr);
				console.log(Object.prototype.toString.call(intArr[0]));
			var after=maopaoSort(intArr);
			
			console.log(after);
			document.getElementById("after").innerHTML=after;
			}
		
		
		</script>
	</body>
</html>

运行结果如下：