废话不多说，先上代码
```
<!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>
<span>这是原始值</span></span><div id="original"></div>
<span>这是冒泡值</span><div id="div"></div>
<script>
let arr = [99,12,32,34,14,88,66,555]
document.getElementById("original").innerText = arr
// console.log(arr)
// length: 8
let out=0;//轮数
let inside=0;//一共次数
// out:7 inside:49
// 冒泡排序优化 (1) ://每轮比较少比较一次。（每一轮都会比较出一个最大值，然后后一轮没有必要再比较了，所以每比较一轮，就少比较一次。。。） j<a.length-1-i 。 优化后：out:7 , Inside:21
// 冒泡排序优化 (2) : // //bool这个变量默认值为true;如果本轮比较有一对元素相互交换位置，那么也不能跳出循环。
//但是，如果本轮比较没有任何元素相互交换位置，那么说明已经比较完成，可以跳出循环。之前I循环排序已经完成，但是j循环还没有结束，优化后 out:3,inSide:18
function bubbling (arr){
// i循环是有多少个数组就执行多少次j循环
for(let i = 1; i < arr.length ; i++){ // 为什么从1开始不是0？因为第一个数字不用
let bloo = true
console.log("执行I循环",arr)
// j 循环是一轮，然后依次对比，把大的放后面,1轮只能把一个最大的排到最后面。
for(let j = 0; j < arr.length -1 - i ; j++){
// 只有当前面一个数组大于后面一个才执行
if(arr[j] > arr[j+1]){
let map = 0;
map = arr[j] // 容器暂存
arr[j] = arr[j+1] // 调换位置
arr[j+1] = map
bloo = false
console.log("执行J",arr)
}
inside++
}
if(bloo){
break
}
out++
}
return arr
}
bubbling(arr)
document.getElementById("div").innerText = arr
console.log(arr)
console.log(out,"out")
console.log(inside,"inside")
</script>
</body>
</html>
```
