← 返回目录

4. 冒泡排序原理与动画

冒泡排序是面试和作业的高频手写算法，名字很形象：大（小）的数像水里吐的泡泡，一轮轮自己「浮」到尾巴上去。别死背代码，先点动画看懂外层管几轮、内层管相邻两个比、为什么每轮要 -i。

4.1 互动演示（冒泡排序动画，一步一步看）

4.2 知识点逐条讲解（配合代码）

① 冒泡排序原理：相邻两个比大小，不合适就换

想象一排数站成一排，从头开始挨着的两个互相比：前面比后面大，就交换位置。一轮走完，当前最大的那个就像泡泡一样「咕嘟」浮到最尾巴。再来一轮，第二大的浮到倒数第二……直到全排好。

let arr = [3, 9, 5, 1, 8, 2];   // 一开始乱序
// 外层：一共比 length-1 轮（6个数比5轮就够）
for (let i = 0; i < arr.length - 1; i++) {
    // 内层：相邻两个比；尾巴 i 个已经排好，不用再比，所以 -i
    for (let j = 0; j < arr.length - 1 - i; j++) {
        // 前一个比后一个大，就交换位置（这样大的往后浮）
        if (arr[j] > arr[j+1]) {
            let temp = arr[j];     // 先把前一个倒进临时杯
            arr[j] = arr[j+1];     // 后一个盖到前一个位置
            arr[j+1] = temp;       // 临时杯里的倒到后一个位置
        }
    }
}
console.log(arr);  // 最后就排好了：[1,2,3,5,8,9]

	

② 为什么外层 -1、内层 -i？（作业必问）

交换两个数必须借个临时杯。如果你直接 arr[j]=arr[j+1] 盖过去，原来的数就丢了。所以三步：let temp=arr[j]; arr[j]=arr[j+1]; arr[j+1]=temp; 动画里红色是正在比，绿色是已经就位。

⑥ X.3 实战：用在哪 / 常见坑 / 怎么解决

① 用在哪：面试手写算法、作业要求手写排序、对少量数据排序理解原理。

② 常见坑：忘了三变量交换要临时杯、内层没 -i 多做无用功、想降序却没改 > 成 <。

③ 怎么解决：对着动画走一遍；真项目直接用 arr.sort((a,b)=>a-b)，别手写冒泡。