← 返回学科目录

快速排序算法动画

挖坑法 + 分治递归 - 交互式教学演示

控制面板

快速排序采用分治策略:①选基准元素(通常选第一个);②分区:将比基准小的放左边,比基准大的放右边;③递归排序左右两部分。平均时间复杂度O(nlogn),最坏O(n²)。是不稳定的原地排序算法。

中速

算法状态

基准值 (坑): -
左指针 (i): -
右指针 (j): -
比较次数: 0
交换次数: 0
递归深度: 0
点击"开始排序"按钮启动算法动画演示...

数组可视化

基准/坑
左指针
右指针
当前比较
已确定位置
已处理区间

算法代码 (挖坑法)

function quickSort(arr, left, right) {
if (left >= right) return;
let pivot = partition(arr, left, right);
quickSort(arr, left, pivot - 1);
quickSort(arr, pivot + 1, right);
}
function partition(arr, left, right) {
let pivot = arr[left]; // 挖坑:取最左元素为基准
let i = left, j = right;
while (i < j) {
while (i < j && arr[j] >= pivot) {
j--; // 从右向左找小于基准的元素
}
if (i < j) {
arr[i] = arr[j]; // 填左坑,挖右坑
i++;
}
while (i < j && arr[i] <= pivot) {
i++; // 从左向右找大于基准的元素
}
if (i < j) {
arr[j] = arr[i]; // 填右坑,挖左坑
j--;
}
}
arr[i] = pivot; // 基准归位
return i;
}

递归调用栈

栈空
### 3. 过程输出 ### 3. 过程输出 ## 快速排序算法交互式教学动画使用指南 欢迎使用“快速排序算法动画——挖坑法+分治递归”交互式教学工具!本指南将帮助您充分利用这个精心设计的教学动画,深入理解快速排序算法的核心原理。 ### 🎯 功能说明 本动画采用“挖坑法”这一形象化方式,生动展示了快速排序算法的完整执行过程。通过视觉化呈现、代码同步高亮和递归栈可视化,将抽象算法转化为直观、易于理解的动态演示。 ### 🚀 主要功能 #### 1. **核心动画演示** - **挖坑法可视化**:清晰展示基准值如何作为“坑”,左右指针如何交替“填坑”和“挖新坑” - **实时状态显示**:高亮显示当前基准值、左右指针、比较元素和已排序元素 - **平滑过渡动画**:所有元素移动和状态变化都采用流畅的动画效果 #### 2. **交互控制面板** - **播放控制**:开始、暂停、单步执行、重置 - **速度调节**:10档速度调节(从“极慢”到“最快”) - **数据管理**:支持自定义数组输入和多种预设数组 #### 3. **多视图同步** - **算法代码视图**:伪代码与动画步骤同步高亮 - **递归栈可视化**:动态显示递归调用层次和待处理区间 - **状态信息面板**:实时显示比较次数、交换次数、指针位置等关键信息 #### 4. **数据输入选项** - **自定义数组**:输入任意数字序列(逗号或空格分隔) - **预设数组**: - 随机数组:每次生成不同的测试数据 - 已排序数组:观察算法在最优情况下的表现 - 逆序数组:观察算法在最坏情况下的表现 ### ✨ 设计特色 #### 1. **认知友好的视觉设计** - **颜色编码系统**: - 🔴 红色:基准值/坑位 - 🔵 蓝色:左指针 (i) - 🟢 绿色:右指针 (j) - 🟡 黄色:当前比较元素 - 🟠 橙色:已确定位置的元素 - 🟣 紫色:已处理区间 - **分层信息展示**:从宏观流程到微观操作,层层递进 #### 2. **教学导向的交互设计** - **渐进式学习**:支持从完整播放到单步调试的学习模式 - **错误预防**:输入验证和合理的默认值设置 - **上下文提示**:每一步都有详细的中文说明 #### 3. **技术实现亮点** - 响应式Canvas渲染,适配不同屏幕尺寸 - 状态机管理,确保动画逻辑清晰 - 模块化代码结构,便于理解和扩展 ### 📚 教学要点 #### 核心概念理解路径 1. **第一阶段:整体认知**