• 在JavaScript中数字的冒泡排序的讲解

     

    目录

    首先第一步，我们先看一下什么是冒泡排序 

    第二步：代码演示，先上框架

    第三步：先定义一个数组

    第四步：第一层循环

     第五步：内层for循环

     第六步：进行判断

     第七步：交换变量

     最后：输出

     

    首先第一步，我们先看一下什么是冒泡排序 

    所谓冒泡排序就是将一个数组中的元素按照你代码逻辑是从小到大，还是从大到小来排列，两两之之间依此进行排序比较 ，大的放在后面，在和后面的继续比较

    第二步：代码演示，先上框架

    1. html>
    2. <html lang="en">
    3.  
    4. 	<head>
    5. 		<meta charset="UTF-8">
    6. 		<meta http-equiv="X-UA-Compatible" content="IE=edge">
    7. 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
    8. 		<title>Documenttitle>
    9. 	head>
    10.  
    11. 	<body>
    12. 		<script>
    13.  
    14. 		script>
    15. 	body>
    16.  
    17. html>

    第三步：先定义一个数组

    1. html>
    2. <html lang="en">
    3.  
    4. 	<head>
    5. 		<meta charset="UTF-8">
    6. 		<meta http-equiv="X-UA-Compatible" content="IE=edge">
    7. 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
    8. 		<title>Documenttitle>
    9. 	head>
    10.  
    11. 	<body>
    12. 		<script>
    13.  
    14.  
    15. 			var sex = [9, 55, 2, 12, 22, 5]
    16.  
    17.  
    18. 			
    19. 		script>
    20. 	body>
    21.  
    22. html>

    因为是两两之间进行排序，所以如果循环的话，那么循环次数是不是应该就是数组的长度-1，

    第四步：第一层循环

    1. html>
    2. <html lang="en">
    3.  
    4. 	<head>
    5. 		<meta charset="UTF-8">
    6. 		<meta http-equiv="X-UA-Compatible" content="IE=edge">
    7. 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
    8. 		<title>Documenttitle>
    9. 	head>
    10.  
    11. 	<body>
    12. 		<script>
    13.  
    14.  
    15. 			var sex = [9, 55, 2, 12, 22, 5]
    16.  
    17.  
    18. 			for (var i = 0; i < sex.length - 1; i++) {
    19. 				
    20. 				}
    21. 			}
    22. 		script>
    23. 	body>
    24.  
    25. html>

     这里的i要从0或1开始都可以，他控制的只是循环排序次数，里面的for循环必须是0开始，因为数组下标是0开始

     第五步：内层for循环

    1. html>
    2. <html lang="en">
    3.  
    4. 	<head>
    5. 		<meta charset="UTF-8">
    6. 		<meta http-equiv="X-UA-Compatible" content="IE=edge">
    7. 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
    8. 		<title>Documenttitle>
    9. 	head>
    10.  
    11. 	<body>
    12. 		<script>
    13.  
    14.  
    15. 			var sex = [9, 55, 2, 12, 22, 5]
    16.  
    17.  
    18. 			for (var i = 0; i < sex.length - 1; i++) {
    19. 				for (var j = 0; j < sex.length - 1; j++) {
    20. 					
    21. 						
    22. 					
    23. 				}
    24. 			}
    25. 		script>
    26. 	body>
    27.  
    28. html>

    内层for循环的话也是一样的判断条件。只不过这里的话可以优化一下代码执行次数

    1. html>
    2. <html lang="en">
    3.  
    4. 	<head>
    5. 		<meta charset="UTF-8">
    6. 		<meta http-equiv="X-UA-Compatible" content="IE=edge">
    7. 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
    8. 		<title>Documenttitle>
    9. 	head>
    10.  
    11. 	<body>
    12. 		<script>
    13.  
    14.  
    15. 			var sex = [9, 55, 2, 12, 22, 5]
    16.  
    17.  
    18. 			for (var i = 0; i < sex.length - 1; i++) {
    19. 				for (var j = 0; j < sex.length - 1-i; j++) {
    20. 					
    21. 				}
    22. 			}console.log(sex);
    23. 		script>
    24. 	body>
    25.  
    26. html>

     第六步：进行判断

    1. html>
    2. <html lang="en">
    3.  
    4. 	<head>
    5. 		<meta charset="UTF-8">
    6. 		<meta http-equiv="X-UA-Compatible" content="IE=edge">
    7. 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
    8. 		<title>Documenttitle>
    9. 	head>
    10.  
    11. 	<body>
    12. 		<script>
    13.  
    14.  
    15. 			var sex = [9, 55, 2, 12, 22, 5]
    16.  
    17.  
    18. 			for (var i = 0; i < sex.length - 1; i++) {
    19. 				for (var j = 0; j < sex.length - 1; j++) {
    20. 					if (sex[j] > sex[j + 1]) {
    21. 							
    22. 						
    23. 					}
    24. 				}
    25. 			}
    26. 		script>
    27. 	body>
    28.  
    29. html>

    这里我们添加一个判断条件，如果说第一个数大于第二个数，那么我们就把第一个数与第二个数进行一个交换，这里的话就要用到之前说的交换变量

    第七步：交换变量

    1. html>
    2. <html lang="en">
    3.  
    4. 	<head>
    5. 		<meta charset="UTF-8">
    6. 		<meta http-equiv="X-UA-Compatible" content="IE=edge">
    7. 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
    8. 		<title>Documenttitle>
    9. 	head>
    10.  
    11. 	<body>
    12. 		<script>
    13.  
    14.  
    15. 			var sex = [9, 55, 2, 12, 22, 5]
    16.  
    17.  
    18. 			for (var i = 0; i < sex.length - 1; i++) {
    19. 				for (var j = 0; j < sex.length - 1; j++) {
    20. 					if (sex[j] > sex[j + 1]) {
    21. 							var temp = sex[j + 1]
    22. 							sex[j + 1] = sex[j]
    23. 							sex[j] = temp
    24. 						
    25. 					}
    26. 				}
    27. 			}
    28. 		script>
    29. 	body>
    30.  
    31. html>

     这样的话我们就实现了效果，接下面我们输出一下看看

    最后：输出

    1. html>
    2. <html lang="en">
    3.  
    4. 	<head>
    5. 		<meta charset="UTF-8">
    6. 		<meta http-equiv="X-UA-Compatible" content="IE=edge">
    7. 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
    8. 		<title>Documenttitle>
    9. 	head>
    10.  
    11. 	<body>
    12. 		<script>
    13.  
    14.  
    15. 			var sex = [9, 55, 2, 12, 22, 5]
    16.  
    17.  
    18. 			for (var i = 0; i < sex.length - 1; i++) {
    19. 				for (var j = 0; j < sex.length - 1; j++) {
    20. 					if (sex[j] > sex[j + 1]) {
    21. 							var temp = sex[j + 1]
    22. 							sex[j + 1] = sex[j]
    23. 							sex[j] = temp
    24. 						
    25. 					}
    26. 				}
    27. 			}console.log(sex);
    28. 		script>
    29. 	body>
    30.  
    31. html>

     

     

  • 相关阅读:
    确保云原生部署中的网络安全
    WebDAV之π-Disk派盘 + 密码键盘
    修复 Java 错误 $‘ ‘: Command Not Found
    Mybatis复杂查询及动态SQL
    APP为什么用JSON协议与服务端交互：序列化相关知识
    【Flutter】动态可配置组件实现方式(FlutterWeb解析Html标签)
    《向量数据库指南》——Milvus Cloud当初为什么选择向量数据库这个赛道呢？
    eslint常用配置
    nodejs的安装和全局配置(超详细哦)
    深度学习100例-循环神经网络（RNN）心脏病预测 | 第46天
  • 原文地址：https://blog.csdn.net/tea_tea_/article/details/126281120