面试算法突击
刷题时快排和归并都能排序，但面试官问「为什么快排实际更快」却答不上来。打开本工具，对同一组乱序数组分别跑两种排序，观察元素交换次数和递归树深度。快排在大部分数据上比较次数更少，而归并在数组接近有序时反而有额外开销。亲眼看到动画过程后，面试被问到「排序稳定性」和「最坏情况」时能直接用手势比划出递归栈的变化。
开发者工具 · HTTP / 网络速查
排序算法可视化
冒泡/快排/归并/堆排动画
✓本地处理 · 不上传
✓免费 · 无需登录
✓无次数限制
0 / 0
快速排序Quick Sort
点击「播放」开始动画，或「步进」逐步执行。
0
0
0
0
自定义数组
未排序
比较中
交换 / 写入
已排序
基准 pivot
辅助区 / 边界
第一节
关于本工具
About调试排序算法时，最怕的是看不到数据在内存中如何交换。在浏览器里输入一个整数数组，选择冒泡、快排、归并或堆排，每次比较和交换都会以柱状图动画实时呈现，步进可调。所有运算在浏览器内完成，数组不会离开本地——适合算法课上验证复杂度、面试前复盘排序过程，或单纯想看看快排的分治到底怎么走。
使用场景
期末算法课备课
大二数据结构课，学生总把冒泡和选择排序搞混。用本工具生成 15 个随机整数的排序动画，课堂投屏时让学生看每一轮「红色高亮」的移动轨迹：冒泡是相邻交换、像气泡往上浮，选择是扫描全表后把最小值换到最左。配合暂停功能，在「第 5 轮」定格，让学生数当前已排好的元素个数，比纯板书节省 10 分钟讲解时间。
代码优化排障
自己写的归并排序在 10 万条订单数据上跑了 3 秒，但同事用 C++ STL 的 sort 只要 0.5 秒。用本工具输入相同的 50 个测试数据，分别跑归并和堆排动画，发现归并每次分割都要申请临时数组，堆排在建堆阶段就有大量比较。虽然工具只演示小规模数据，但能直观看出「内存分配次数」对性能的影响，从而决定改用原地排序版本。
算法竞赛复盘
昨晚 Codeforces 的 E 题，用快排做预处理但超时了。把题目给的 20 个关键数据点输入本工具，用「逆序数组」模式跑快排，发现每次选的基准都是最小元素，导致递归深度达到 20 层、退化成冒泡。改用随机基准后递归深度降到 5 层。工具能手动调整「基准选择策略」，帮助理解为什么竞赛中常用三数取中法。
第二节
使用指南
Getting Started使用步骤
- 1在「数据输入」框键入待排序的整数序列，用逗号或空格分隔（如 5,3,8,1），数组长度上限 50
- 2点击「冒泡排序」「快速排序」「归并排序」或「堆排序」按钮，选中算法立即开始动画演示
- 3观察柱状图颜色变化：红色标记当前比较元素，绿色标记已就位元素，每轮交换后柱高实时更新
- 4点击「暂停/继续」按钮可随时冻结动画，拖动「速度」滑块（1x-10x）调节演示快慢
- 5点击「重置」按钮清空当前动画状态，重新输入新序列或直接点选预设示例（如倒序/随机）
输入输出示例
| 输入 | 输出 | 说明 |
|---|---|---|
| 5,3,8,1,2（冒泡排序） | 1,2,3,5,8 | 常规：5 个元素的随机序列，验证冒泡排序基本正确性，动画步数适中，适合首次体验 |
| 1,2,3,4,5（快速排序） | 1,2,3,4,5 | 边界：完全有序数组，快速排序若选首元素为 pivot 会退化为 O(n²)，动画会展示大量交换，暴露算法最坏情况 |
| 5,5,3,3,1（归并排序） | 1,3,3,5,5 | 常规：含重复值的数组，验证稳定排序（归并）保持相等元素的原始相对顺序，动画中相同值不会互换位置 |
| 42（堆排序） | 42 | 边界：单元素数组，所有排序算法应直接返回原值，动画无交换步骤，验证空循环或单步处理逻辑 |
| 9,8,7,6,5,4,3,2,1（冒泡排序） | 1,2,3,4,5,6,7,8,9 | 易错：完全逆序数组，冒泡排序需 n(n-1)/2 次比较，动画会非常长，暴露用户输入过大时页面可能卡顿 |
| 3,1,4,1,5,9,2,6,5,3,5（快速排序） | 1,1,2,3,3,4,5,5,5,6,9 | 常规：含大量重复值的较长数组（11 个元素），测试快速排序对重复 pivot 的分区处理，动画中相同值可能被分到不同子区间 |
| （空输入，点击排序按钮） | 无输出，提示“请输入至少一个数字” | 易错：空输入或仅含空格，工具应给出明确错误提示而非崩溃或输出空数组，验证前端输入校验 |
常见错误对照
1.数组包含重复元素导致排序动画无变化
✗ 错误
[5, 3, 5, 1, 2]✓ 修复
[5, 3, 1, 2, 4]重复元素在冒泡/快排等算法中交换时，视觉上可能看不出元素移动（相同值交换后位置不变），动画效果大打折扣。建议用无重复序列观察排序过程。
2.输入非整数或负数导致排序异常
✗ 错误
3.14, -2, 0, 8✓ 修复
3, -2, 0, 8排序算法通常只处理整数比较，浮点数精度问题（如 3.14 在内存中为 3.1399999）会使比较结果不稳定，动画中元素顺序可能反复跳动。
3.数组长度过小（<3）导致部分算法无动画
✗ 错误
[1, 2]✓ 修复
[9, 3, 7, 1, 5]归并排序、快速排序在数组长度 ≤2 时几乎不产生交换操作，动画仅显示一次比较就结束，无法展示分治/递归过程。建议至少 5 个元素。
4.元素值范围过大（>999）导致柱状图溢出
✗ 错误
[1, 5000, 3, 10000]✓ 修复
[1, 50, 3, 100]可视化组件通常将元素值映射为柱高，超过 999 的值会使柱子超出画布边界，部分元素不可见，破坏动画完整性。建议值控制在 1-200 之间。
5.使用字符串而非数字导致排序结果错误
✗ 错误
['5', '10', '2']✓ 修复
[5, 10, 2]JavaScript 中字符串比较按字典序，'10' < '2' 为 true，排序结果与数值预期完全相反，动画中元素顺序不符合算法逻辑。
6.数组元素包含空格或空值导致解析失败
✗ 错误
3, , 7, 1✓ 修复
3, 7, 1, 5输入框按逗号分割后，空字符串会被当作元素参与排序，导致 NaN 比较，动画可能卡死或显示异常。需确保每个逗号前后都有有效数字。
7.期望堆排序显示完整建堆过程但未观察初始阶段
✗ 错误
直接点击「排序」按钮✓ 修复
先点击「建堆」按钮观察堆化过程，再点击「排序」堆排序分为建堆和排序两个阶段，直接点排序会跳过堆化动画，用户看不到最大堆的构建步骤，误以为算法没有正确执行。
8.快速排序选取固定轴点时未理解其影响
✗ 错误
每次都用第一个元素作为轴点✓ 修复
观察不同轴点策略（首/中/随机）对比较次数的影响固定取首元素作为轴点，在已排序数组上会导致最坏 O(n²) 性能，动画中比较次数激增、交换频繁，容易误判算法效率。
第三节
工作原理
How It Works核心公式
T(n) = O(n²) (冒泡排序最坏情况)
变量说明
T(n)排序所需比较次数，n 为元素数量n待排序数组的元素个数
示例
对 10 个逆序排列的数（如 10,9,8,...,1）进行冒泡排序：最坏情况下需比较 n(n-1)/2 = 10×9/2 = 45 次，每次比较后可能交换，总操作次数约 45 次，时间复杂度为 O(100) 即 O(n²)。
用户输入
本地处理
输出结果
第五节
常见问题
Q & A问这工具怎么用？我点开始没反应。＋
答
先选左侧算法（冒泡/快排/归并/堆排），然后点下方「生成随机数据」按钮，等柱状图出现后，再点「开始排序」才会播放动画。如果直接点「开始排序」而数据区为空，工具不会有反应。另外，动画过程中「开始排序」按钮会变灰，等动画播完或点「重置」后才能再次点击。
问能手动输入数组吗？我想排几个固定数字。＋
答
目前只支持点「生成随机数据」按钮自动生成随机整数数组，暂不支持手动输入或粘贴自定义数组。如果需要对特定数列排序，可以多次点击「生成随机数据」直到出现想要的数字组合，或者调整「数据规模」滑块（范围 10~100）来缩小随机范围。
问为什么冒泡排序比快速排序慢那么多？＋
答
动画按真实步数播放。冒泡排序平均复杂度 O(n²)，对 50 个元素约需 2500 次比较；快速排序平均 O(n log n)，同样 50 个元素约 85 次比较。动画把每次比较和交换都展示出来，所以冒泡的动画时间明显更长。可以打开「速度」滑块调到最快来对比两种算法的总耗时差异。
问动画速度怎么调？想看清楚每一步。＋
答
页面右侧有一个「速度」滑块，从 1（最慢）到 10（最快）。想看清比较和交换细节，建议调到 2~3；只关心整体趋势，调到 8~10 几秒播完。注意：速度 1 时，50 个数据的冒泡排序可能要播 2 分钟以上，建议用小数据量（滑块调到 10~20）配合慢速观看。
问我电脑比较老，动画卡顿怎么办？＋
答
这是纯浏览器端动画，性能依赖设备 CPU。可以尝试：1）把「数据规模」滑块调小（比如 30 以下）；2）把「速度」调到 6 以上减少帧数；3）关闭其他占用 GPU 的标签页。如果还是卡，建议用 Chrome 或 Edge 浏览器，Firefox 和 Safari 的 Canvas 渲染效率稍低。
问归并排序和堆排序看起来差不多，实际哪个更快？＋
答
两者时间复杂度都是 O(n log n)，但常数项不同。堆排序比较次数约 2n log n，归并排序约 n log n，所以归并排序的比较次数只有堆排序的一半左右。但堆排序是原地排序（不额外占内存），归并排序需要 O(n) 额外空间。动画里看不明显，可以打开浏览器开发者工具（F12）的 Performance 面板录制，看两种排序实际占用的 CPU 时间。
问动画播到一半想重新看，必须刷新页面吗？＋
答
不需要刷新。点击「重置」按钮即可清空当前动画状态，恢复到初始柱状图。重置后可以重新选择算法或生成新数据再播放。如果点「重置」后按钮没反应，检查一下动画是否还在运行（「开始排序」按钮是否灰色），等动画自然结束或强制刷新页面。
问数据量最大能设多少？我想测试 1000 个数的排序。＋
答
数据规模滑块上限是 100，不支持 1000 个元素。这是为了保证动画在浏览器端流畅播放——100 个元素时，冒泡排序已有约 10000 次比较/交换动画，再多会导致帧数严重下降甚至浏览器卡死。如果需要测大数据量排序，建议用专业算法库（如 Python 的 sort() 或 C++ 的 std::sort）。
隐私保证所有计算与处理均在你的浏览器本地完成，输入数据不会上传服务器，也不会保存或共享。