一、冒泡排序
1、什么是冒泡排序?
冒泡排序的英文Bubble Sort,是一种最基础的交换排序。之所以叫做冒泡排序,因为每一个元素都可以像小气泡一样,根据自身大小一点一点向数组的一侧移动。
2、冒泡排序图解
3、冒泡排序的优缺点
优点:较为简单,排序比较稳定,空间复杂度低。
缺点:排序过程过于复杂,时间复杂度过高,效率较慢。
4、代码展示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var arr=[7,3,6,10,99,88]
for(i=0;i<arr.length;i++){
for(j=i+1;j<arr.length;j++)
{if(arr[i]>arr[j]){
var trmp = arr[i]
arr[i]=arr[j]
arr[j]=trmp
}
}
}
console.log('排序后为:',arr)
</script>
</body>
</html>
效果展示:
二、选择排序
1、什么是选择排序
选择排序(Selection sort)是一种简单直观的排序算法。它的工作原理是:第一次从待排序的数据元素中选出最小(或最大)的一个元素,存放在序列的起始位置,然后再从剩余的未排序元素中寻找到最小(大)元素,然后放到已排序的序列的末尾。以此类推,直到全部待排序的数据元素的个数为零。选择排序是不稳定的排序方法。
2、选择排序图解
3、选择排序的优缺点
优点:每次排序比较秩序更换一次位置
缺点:相比较于冒泡排序,选择排序的效率比较慢,也不如冒泡排序稳定。
4、代码展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
var arr = [90,3,6,7,99,88,100,73,37]
for(i=0;i<arr.length-1;i++){
var min = i;
for(var j=i+1;j<arr.length;j++){
if(arr[j]<arr[min]){
min=j
}
}
if(min!=i){
var temp = arr[min]
arr[min]=arr[i]
arr[i]=temp
}
}
console.log(arr)
</script>
</body>
</html>
效果如下:
三、插入排序
1、什么是插入排序
插入排序(InsertionSort),一般也被称为直接插入排序。
对于少量元素的排序,它是一个有效的算法。插入排序是一种最简单的排序方法,它的基本思想是将一个记录插入到已经排好序的有序表中,从而一个新的、记录数增 1 的有序表。在其实现过程使用双层循环,外层循环对除了第一个元素之外的所有元素,内层循环对当前元素前面有序表进行待插入位置查找,并进行移动。
2、插入排序图解
3、插入排序的优缺点
优点:稳定并且相对于冒泡排序和选择排序更快。
缺点:比较次数不一定,比较次数越少,插入点后的数据移动次数越多,特别是当数据总量很大的时候。
4、代码展示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var num = [7,98,65,30,40,5]
for(i=1;i<num.length;i++){
for(j=i;j>0;j--){
if(num[j-1]>num[j]){
temp=num[j-1]
num[j-1]=num[j]
num[j]=temp
}
}
}
console.log(num)
</script>
</body>
</html>
效果展示: