防劝退！数据结构和算法难理解？可视化动画带你轻松透彻理解！

妖狐艹你老母 2023-06-16 07:46 5阅读 0赞

点击蓝色“五分钟学算法”关注我哟

加个“星标”，天天中午 12:15，一起学算法

![format_png][]

作者 | Rocky0429

来源 | Python空间

学过数据结构和算法的都知道这玩意儿不好学，没学过的经常听到这样的说法还没学就觉得难，其实难吗？真难！  
难在哪呢？当年我还是个小蒟蒻，初学数据结构和算法的时候，在忍着枯燥看完定义原理，之后想实现的时候，觉得它们的过程真的是七拐八绕，及其难受。  
在简单的链表、栈和队列这些我还能靠着在草稿上写写画画理解过程，但是到了数论、图论的时候，中间实现的过程步骤开始剧增，那个时候靠写写画画和对程序的单步调试强行理解，作为一个智商一直被压制的惨人，稍不注意就会重新来过，陷入死循环...  
后来搞 ACM 之初，我的队友给了我一个数据结构模拟器的压缩包（后来知道好像是严蔚敏数据机构那本书光盘里带的），里面是对一些数据结构的模拟操作，一步步的很形象，有些东西好像一下子就通了...  
  
![format_png 1][]  
这种可视化的动画真的对我们理解数据结构和算法非常有帮助，尤其是在学习之初，堪称很好的防劝退工具，所以我对这些做了一些整理，希望能帮助到你。  
  
  
**0x00 数据结构在线模拟器**

Github 网址：https://github.com/IACJ/react-datastructer

在线网址：https://iacj.github.io/react-datastructer/\#/

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

![format_png 3][]

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

![format_png 4][]

**0x01 VisuAlgo**

英文网址：https://visualgo.net/en

中文网址：https://visualgo.net/zh

VisuAlgo 可以说是知名度比较高的一个通过动画学习算法和数据结构的网站了，它最初的建立就是通过可视化让学生更好的理解数据结构和算法。  
VisuAlgo 的功能更丰富，它包含了很多的数据结构和算法，从简单的到复杂的都一一包含，而且对于一些新出现的算法也有涉猎，通过可视化动画的方法，帮助我们更轻松透彻的理解算法及原理，尤其是对一些通过文字描述很难理解的算法而言，简直是生命之光。  
VisuAlgo 还支持搜索和多种语言的切换，英语不好的同学可以切换成中文，但是现在有一些算法中文翻译的并不全，所以如果能看英文的话还是建议看中文的。

![format_png 5][]

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

![format_png 6][]

**0x02 Data Structure Visualizations**

网址：https://www.cs.usfca.edu/~galles/visualization/Algorithms.html

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

![format_png 7][]

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

![format_png 8][]

**0x03 Algorithm Visualizer**

Github 网址：https://github.com/algorithm-visualizer/algorithm-visualizer

网址：https://algorithm-visualizer.org/

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

![format_png 9][]

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

![format_png 10][]

**0x04 LeetCodeAnimation**

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

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

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

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

![format_png 11][]

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

**0x05 写在之后**

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

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

看完有所收获？点个**在看**，让更多人可以看到~谢谢啦

今天的分享就到这，拜里个拜~

**-----------------------****公众号：五分钟学算法** **（ID：CXYxiaowu** **）****博客：www.cxyxiaowu.com****知乎：程序员吴师兄****一个正在学习算法的人，致力于将算法讲清楚！**长按下图二维码关注，和你一起领悟算法的魅力 **。**

![format_png 12][]

**戳一下下方的小程序，24 小时一起学算法**

