4. 冒泡排序原理与动画

冒泡排序就是相邻两个比大小，大的往后冒泡，每轮把最大的推到最后。

核心三步：
① 外层循环——控制走几轮（n-1 轮）
② 内层循环——每轮相邻两个比，大的交换
③ 交换位置——用临时变量中转

坑：内层每轮少比一个（末尾已经排好）、i 和 j 别搞混、交换要用临时变量。

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

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

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

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

// 一开始乱序
let arr = [3, 9, 5, 1, 8, 2];

// 外层：一共比 length-1 轮（6个数比5轮就够）
// 内层：相邻两个比；尾巴 i 个已经排好，不用再比，所以 -i
for (let i = 0; i < arr.length - 1; 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;
    }
  }
}

// 最后就排好了：[1,2,3,5,8,9]
console.log(arr);

② 为什么外层 -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)，别手写冒泡。

本页重点

let x = arr[j];

if (arr[j] > arr[j + 1]) { /* 交换 */ }

let t = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = t;

for (let j = 0; j < arr.length - 1; j++) {}