图解JavaScript冒泡排序执行过程：双重循环怎么交换数据

一、冒泡排序的基本原理与相邻比较

在待排序数组中，元素往往处于无序状态。冒泡排序（Bubble Sort）之所以得名，是因为它模拟了物理世界中气泡在水中上浮的特征。每次从数组的起始位置开始，两两比对相邻的两个数值。若前者大于后者，则通过数据重写交换两者的位置；若前者不大于后者，则保持不动并继续考察下一对相邻元素。

以单次遍历为例，当指针从索引 0 移动到未排序序列末端时，该区域内的最大值必然会在每一次比对中胜出并持续后移，最终稳稳落在该区域的最右侧固定下来。随着执行轮次的递增，已经归位的数据不再参与后续比对，待处理的区域逐步缩窄，直至全部元素有序排列。

二、双重循环的职责划分：外层定边界，内层比相邻

要实现上述过程，单层循环无法完成多次扫描和区间收缩，必须借由双重循环协作完成。理解双重循环各自的职责，是掌握算法执行轨迹的关键：

• 外层循环 for (let i = 0; i < len - 1; i++)：控制总体执行的轮次。设数组长度为 len，最多只需要执行 len - 1 轮。每当外层完成一轮，数组末尾就会新锁定一个处于最终正确位置的最大元素。
• 内层循环 for (let j = 0; j < len - 1 - i; j++)：负责在每一轮中进行具体的相邻元素比对。循环上限为 len - 1 - i，其中的 - 1 防止 j + 1 索引越界，而 - i 则是排除已经完成排序的末尾 i 个元素，避免不必要的重复运算。

图 1：双重循环职责划分与动态边界缩进架构图

三、数据交换的实现：传统临时变量 vs ES6 解构

当满足 arr[j] > arr[j + 1] 时，程序必须交换两项的数值。在 JavaScript 中，直接编写 arr[j] = arr[j + 1] 会立刻覆盖掉 arr[j] 的原值，导致原有数据丢失。解决交换问题有两种主流写法：

1. 借助中间临时变量（经典写法）

引入一个辅助变量 temp 暂存前项的值，随后将后项的值赋给前项，最后把 temp 的内容写入后项。这是底层语言最普遍的思路，执行效率极高。

// 方式一：临时变量
let temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;

2. 使用 ES6 数组解构赋值（现代语法）

利用 JavaScript 现代语法的解构表达式，可以在一行代码内完成两数的镜像互换，无需显式声明辅助变量，语义十分直观。

// 方式二：ES6 解构赋值
[arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];

图 2：相邻比对与数据交换微观时态图

四、完整单轮执行拆解：以 [5, 3, 8, 4, 2] 为例

为了让读者直观感受内层循环的流动，我们以具体数组 [5, 3, 8, 4, 2] 进行第一轮（i = 0）全过程追踪。此时数组长度 len = 5，内层循环范围为 j = 0 到 j < 5 - 1 - 0（即 j 依次取 0、1、2、3）：

可以看到，在 j = 3 结束时，数字 8 经过连续比对和位置互换，已经成功抵达数组末端。此时第 1 轮（i = 0）宣告结束，末尾的 8 进入“已锁定”状态，在随后的所有循环中无需再参与任何比对。

五、多轮推进与整体收敛过程

外层循环随着 i 的增加持续推进，数组从未排序状态逐步过渡为完全有序状态。各轮次状态演进如下：

图 3：多轮推进与数据锁定演进图

六、关键优化：利用标志位提前终止循环

在基础冒泡排序中，即使数组在中间某轮已经完全排好序，或者传入的本身就是一个有序数组（例如 [1, 2, 3, 4, 5]），外层循环依然会死板地执行完全部 len - 1 轮。这种空转会消耗大量的 CPU 运算周期。

优化的核心逻辑非常简单：如果某一整轮比对中，没有任何相邻元素发生交换，说明当前所有元素已经满足升序条件，后续所有轮次均可直接跳过。我们可以在外层循环内设置一个布尔标志变量 hasSwapped：

/**
 * 优化后的冒泡排序函数
 * @param {number[]} arr 待排序数组
 * @returns {number[]} 排序后的数组
 */
function bubbleSort(arr) {
  const len = arr.length;
  if (len <= 1) return arr;

  for (let i = 0; i < len - 1; i++) {
    let hasSwapped = false; // 记录本轮是否发生过交换

    for (let j = 0; j < len - 1 - i; j++) {
      if (arr[j] > arr[j + 1]) {
        // 使用 ES6 解构完成交换
        [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];
        hasSwapped = true; // 触发交换标记
      }
    }

    // 若本轮无任何交换，表明已整体有序，直接退出
    if (!hasSwapped) {
      break;
    }
  }

  return arr;
}

// 验证示例
const demoArray = [5, 3, 8, 4, 2];
console.log(bubbleSort(demoArray)); // 输出: [2, 3, 4, 5, 8]

七、冒泡排序执行机制与算法特性总结

通过上述图解与代码拆解，我们可以归纳出 JavaScript 冒泡排序执行的核心全景视图：

图 4：冒泡排序执行原理与工程特征全景图

八、常见误区与注意事项

• 内层循环的越界问题：很多初学者容易将内层循环条件写成 j < len。此时在循环体内访问 arr[j + 1]，当 j 为最后一个索引时，arr[j + 1] 返回 undefined，arr[j] > undefined 始终评估为 false，不仅浪费比对次数，还容易在严格类型校验环境下引发隐蔽缺陷。务必保证内层减去 1。
• 忘记减去 i 的效率损失：内层条件只写 j < len - 1 虽然最终也能得出正确排序，但这会导致后方已经就位锁定的元素在每一轮中都被重复比对，失去算法随轮次递减区间的优化价值。
• 原地排序对原数组的副作用：无论是 temp 交换还是解构赋值交换，都是直接在原数组内存地址上进行读写。如果业务场景需要保留原始序列，应在执行循环前通过 const copy = [...arr] 生成浅拷贝再行排序。