排序算法动画可视化

选择 冒泡 / 插入 / 选择 / 归并 / 快速 / 堆排序,观看每一步比较(黄)、交换(红)、回填(紫)、就位(绿)的动画演示;支持自定义数组、调节规模与速度,实时统计比较与移动次数,纯浏览器本地运行。

算法与控制

动画舞台

比较中 交换 回填写入 已就位
比较 0 次 交换/写入 0 次 步骤 0 / 0 数组 16 个元素

数据集预设(8 种典型输入)

输入分布会显著改变比较与交换次数:近有序时插入排序接近 O(n),全相等不触发任何交换,逆序是冒泡与插入的最坏情况。点击任一预设立即载入并重算全部步骤。

步骤时间轴(点击定位)

横轴为步骤序号,色带按动作类型分段(黄=比较、红=交换、紫=回填、绿=就位)。点击或拖动时间轴上任意位置即可跳转到该步骤,并从初始数组快速回放至该状态。

步骤日志

下方显示最近 14 步,最新在上;复制与导出的内容包含本次排序的全部步骤。

    尚无步骤:点「单步」或「播放」后,这里会逐条记录比较、交换、回填与就位动作。

    六种排序复杂度对照

    算法平均时间最坏时间空间稳定性要点
    冒泡O(n²)O(n²)O(1)稳定相邻比较,每轮把最大值「冒」到末尾
    插入O(n²)O(n²)O(1)稳定近似有序时最快,接近 O(n)
    选择O(n²)O(n²)O(1)不稳定每轮选最小值交换到前部,交换次数最少
    归并O(n log n)O(n log n)O(n)稳定分治两两合并,外部排序与链表首选
    快速O(n log n)O(n²)O(log n)不稳定基准分区,实际平均最快,面试必考
    堆O(n log n)O(n log n)O(1)不稳定大顶堆反复取堆顶 + 下沉调整

    方案管理 · 数值对比 · 导出

    调好的参数可存成方案随时载入,也能生成可分享链接;结果里的数值列会自动画成对比图,并支持导出 CSV / JSON。

    最近方案 暂无

    📊口径说明与常见误填

    看懂每一步怎么动,复杂度就不再是死记。

    四色高亮
    黄=比较、红=交换、紫=回填、绿=已就位,六种算法共用一套色标,动画对照复杂度表读。
    冒泡与插入
    冒泡相邻比较、每轮把最大值冒到末尾;插入把新元素插进前部有序段,近似有序时接近 O(n)。
    归并
    对半拆到单元素再两两合并,紫色回填就是合并写入;稳定排序,代价 O(n) 临时空间。
    快速
    选基准分区:小的换到左边、大的留右边,基准落定标绿后递归两段;平均最快,最坏 O(n²)。
    堆排序
    先自底向上建大顶堆,每轮堆顶与末尾交换标绿,新堆顶逐层下沉,原地 O(1) 空间。

    这个工具解决什么问题

    冒泡、插入、选择、归并、快速、堆六种主流排序逐步动画演示:比较、交换、回填、就位四色高亮,可自定义数组、调规模与速度、单步观察,实时统计比较与移动次数,附复杂度与稳定性对照表;全部在浏览器本地运行,适合学习与面试备考。

    三条学排序铁律

    ① 用色标读懂动作:每一步在比较、交换还是回填说得清,算法就懂了一半;统计栏的比较/移动次数是最直观的复杂度体感。

    ② 稳定性是硬需求:带关联数据的排序必须分清稳定(冒泡/插入/归并)与不稳定(选择/快排/堆);对照表给结论,动画可验证。

    ③ 单步比快放有效:快排的分区边界、堆排序的下沉路径只有单步才看得清,卡壳的环节把速度调到最慢再看一遍。

    怎么用

    1. 第 1 步 · 选算法
      点六种排序按钮之一,舞台即时生成随机数组并预演全部步骤。
    2. 第 2 步 · 调数组与速度
      规模滑块调元素个数,也可输入 2~40 个数字点「应用自定义」。
    3. 第 3 步 · 播放或单步
      「播放」看整体过程,「单步」逐帧观察黄色比较与红色交换。
    4. 第 4 步 · 读统计与对照表
      比较/移动次数实时累计,配合底部复杂度表理解 O(n²) 与 O(n log n) 的差距。

    更新记录

    • v1.0 2026-11-02
    • 2026-11-02 上线首个版本
    • 2026-11-02 完善结果展示

    常见问题

    快速排序过程有动画演示吗?
    本页点「快速排序」即可:每轮选基准(末位),比基准小的换到左边,黄条是正在与基准比较的元素,红条是交换,基准落定后标绿并递归左右两段。可单步观察分区边界如何推进。
    冒泡排序能不能一步一步图解?
    可以:切到冒泡排序后点单步按钮,每一步高亮一对相邻元素,前者大于后者就交换;每一轮结束末尾多一根绿条(该轮最大值就位),n 轮后全部有序。
    归并排序是怎么分的?
    先对半拆分到单元素,再两两合并有序段。动画中紫色柱就是合并时回填的写入:左右两段各取队首较小者依次写回原位置,因此归并是稳定排序,代价是 O(n) 临时空间。
    有排序算法可视化在线工具吗?
    就是本页:六种主流排序全覆盖,比较、交换、回填、就位四色高亮,实时统计比较与移动次数,可自定义数组与播放速度,全部在浏览器本地运行,适合学习与面试备考。
    堆排序的下沉过程怎么演示?
    选堆排序后观察:先自底向上建大顶堆(紫色为下沉中的写入),随后每轮把堆顶最大值与末尾交换并标绿,新的堆顶沿黄色比较线逐层下沉到正确位置,堆长逐轮减一。

    💬 留言板 0

    全部留言需审核通过后展示
    💬

    还没有留言,来抢沙发吧!

    ✍️ 说点什么
    0 / 500
    图形验证码
    👣 做完这一步,顺便看看
    🏛️ 凯撒密码解密 凯撒密码解密 :1~25 位位移加解密、ROT13 一键转换… → 🔤 乱码转换器在线修复 乱码转换器在线 :把“锟斤拷”“�”“涓枃”“😀”等乱… → 📸 代码截图美化工具 在线代码转图片工具:粘贴或输入代码(支持 JavaScrip… → 🎨 WCAG 对比度检测工具 在线颜色对比度检测工具:输入前景文字色与背景色(支持 #he… →
    全部工具 →