可视化学习数据结构和算法

这种可视化的动画真的对我们理解数据结构和算法非常有帮助，尤其是在学习之初，堪称很好的防劝退工具，所以我对这些做了一些整理，希望能帮助到你。


0x00 数据结构在线模拟器
Github 网址：https://github.com/IACJ/react-datastructer
在线网址：https://iacj.github.io/react-datastructer/#/

这个在线的模拟器包含“栈”、“队列”、“堆”、“BST” 等数据结构，每个数据结构以图像的方式展示在我们面前，同时又有各自的帮助文档，可以用鼠标对数据节点进行拖拽，还可以实现各种数据结构的增删改查。
还有一点好的是，这个网站还伴随着一些数据结构的教学材料、简要的复杂度分析、数据结构使用实例，对于理解各种数据结构的原理及运用可以说是相当丝滑了...

网站上还带着使用说明和产品简介，可以说是相当贴心了...

随便点开一个“堆”的，大家体验一下，是不是想赶紧用起来啦...


0x01 VisuAlgo
英文网址：https://visualgo.net/en
中文网址：https://visualgo.net/zh

VisuAlgo 可以说是知名度比较高的一个通过动画学习算法和数据结构的网站了，它最初的建立就是通过可视化让学生更好的理解数据结构和算法。

VisuAlgo 的功能更丰富，它包含了很多的数据结构和算法，从简单的到复杂的都一一包含，而且对于一些新出现的算法也有涉猎，通过可视化动画的方法，帮助我们更轻松透彻的理解算法及原理，尤其是对一些通过文字描述很难理解的算法而言，简直是生命之光。

VisuAlgo 还支持搜索和多种语言的切换，英语不好的同学可以切换成中文，但是现在有一些算法中文翻译的并不全，所以如果能看英文的话还是建议看中文的。


我们随便点开一个排序来看，可以看到它包含之多，还带文字讲解、单步、回退、暂停等功能，真的是功能丰富且强大，当然它不止于此，还包含着更多的东西等着我们去玩儿，赶紧行动起来吧。


0x02 Data Structure Visualizations
网址：https://www.cs.usfca.edu/~galles/visualization/Algorithms.html

这是旧金山大学的一个数据结构和算法的可视化工具，不过它涉及的内容没有 VisuAlgo 多，不过也涉及了很多常用的数据结构和算法。

我们随便打开一个“栈”，左上角就有 Push（进站）、Pop（出栈）、Clear Stack（清空栈），下面可以设置对动画的一些参数，关于具体的使用，还需要大家多做尝试：


0x03 Algorithm Visualizer
Github 网址：https://github.com/algorithm-visualizer/algorithm-visualizer
网址：https://algorithm-visualizer.org/

AV 同样包含了很多可视化的数据结构和算法，包括动态规划、加密算法、回溯算法等，这个项目在 Github 上有 25k+ 的 Star，足以见得它的受欢迎程度：

同样随便点开一个“二叉搜索树”，包括演示区域、过程数据记录和代码演示的部分，而且在代码演示的部分，动画执行到某步的同时代码执行处也会同步，既可以理解代码也可以理解算法原理和过程，真的是相当棒！

0x04 LeetCodeAnimation
网址：https://github.com/MisterBooo/LeetCodeAnimation

这个是我的好朋友程序员吴师兄（五分钟学算法）维护的项目，在 Github 上已经有了 44k+ 的 star，属于头部中的战斗机。

这个项目致力于用动画的形式呈现解LeetCode题目的思路，我们学数据结构与算法，就是为了用，在实际具体的实操环境中往往更能加深对理解，在应用中理解，在理解中应用，才能更快的掌握。

比如删除链表的倒数第 N 个节点：

现在项目还在继续完善，我觉得大家应该 star 一下。


0x05 写在之后

虽然这篇文章介绍的几种可视化动画，可以更轻松的理解数据结构和算法，但我还是建议大家把这个当成一个辅助工具来用，理解以后还是要自己动手写写画画，不要过度依赖，因为方便让人懒惰。

总会有新的东西需要你靠自己去理解，去学习，而不是每次都有通往目的地的捷径，大家共勉。

参考链接：防劝退！数据结构和算法难理解？可视化动画带你轻松透彻理解！——https://mp.weixin.qq.com/s/8GVAmUMqgaFEGJHI9DdvEQ