算法和数据结构的有趣应用_我构建了一个应用程序，使学习算法和数据结构的方式更加有趣...

算法和数据结构的有趣应用

by peterWeinberg

彼得·温伯格

我构建了一个应用程序，使学习算法和数据结构的方式更加有趣 (I built an app that makes learning algorithms and data structures way more fun)

I’m a self-taught programmer. This means I’m constantly dealing with impostor syndrome. It’s not uncommon for me to feel like I’m inadequate, and at a disadvantage for grasping complex Computer Science concepts.

我是一个自学成才的程序员 。 这意味着我一直在处理冒名顶替综合症 。 对于我来说我并不足够，并且在掌握复杂的计算机科学概念方面处于不利地位，这对我来说并不罕见。

I’ve never been any good at math. And I’ve always tied strong math skills to one’s natural ability to excel at programming. I feel like I have to work harder than others (who have innate skills in math) to learn the same concepts. With this idea rooted deep in my brain, I was pretty sure I’d never be able to learn things like traversing binary search trees, and how to mentally parse recursive nightmares like Mergesort.

我从来都不擅长数学。 而且我一直将强大的数学技能与开发编程的天生能力联系在一起。 我觉得我必须比其他人(他们具有天生的数学技能)更加努力地学习相同的概念。 有了这个想法，我就很确定自己永远无法学习遍历二进制搜索树之类的东西，以及如何从心理上解析诸如Mergesort之类的递归噩梦。

Though with a little effort, I managed to surprise myself. So I wanted to share a bit about how, and the tangible results of my efforts. As always, with the hope that there might be some contributors out there willing to pitch in!

尽管稍作努力，我还是感到惊讶。 因此，我想分享一些有关我的工作方式和实际结果的信息。 与往常一样，希望有一些贡献者愿意参与其中！

Enter CS-Playground-React, a simple in-browser JavaScript sandbox for learning and practicing algorithms and data structures.

输入CS-Playground-React ，这是一个简单的浏览器内JavaScript沙箱，用于学习和练习算法和数据结构。

This no-sign-up interview prep app saves your progress automatically, offers solutions for when you get stuck, and comes chock-full of links to helpful articles, tutorials, and other resources to help make your journey a lot less painful than mine was!

这款无需注册的面试准备应用程序会自动保存您的进度，为您遇到麻烦时提供解决方案，并提供大量有用的文章，教程和其他资源的链接，以帮助您减轻旅途中的痛苦！

Let me acknowledge outright that this app is nothing groundbreaking. (I know you were thinking it!) There are a ton of apps out there that teach similar skills and give you the ability to write and run code right in your browser.

我要完全承认这个应用程序不是什么开创性的工具。 (我知道您在想！)那里有大量的应用程序可以教类似的技能，并使您能够在浏览器中编写和运行代码。

But CS Playground React intends to be extremely minimalistic, and hones in on a very specific set of topics. Plus, this is not meant to be the next big thing. Building this app was just my way of making learning this stuff fun. If it ends up being a valuable resource for even one other person along the way, all the better.

但是CS Playground React打算极度简化，并专注于非常特定的主题集。 另外，这并不意味着下一件大事。 构建这个应用程序只是我使学习这些东西变得有趣的方式。 如果最终它甚至可以成为其他人的宝贵资源，那就更好了。

The app is still a work in progress, and there’s plenty of ground left to cover when it comes to subject matter and potential features. So if you know a cool challenge or data structure I haven’t covered, or see something you think you can improve, don’t hesitate to open an issue or submit a pull request. ?

该应用程序仍在开发中，涉及主题和潜在功能时，还有很多基础可以解决。 因此，如果您知道我没有讲过很酷的挑战或数据结构，或者看到您认为可以改进的内容，请随时提出问题或提交请求。 ？

If you just want to check out the app, read no more — it’s live here (also available over https, will register service worker for offline caching).

如果您只想签出该应用程序，请继续阅读-它位于此处 (也可以通过https访问，将注册服务工作者以进行离线缓存)。

