最开始
数据结构和算法的重要性不言而喻,但是对于我这种脑袋不太好使的人来说,往往过了一段时间就不怎么记得其中的细节了。毕竟这些东西虽然重要,但是对于咱们大多数人、实际工作中并不会直接去实现它;但是如果面试过程中被问到这些基本的数据结构算法、我们如果答不上来、那就尴尬了。于是我脑海里便有了这么一个小程序、平常只需要等公交坐地铁的时候、通过手机看看就能回顾复习这些数据结构算法的内容了。
小程序
微信里搜索 数据结构算法演示 (猫猫头像的那个)
因为咱还是前端初学者,源码暂时就不贴了,等哪天代码写的好看点再放上github地址吧
看看效果和实现原理
这是首页,完全照抄微信官方小程序示例
这是其中一个页面:冒泡排序
主要有几个功能:
- next:前进
- pre:后退
- reset:重置数据
- random:随机数据
- showCode:显示算法的源码
- autoPlay:自动播放
- getTip:算法每一个步骤的提示内容
实现步骤大概是这样的
1. 根据算法操作的数据(这里是list数组)画出对应的图形(冒泡排序这里就是一组矩形、不同的高度代表不同的大小)
2. next和pre根据算法内容操作数据list这样就可以做出动画演示了
3. 根据list和当前的状态,实现对应的步骤提示:例如选中第几个item、交换哪两个item
这里我贴下冒泡排序最核心的实现
// 这里我贴下冒泡排序的实现
let {list, status, i, j} = this.data;
if (i >= list.length - 1) {
// 这里是算法结束的判断
this.pause();
return;
}
// 因为要做next所以需要一个history来存储所有的data
let history = this.data.history.slice();
history.push({
list: list.slice(),
i: i,
j: j,
status: status
})
if (status === 0) {
if (list[j] > list[j + 1]) {
await this.exchange(j, j + 1);
let temp = list[j];
list[j] = list[j + 1];
list[j + 1] = temp;
status = 1;
} else {
j++;
}
} else {
status = 0;
j++;
}
if (j >= list.length - i - 1) {
j = 0;
i++;
}
功能简介
主要分为几个模块:排序、线性表、查找、二叉树、图、贪心算法、动态规划、安全、其他(有部分我还没写完,感觉优先级不那么高、要是有人催我我就搞出来哈)
- 排序
- 冒泡排序
- 插入排序
- 选择排序
- 快速排序
- 堆排序
- 归并排序
- 桶排序
- 计数排序
- 希尔排序
- 基数排序
- 线性表
- 数组
- 链表
- 栈
- 队列
- 查找
- 顺序查找
- 二分查找
- 插值查找
- 分块查找
- 哈希查找
- 深度优先搜索
- 广度优先搜索
- KMP(todo)
- RK(todo)
- 二叉树
- 数据结构
- 先序遍历
- 中序遍历
- 后序遍历
- 红黑树(todo)
- 图
- 数据结构
- 深度优先遍历
- 广度优先遍历
- 最短路径(迪杰斯特拉算法)
- 最短路径(佛洛依德算法)
- 最短路径(贝尔曼-福特算法)(todo)
- 拓扑排序
- 最小生成树
- 最小生成树(Prim算法)
- 最小生成树(Kruskal算法)
- 贪心算法
- 核心思思
- 教室调度问题
- 背包问题
- 动态规划
- 核心思想
- 背包问题
- 矩形最小路径和
- 最长公共子序列
- 安全(todo)
- 其他算法
- 链表有环
- 数组第K大数
- 二叉树最近公共祖先(todo)