GitHub 上值得前端学习的数据结构与算法项目

前端章鱼猫从 2016 年加入 GitHub，到现在的 2020 年，快整整 5 个年头了。

相信很多人都没有逛 GitHub 的习惯，因此总会有开源信息的不对称，有哪些优秀的前端开源项目值得学习的也不知道。

从 2018 年开始，我就养成了每天逛 GitHub 的习惯，一般在早上上班前或者中午午休的时候都会逛一下。

看看每天都开源了哪些好的前端项目，还有用到的主流前端技术栈又是哪些，值得我去学习的。

因此也收藏了不少好的开源项目，在此推荐给大家，每周会有一到三篇的文章推送。

希望你在浏览、学习了前端章鱼猫推荐的这些开源项目的过程中，你能学习到更多编程知识、提高编程技巧、找到编程的乐趣。

★

【前端GitHub】，专注于挖掘 GitHub 上优秀的前端开源项目，抹平你的前端信息不对称，涵盖 JavaScript、Vue、React、Node、小程序、Flutter、Deno、HTML、CSS、数据结构与算法 等等。

”

以下为【前端GitHub】的第二期内容。

前言

–

★

算法为王。

”

★

想学好前端，先练好内功，内功不行，就算招式练的再花哨，终究成不了高手；只有内功深厚者，前端之路才会走得更远。

”

本文推荐几个 GitHub 上值得前端学习的数据结构与算法项目，包含 gif 图的演示过程与视频讲解。

数据结构与算法

---

关于数据结构与算法的 GitHub 项目，star 数由高到低排序。

javascript-algorithms

★

https://github.com/trekhleb/javascript-algorithms

”

该仓库包含了多种基于 JavaScript 的算法与数据结构。

每种算法和数据结构都有自己的 README，包含相关说明和链接，以便进一步阅读 (还有 YouTube 视频) 。

数据结构包含了 链表、双向链表、队列、栈、哈希表(散列)、堆、优先队列、字典树、树、优先队列、二叉查找树、AVL 树、红黑树、线段树、树状数组、图、并查集、布隆过滤器

算法包含了 算法主题 和 算法范式。

其中算法主题又包含了：数学、集合、字符串、搜索、排序、链表、树、图、加密、机器学习。

算法范式：算法范式是一种通用方法，基于一类算法的设计。这是比算法更高的抽象，就像算法是比计算机程序更高的抽象。

算法范式包含了：BF 算法、贪心法、分治法、动态编程、回溯法、Branch & Bound 等等。

这项目还出了对应的教学视频，总共 81 个视频讲解，每个视频大概 5 - 10分钟左右，还能学习英语哦 ???

★

youtube 的教学视频：https://www.youtube.com/playlist?list=PLLXdhg_r2hKA7DPDsunoDZ-Z769jWn4R8

”

前端章鱼猫之前学习算法的时候，也在这个项目中收益良多呢！

而且这个项目还一直有维护和更新内容哦！真的非常不错的一个项目！

---

algorithm-visualizer

★

https://github.com/algorithm-visualizer/algorithm-visualizer

”

算法可视化工具是一个交互式的在线平台，可以从代码中可视化算法。

通过可视化方法学习算法变得容易得多。

Algorithm Visualizer 是一款有趣的在线开源工具，内含多种算法并进行了直观可视化呈现, 让学习算法和数据结构更加直观。

目前支持的算法包括回溯法、加密算法、动态规划、图搜索、贪婪算法、搜索算法、排序算法等。

Algorithm Visualizer 的目录区，选择任何算法，中间就会动态演示，日志输出区记录每次搜索的过程。

该算法可视化工具是一个用 React 编写的 web 应用程序。它包含 UI 组件并将命令解释为可视化。

如果你是算法初学者，强烈推荐这个「算法可视化」工具 Algorithm Visualizer，很清晰地绘制了每一个基础算法的原理和运作流程。

算法可视化工具

---

algo

★

algo: https://github.com/wangzheng0822/algo

”

数据结构和算法必知必会的 50 个代码实现。

包含数组、链表、栈、队列、递归、排序、二分查找、散列表、字符串、二叉树、堆、图、回溯、分治、动态规划 等。

每个代码实现有解释，测试用例。

// 选择排序

const selectionSort = (arr) => {

if (arr.length <= 1) return

// 需要注意这里的边界, 因为需要在内层进行 i+1后的循环，所以外层需要 数组长度-1

for (let i = 0; i < arr.length - 1; i++) {

let minIndex = i

for (let j = i + 1; j < arr.length; j++) {

if (arr[j] < arr[minIndex]) {

minIndex = j // 找到整个数组的最小值

}

}

const temp = arr[i]

arr[i] = arr[minIndex]

arr[minIndex] = temp

}

console.log(arr)

}

const test = [4, 5, 6, 3, 2, 1]

bubbleSort(test)

const testSort = [4, 1, 6, 3, 2, 1]

insertionSort(testSort)

const testSelect = [4, 8, 6, 3, 2, 1, 0, 12]

selectionSort(testSelect)

该仓库是《数据结构和算法之美》《设计模式之美》专栏作者创建的，前端章鱼猫也学习过他的《数据结构和算法之美》，非常不错的学习教程。

小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频

如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）

文末

js前端的重头戏，值得花大部分时间学习。

推荐通过书籍学习，《 JavaScript 高级程序设计（第 4 版）》你值得拥有。整本书内容质量都很高，尤其是前十章语言基础部分，建议多读几遍。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

另外，大推一个网上教程 现代 JavaScript 教程 ，文章深入浅出，很容易理解，上面的内容几乎都是重点，而且充分发挥了网上教程的时效性和资料链接。

学习资料在精不在多，二者结合，定能构建你的 JavaScript 知识体系。

面试本质也是考试，面试题就起到很好的考纲作用。想要取得优秀的面试成绩，刷面试题是必须的，除非你样样精通。

这是288页的前端面试题

dnimg.cn/img_convert/6065b7d33c9a5859971490467a967767.png)

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

另外，大推一个网上教程 现代 JavaScript 教程 ，文章深入浅出，很容易理解，上面的内容几乎都是重点，而且充分发挥了网上教程的时效性和资料链接。

学习资料在精不在多，二者结合，定能构建你的 JavaScript 知识体系。

面试本质也是考试，面试题就起到很好的考纲作用。想要取得优秀的面试成绩，刷面试题是必须的，除非你样样精通。

这是288页的前端面试题