JS实现常见的排序算法可视化_javascript技巧
冒泡排序通过高亮比较元素和延迟重绘实现动画，2. 快速排序用颜色标记分区与基准并异步递归展示过程，3. Canvas绘制柱状图实时反映排序变化，4. DOM结合CSS过渡实现简单条形图可视化，核心是拆解算法步骤并动态反馈。
排序算法可视化不仅能帮助理解算法的执行过程，还能提升学习兴趣。通过JavaScript结合HTML5的Canvas或DOM操作，可以轻松实现动态展示排序过程。下面介绍几种常见排序算法的实现与可视化方法。
1. 冒泡排序 + 可视化
冒泡排序通过重复遍历数组，比较相邻元素并交换位置，将最大值“浮”到末尾。
在可视化中，每轮比较和交换都可以用颜色高亮当前元素，并延迟执行以观察过程。
- 用不同颜色表示正在比较的两个元素（如黄色）和已排序部分（如绿色）
- 使用
setTimeout控制动画节奏，模拟逐步排序 - 每次交换后重绘柱状图或数值块
示例核心逻辑：
function bubbleSort(arr, updateView) { const n = arr.length; for (let i = 0; i < n; i++) { for (let j = 0; j < n - i - 1; j++) { if (arr[j] > arr[j + 1]) { [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]]; updateView(arr, j, j + 1); // 触发视图更新 } } } }
ateView) {
const n = arr.length;
for (let i = 0; i < n; i++) {
for (let j = 0; j < n - i - 1; j++) {
if (arr[j] > arr[j + 1]) {
[arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];
updateView(arr, j, j + 1); // 触发视图更新
}
}
}
}
2. 快速排序 + 动态展示
快速排序采用分治思想，选择基准元素将数组分为两部分，递归排序。
可视化难点在于递归过程不易线性展示，可通过颜色区分处理区间和基准元素。
- 用深色标记当前分区范围，红色突出基准元素
- 每完成一次分区重绘一次图形
- 使用异步递归或Promise链控制执行顺序
关键点：避免阻塞主线程，可用requestAnimationFrame或setTimeout分步执行。
3. 使用Canvas绘制排序动画
Canvas适合绘制大量图形元素，比如用柱状图表示数组值。
每个柱子高度对应数值大小，排序过程中实时重绘。
- 创建
元素并获取上下文 - 编写drawBars(arr, highlightIndices)函数绘制所有柱子
- highlightIndices参数用于标记当前操作的位置
- 清空画布后重新绘制，形成动画效果
示例调用：
function updateView(arr, a, b) {
setTimeout(() => {
drawBars(arr, [a, b]); // 高亮第a、b个柱子
}, speed * step++);
}
4. DOM方式实现简单可视化
若不想使用Canvas，可用div模拟条形图，通过CSS控制高度和颜色。
每次数据变化时更新对应div的样式，配合过渡动画更流畅。
- 创建一组class为"bar"的div，数量等于数组长度
- JS中修改每个div的height和backgroundColor属性
- 添加transition: all 0.1s ease让颜色和高度变化更自然
适合初学者快速上手，代码直观易懂。
基本上就这些。掌握基础排序逻辑后，加上延时控制和视觉反馈，就能做出清晰的可视化效果。关键是把算法步骤拆解成可观察的动作，让用户看到“发生了什么”。
