排序算法可视化是指通过图形方式展示数组在排序过程中的实时变化，帮助理解比较和交换的细节。在JavaScript中，我们可以把算法逻辑和页面渲染分开，让算法每执行一步就通知视图更新。
核心设计思路
实现可视化的关键是将排序算法改写为可暂停、可记录状态的形式。通常做法是在算法中嵌入一个回调函數，每次数组发生变化就调用它，把当前数组的副本传给渲染层。
状态快照与渲染分离
算法只负责计算，不直接操作DOM；渲染层接收数组数据，画出对应高度的柱子。这样同一套算法可以搭配不同渲染方式。
- 算法层：冒泡、快速等排序函数，接受onStep回调
- 渲染层：根据数组值生成柱状图或Canvas图形
- 控制层：控制速度、开始、暂停
冒泡排序可视化示例
下面用原生JavaScript和DOM实现一个简单的冒泡排序可视化。每次交换后记录状态并绘制。
// 待排序数据
let data = [5, 3, 8, 4, 2];
// 获取容器
const container = document.getElementById('chart');
// 渲染函数：把数组画成div柱子
function render(arr) {
container.innerHTML = '';
arr.forEach(function(v) {
const bar = document.createElement('div');
bar.style.height = (v * 20) + 'px';
bar.style.width = '30px';
bar.style.display = 'inline-block';
bar.style.margin = '0 2px';
bar.style.background = '#3498db';
container.appendChild(bar);
});
}
// 冒泡排序，带可视化回调
function bubbleSort(arr, onStep) {
let a = arr.slice();
for (let i = 0; i < a.length; i++) {
for (let j = 0; j < a.length - i - 1; j++) {
if (a[j] > a[j + 1]) {
let tmp = a[j];
a[j] = a[j + 1];
a[j + 1] = tmp;
onStep(a.slice());
}
}
}
return a;
}
// 执行并逐步渲染
render(data);
bubbleSort(data, function(snapshot) {
setTimeout(function() {
render(snapshot);
}, 500);
});
使用Canvas提升性能
当数据量较大时，频繁操作DOM会卡顿。可改用Canvas绘制，在onStep中清屏并重绘所有柱子，减少节点数量。
| 方式 | 优点 | 缺点 |
|---|---|---|
| DOM柱子 | 简单易调试 | 数据多时性能差 |
| Canvas | 流畅支持大数据 | 代码稍复杂 |
扩展其他算法
快速排序、插入排序只需在对应交换或赋值位置调用onStep，渲染层无需修改。这种解耦结构让你专注算法本身，可视化只是附加观察手段。
注意：可视化中的数组应是副本，避免外部排序影响原数据引用。
JavaScript排序算法数据可视化修改时间：2026-07-31 10:42:10