If you’re interested in the code, look no further.

如果您对代码感兴趣， 就不要再看了 。

The rest is all the boring stuff about the why and the how :-)

其余的都是关于为什么和如何的无聊内容:-)

我为什么建造这个 (Why I built this)

My motivations for building this app were simple: I wanted to learn, and I wanted to make learning easier and more fun. More important, is why I wanted to learn these specific skills.

建立这个应用程式的动机很简单：我想学习，并且想让学习更轻松有趣。 更重要的是为什么我想学习这些特定技能。

Over the past 18 months or so, I can confidently say I’ve learned how to code. Though I still hesitate to call myself a programmer. And this is not because I don’t code for a living (I don’t), but more or less because of the impostor syndrome phenomenon I referenced earlier. I know how to build stuff, sure. But up until very recently, I knew very little about formal Computer Science.

在过去的18个月左右的时间里，我可以自信地说我已经学会了编码。 尽管我仍然不愿意称自己为程序员。 这不是因为我不写生活代码(不是)，而是因为我之前提到的冒名顶替综合症现象。 我知道如何制作东西。 但是直到最近，我对正规计算机科学的了解还是很少。

By learning CS fundamentals, I hoped to not only feel more confident in thinking of myself as a programmer, but to help others see me that way too.

通过学习CS基础知识，我希望不仅对将自己视为一名程序员感到更有信心，而且希望也能帮助其他人以这种方式看待我。

Self-taught programmers are a pill that the tech industry has found easier to swallow in recent years. Especially in areas like Silicon Valley, where coding bootcamps have sprung up on every street corner.

自学成才的程序员是近年来高科技行业发现更容易被吞噬的一剂药。 尤其是在像硅谷这样的地区，每个街道拐角处都出现了代码训练营。

Yet, there’s still a major hurdle to overcome for most programmers hoping to enter the industry without a formal Computer Science education.

但是，对于大多数希望在没有正规计算机科学教育的情况下进入该行业的程序员来说，仍然有许多障碍需要克服。

So to help lessen the blow of holding a Bachelors of Arts rather than a Bachelors of Science, I set out to teach myself some of the concepts that a first or second year CS student might learn. I thought that this would complement some of my more practical development skills, and help others to take me more seriously as a programmer.

因此，为了减轻持有文学学士学位而不是理科学士学位的负担，我着手自学一些一年级或二年级CS学生可能会学习的概念。 我认为这将补充我一些更实际的开发技能，并帮助其他人更加重视我作为程序员的工作。

I used a set of topics known to be common to programming interviews as the baseline that I wanted to cover.

我将编程采访中常见的一组主题用作我要覆盖的基线。

Bubble Sort, Selection Sort, Insertion Sort, Merge Sort, Quick Sort, Heap Sort, Stacks, Queues, Linked Lists, Hash Tables, and Binary Search Trees. Phwewf…

气泡排序，选择排序，插入排序，合并排序，快速排序，堆排序，堆栈，队列，链接列表，哈希表和二进制搜索树。 Phwewf…

I was super intimidated by this line-up of problems, and had been putting off tackling them for quite some time.

我对这一系列问题深感震惊，并且已经推迟解决这些问题了一段时间了。

Unwilling to accept defeat, I finally began to dig in. Tracking down tutorials, reading every article I could find, and running circles of confusion around myself day after day.

我不愿接受失败，我终于开始深入研究。跟踪教程，阅读我能找到的每一篇文章，并日复一日地在自己周围产生混乱。

In time, though, some of the concepts were beginning to sink in. But there were a couple of problems:

但是，随着时间的流逝，一些概念开始出现。但是有两个问题：

1. I was getting kind of bored. I love problem solving, but let’s face it, solving reverseLevelOrder traversal of a binary search tree is a lot less fun than solving a real-world problem for your latest app.

   我有点无聊。 我喜欢解决问题，但让我们面对现实吧，解决二进制搜索树的reverseLevelOrder遍历比解决最新应用程序的实际问题要少很多乐趣。

