我写了个小程序用来演示数据结构算法

最开始

数据结构和算法的重要性不言而喻，但是对于我这种脑袋不太好使的人来说，往往过了一段时间就不怎么记得其中的细节了。毕竟这些东西虽然重要，但是对于咱们大多数人、实际工作中并不会直接去实现它；但是如果面试过程中被问到这些基本的数据结构算法、我们如果答不上来、那就尴尬了。于是我脑海里便有了这么一个小程序、平常只需要等公交坐地铁的时候、通过手机看看就能回顾复习这些数据结构算法的内容了。

小程序

微信里搜索 数据结构算法演示 (猫猫头像的那个)

因为咱还是前端初学者，源码暂时就不贴了，等哪天代码写的好看点再放上github地址吧

看看效果和实现原理

这是首页，完全照抄微信官方小程序示例

首页.jpeg

这是其中一个页面：冒泡排序

冒泡.jpeg

主要有几个功能：

1. next：前进
2. pre：后退
3. reset：重置数据
4. random：随机数据
5. showCode：显示算法的源码
6. autoPlay：自动播放
7. 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)