冒泡排序的理解
冒泡排序(Bubble Sort)是一种简单的排序算法。冒泡排序的基本原理是通过重复遍历数组,每次遍历中找出未排序部分的最大(或最小)元素,将其放到未排序部分的正确位置上。它重复地遍历要排序的数列,一次比较两个元素,如果他们的顺序错误就把他们交换过来。遍历数列的工作是重复地进行直到没有再需要交换,也就是说该数列已经排序完成。这个算法的名字由来是因为越小的元素会经由交换慢慢“浮”到数列的顶端。像水中气泡逐渐上升到水面一样。
排序输出结果如下:
完整参考代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>冒泡排序</title>
</head>
<body>
<script>
let arr = [2, 1, 3, 5, 4]//定义一个数组 数据你可以随便换
// 1.五个数据 一共需要走4趟 外层循环
for (let i = 0; i < arr.length - 1; i++) {
// 2.每一趟交换次数,用里层循环
for (let j = 0; j < arr.length - i - 1; j++) {
if (arr[j] > arr[j + 1]) { // one:进行升序排列
// 开始交换的前提 前一个数大于后一个数
// 3.两个变量交换
let temp //声明一个变量 用于暂存数据
temp = arr[j]
arr[j] = arr[j + 1]
arr[j + 1] = temp
}
}
}
// 4. 输出进行冒泡排序(升序)后的数组
document.write(arr)
</script>
</body>
</html>
这段代码实现了冒泡排序算法,对数组 arr 进行升序排列。下面是对代码的详细解析:
1.定义一个数组,初始化一个包含5个元素的数组
let arr = [2, 1, 3, 5, 4];
2.外层循环:外层循环赋值遍历数组,确定需要进行多少趟比较。因为每一趟比较都会至少将一个最大的数“冒泡”到它最终的位置,所有总共需要进行arr.length -1 趟比较
for (let i = 0; i < arr.length - 1; i++) { }
3.内层循环:内层循环负责在每一趟比较中,从数组的开始到arr.length - i - 1,进行两两比较。因为每一趟结束后,都会有一个数到达最终位置,所有内层循环的界限会逐趟减少。
for (let j = 0; j < arr.length - i - 1; j++) { }
4.比较与交换:如果当前元素arr[j]大于它后面的元素arr[j+1],则交换它们的位置
if (arr[j] > arr[j + 1]) {
let temp //声明一个变量 用于暂存数据
temp = arr[j]
arr[j] = arr[j + 1]
arr[j + 1] = temp
}
5.输出结果
document.write(arr);
主要考查的知识点
- 数组操作:如何遍历数组、如何访问和修改数组元素。
- 条件语句:if 语句的使用,根据条件执行不同的代码块。
- 循环结构:嵌套循环的使用,理解循环变量和循环条件的作用。
- 变量作用域:局部变量和全局变量的区别,以及如何在函数或循环内部正确声明和使用变量。
- 冒泡排序算法:理解冒泡排序的工作原理,包括其时间复杂度和空间复杂度。
- DOM操作:使用 document.write 来输出内容到页面,了解基本的DOM操作方法。
实际开发中我们可以直接用数组的sort()方法进行排序:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let arr = [2, 1, 3, 5, 4]//定义一个数组
// 1、对数组进行升序排列
arr.sort(function (a, b) {
return a - b
})
document.write(arr)// 1,2,3,4,5
// 2、对数组进行降序排列
// arr.sort(function (a, b) {
// return b - a
// })
// document.write(arr)// 5,4,3,2,1
</script>
</body>
</html>