2. This was very time consuming. I work full-time (NOT writing code all day) and my free time to code is extremely valuable. I knew I’d be spending months on this, and I became concerned that I would lose touch with my more marketable skills.

   这非常耗时。 我全职工作(不整天编写代码)，我的空闲时间非常宝贵。 我知道我会花数月的时间，而且我担心自己会失去与更适销对路的技能的联系。

All this CS stuff is great to have under your belt, but let’s face it, most often we web devs get hired to build stuff. And there aren’t too many practical uses for most of these concepts in every day web development.

所有这些CS东西都很适合随身携带，但是让我们面对现实吧，通常是我们Web开发人员被雇用来构建东西。 在每天的Web开发中，大多数这些概念并没有太多实际用途。

For me, learning these concepts were a point of pride, and I wasn’t going to give up. But my number one priority was still to be proficient in practical web development.

对我来说，学习这些概念是一个骄傲，而我也不会放弃。 但是我的头等大事仍然是精通实用的Web开发。

So I decided to bring the two ideas together. The answer was to build a simple app that would help me achieve my goals and keep me well-practiced in my core skills.

因此，我决定将这两个想法结合在一起。 答案是构建一个简单的应用程序，该应用程序可以帮助我实现目标并保持我的核心技能训练有素。

To me, the best way to learn something (especially something dry), is to relate it to something you love. So as I was building this app, and having a blast doing it, I was also developing content for it.

对我而言，学习某些东西(尤其是干的东西)的最好方法是将其与您喜欢的东西联系起来。 因此，当我构建此应用程序并进行爆炸时，我也在为其开发内容。

Now, learning algos and data structures was a necessary part of my latest project. Because, of course, what’s the point of building an interview prep app unless you’re going to fill it with problems!

现在，学习算法和数据结构是我最新项目的必要部分。 因为，当然，除非要解决问题，否则构建面试准备应用程序有什么意义！

Every few days, I was learning a new algorithm or data structure. Once I almost had it down, I would compile the learning resources and add it to the app. Now, I could practice it over and over again in a super simple workspace that I built myself. How cool is that!?

每隔几天，我就会学习一种新的算法或数据结构。 一旦差一点就可以编译学习资源并将其添加到应用程序中。 现在，我可以在自己构建的超级简单工作区中反复练习。 多么酷啊！？

The main point is, I took something I had been putting off for a long time, and found a way to make it fun. And sure enough, I had greater success in achieving my goals because of it.

要点是，我拿走了很久以来一直拖延的东西，并找到了使之有趣的方法。 毫无疑问，因此我在实现目标方面取得了更大的成功。

I built this app for me, but I wanted to share it with you all for a reason. If even one other person finds CS-Playground-React useful, I’ll feel like I’ve done my part (or at least part of it) to give back to this community.

我为我构建了此应用，但出于某种原因我想与大家分享。 如果甚至还有其他人认为CS-Playground-React有用，我会觉得我已经尽了自己的一部分(或至少一部分)回馈了这个社区。

There are so many programmers out there who freely share their knowledge and experiences, and ask for little or nothing in return. Without such an open minded community, learning to code on your own would hardly be possible.

那里有这么多的程序员，他们自由地分享他们的知识和经验，并要求很少甚至没有回报。 没有这样一个开放的社区，几乎不可能独自学习编码。

Ten years ago, there were far fewer options when it came to self-guided learning. So I’m grateful every day for living in an information age where so much knowledge is so readily accessible.

十年前，自助学习的选择很少。 因此，我每天都为生活在如此容易获得大量知识的信息时代而感恩。

It made this journey possible for me, and I hope someone else out there will stumble upon this article and discover that their own journey has gotten just a little bit easier.

它使我的旅程成为可能，我希望在那里的其他人会偶然发现这篇文章，并发现他们自己的旅程变得稍微容易一些。

技术堆栈和黑客 (Tech Stack & Hacks)