[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2pwZy9ENjdwZWNlaWJlSVFUN2tTdnJpYk9tQW5HeGpGczdaMWhTZjhrbjJQRUlrWTlwaWJWaWJraDZ0SW15WkdEdzZpYnhSNW9ibnZqVWliOXlRYkR6RHpvOWxNaHNhQS82NDA_d3hfZm10PWpwZWc?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2pwZy9HZ3Z5d3hOOWJEc2ZmTnhyaWFoZTdqNkY3OG1sM2NiOVRhenBEcWRQcFdDeG5tdjlDT1NDSUJFRE96TkRHREZkekpqdk5qS243TktIWExpYVU2SmdQNlJBLzY0MD93eF9mbXQ9anBlZw?x-oss-process=image/format,png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2pwZy9HZ3Z5d3hOOWJEc2ZmTnhyaWFoZTdqNkY3OG1sM2NiOVQ1NXpSYnhFdzZKNHRCOWRGMk0xSlNRQThScklFeHlFNlhnN1pCWVRLaWN1U2xzTEM1aHZOTjZBLzY0MD93eF9mbXQ9anBlZw?x-oss-process=image/format,png
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9HZ3Z5d3hOOWJEc2ZmTnhyaWFoZTdqNkY3OG1sM2NiOVRrR2dDdm51ZXNpYkF5RWJIcU1FRVVTaFAwcEc1aWJlOUs1aWJLVVRGVXN0WmdnWHRINDZzenBhT1EvNjQwP3d4X2ZtdD1wbmc?x-oss-process=image/format,png
[format_png 4]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9HZ3Z5d3hOOWJEc2ZmTnhyaWFoZTdqNkY3OG1sM2NiOVRWWjl1N3lOU055aFhIdUpBeHdnVTdKekw0cWliZGRJZ0hvaWFDYkJOVEdIc2syajdTODJLaFBTUS82NDA_d3hfZm10PXBuZw?x-oss-process=image/format,png
[format_png 5]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9HZ3Z5d3hOOWJEc2ZmTnhyaWFoZTdqNkY3OG1sM2NiOVRJZ1YxTkV5ZU8ydlFBY1RHVkM4U2VGaWM3SGo1V3V3dHpoMmJhbTNCRFd1ZlBNT2pPYmZUNUhnLzY0MD93eF9mbXQ9cG5n?x-oss-process=image/format,png
[format_png 6]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9HZ3Z5d3hOOWJEc2ZmTnhyaWFoZTdqNkY3OG1sM2NiOVRBZnZJcm1vdkpJU2NBVUdOUzRWblVpYnVMaGljbkVXVnpPdHRTdzNtQW1FZXdiS0FEU2dpY091cmcvNjQwP3d4X2ZtdD1wbmc?x-oss-process=image/format,png
[format_png 7]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9HZ3Z5d3hOOWJEc2ZmTnhyaWFoZTdqNkY3OG1sM2NiOVRVVjA5eWoydEMyUzVUTWljT3o0ZEZpYkVSNnBoNEhJdjVzdGVZQlNKemppY0ZlTXBYTkdyVHRha1EvNjQwP3d4X2ZtdD1wbmc?x-oss-process=image/format,png
[format_png 8]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2pwZy9HZ3Z5d3hOOWJEc2ZmTnhyaWFoZTdqNkY3OG1sM2NiOVR0RFR6N0Iza1p1eWt5MDBFQnhyUEZMUXZpYjFvaGlhZWdvenBkY3ppYlNNZ2NhRDJacEhPYkpCdkEvNjQwP3d4X2ZtdD1qcGVn?x-oss-process=image/format,png
[format_png 9]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9HZ3Z5d3hOOWJEc2ZmTnhyaWFoZTdqNkY3OG1sM2NiOVRCMW9HeTlXdmx1N29yWG8zSndhTHg1TjhRdFRwUndKSE5GckQwc0FhZW5uUnpwS1lOcG9LZ0EvNjQwP3d4X2ZtdD1wbmc?x-oss-process=image/format,png
[format_png 10]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9HZ3Z5d3hOOWJEc2ZmTnhyaWFoZTdqNkY3OG1sM2NiOVRCUkhJWkVBQ2UxMjBrZGZUSDNtcmlhMEp1ZUI1MlhOaWNsSTYyRE9EbElWb0FiWWVoMkxOTWJsZy82NDA_d3hfZm10PXBuZw?x-oss-process=image/format,png
[format_png 11]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2dpZi9HZ3Z5d3hOOWJEc2ZmTnhyaWFoZTdqNkY3OG1sM2NiOVRIUm9RRzNLOEJqYW1GeWljNlpRcWlhN0VQbmgxTUFmMFY4Q3FkZlp0ODk4ZzM1ckZrVk9KV2Yxdy82NDA_d3hfZm10PWdpZg?x-oss-process=image/format,png
[format_png 12]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2pwZy9ENjdwZWNlaWJlSVJnTjYxb1pBaWFiNHpKOE9SbG03ektWY2lhUTFGRFFkSHFpYXA5UjlmTWRVM29BWkxiNEwxWk50dnFzeFFLbGljVkxpY0d4ekZ2NFRmV3BtQS82NDA_d3hfZm10PWpwZWc?x-oss-process=image/format,png