In case you’re interested, I built this app with React & React-Redux (although the first version was vanilla JS, CSS, and HTML). It also uses CodeMirror and React-Codemirror2 to embed an editor into the browser (NOTE: the original React-CodeMirror is no longer maintained and doesn’t play well with newer versions of React, so go give Scniro’s repo a star on GitHub for picking up the slack!).

如果您有兴趣，我使用React＆React-Redux构建了这个应用程序(尽管第一个版本是原始JS，CSS和HTML)。 它还使用CodeMirror和React-Codemirror2将编辑器嵌入到浏览器中(注意：原来的React-CodeMirror已不再维护，并且不能在React的较新版本中很好地使用，因此请在GitHub上给Scniro的repo一颗星来弥补松弛！)。

模拟控制台 (Mock console)

A little hack allows me to fire a redux action every time a user calls console.log in their code. In this way, I can capture the logged messages and in turn mock out a console in the browser to show the code’s output — which I thought was kind of cool! You can run clearConsole() any time you want to clear the mock console’s messages.

有了一点小技巧，我就可以在用户每次在其代码中调用console.log时触发redux动作。 这样，我可以捕获记录的消息，然后在浏览器中模拟一个控制台以显示代码的输出-我认为这很酷！ 您可以在想要清除模拟控制台的消息时随时运行clearConsole() 。

持续码 (Persisting Code)

I wanted to make this app super easy to use. So instead of implementing a database and asking users to login, I chose a simpler approach for saving progress. Redux manages the application’s state during each session, and I use localStorage for persisting code across sessions. The app retrieves this saved state on your next visit, and rehydrates the Redux store with it. This way you can pick up right where you left off.

我想让这个应用程序超级好用。 因此，我没有实现数据库并要求用户登录，而是选择了一种更简单的方法来保存进度。 Redux在每个会话期间管理应用程序的状态，我使用localStorage在各个会话之间持久保存代码。 该应用程序会在您下次访问时检索此保存的状态，并使用它为Redux商店重新补水。 这样，您可以从上次停靠的地方接起。

If for some reason you want to erase all your progress, you can run resetState() at any time in the editor. If you do not want to commit your code to local storage, leave a // DO NOT SAVE comment in your code before navigating away. This will prevent saving any code, not only for that file.

如果出于某种原因要删除所有进度，则可以随时在编辑器中运行resetState() 。 如果您不想将代码提交到本地存储，请在浏览之前在代码中// DO NOT SAVE注释。 这将防止保存任何代码，而不仅限于该文件。

As a side note, it turns out that there’s a package that does this for you, called Redux-Persist (which I found out after the fact). But for a simple use-case, if you can do something with a few lines of code, or install an NPM package to do the same thing? I’ll choose the former every time. Chances are, you’re saving hundreds of lines of code and a whole new set of dependencies. It’s always a give and take, and you have to decide when the highly optimized (but heavier weight) solution is better than your simplistic one.

附带说明一下，事实证明，有一个程序包可以帮您做到这一点，称为Redux-Persist(我在事后发现了它)。 但是对于一个简单的用例，是否可以用几行代码来完成某件事，或者安装一个NPM软件包来完成同一件事？ 我会每次选择前者。 您可能会节省数百行代码和一整套新的依赖关系。 这始终是一种让步，您必须决定何时高度优化(但重量较重)的解决方案比简单化的解决方案更好。

可调整大小的窗格 (Resizable Panes)

The last trick I had up my sleeve was making the workspace flexible and easy to use. I wanted to give users the ability to resize both the editor and the console, so I used a little script I found called simpleDrag.js, React refs, and the magic of flexbox to make this possible.

我束手无策的最后一招是使工作区灵活易用。 我想让用户能够同时调整编辑器和控制台的大小，因此我使用了一个名为simpleDrag.js ，React refs和flexbox的小脚本来实现这一点。

Thanks for reading, and happy hacking!

感谢您的阅读，并祝您黑客愉快！

翻译自: https://www.freecodecamp.org/news/i-built-an-app-that-makes-learning-algorithms-and-data-structures-way-more-fun-46fbb8afacaf/

算法和数据结构的有趣应用

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！