GitHub上最火的、最值得前端学习的几个数据结构与算法项目!没有之一!
Hello,大家好,我是你们的 前端章鱼猫。
简介
前端章鱼猫从 2016 年加入 GitHub,到现在的 2020 年,快整整 5 个年头了。
相信很多人都没有逛 GitHub 的习惯,因此总会有开源信息的不对称,有哪些优秀的前端开源项目值得学习的也不知道。
从 2018 年开始,我就养成了每天逛 GitHub 的习惯,一般在早上上班前或者中午午休的时候都会逛一下。
看看每天都开源了哪些好的前端项目,还有用到的主流前端技术栈又是哪些,值得我去学习的。
因此也收藏了不少好的开源项目,在此推荐给大家,每周会有一到三篇的文章推送。
希望你在浏览、学习了前端章鱼猫推荐的这些开源项目的过程中,你能学习到更多编程知识、提高编程技巧、找到编程的乐趣。
【前端GitHub】,专注于挖掘 GitHub 上优秀的前端开源项目,抹平你的前端信息不对称,涵盖 JavaScript、Vue、React、Node、小程序、Flutter、Deno、HTML、CSS、数据结构与算法 等等。
以下为【前端GitHub】的第 2 期内容。
前言
算法为王。
想学好前端,先练好内功,内功不行,就算招式练的再花哨,终究成不了高手;只有内功深厚者,前端之路才会走得更远。
本文推荐几个 GitHub 上值得前端学习的数据结构与算法项目,包含 gif 图的演示过程与视频讲解。
数据结构与算法
关于数据结构与算法的 GitHub 项目,star 数由高到低排序。
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
数据结构和算法必知必会的 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)
该仓库是《数据结构和算法之美》《设计模式之美》专栏作者创建的,前端章鱼猫也学习过他的《数据结构和算法之美》,非常不错的学习教程。
awesome-algorithms
此存储库包含不同著名计算机科学算法的 javascript 实现。
该仓库是不错的,不方便学习的地方就是需要安装依赖并运行才能看到效果及文档。
Call:
npm install
To setup repository with documentation
npm run doc
This will build the documentation and open it in your browser.
JS-Sorting-Algorithm
一本关于排序算法的 GitBook 在线书籍 《十大经典排序算法》,使用 JavaScript & Python & Go & Java 实现。
包含冒泡排序、选择排序、插入排序、希尔排序、归并排序、快速排序、堆排序、计数排序、桶排序、基数排序。
该仓库的文章有定义有解释、有代码实现、还有动态图,入门十大经典排序算法是个不错的教程。
JavaScript 数据结构与算法之美
https://github.com/biaochenxuying/blog#-javascript-数据结构与算法之美
包含了 十大经典排序算法 的思想、代码实现、一些例子、复杂度分析、动画、还有算法可视化工具。
这是比较精简的 JavaScript 数据结构与算法 的讲解。
该仓库总共写了 10 篇算法入门的文章
- 时间和空间复杂度
- 线性表(数组、队列、栈、链表)
- 实现一个前端路由,如何实现浏览器的前进与后退 ?
- 栈内存与堆内存 、浅拷贝与深拷贝
- 递归
- 非线性表(树、堆)
- 冒泡排序、选择排序、插入排序
- 归并排序、快速排序、希尔排序、堆排序
- 计数排序、桶排序、基数排序
- 十大经典排序算法汇总
- GitHub 上 170K+ Star 的前端学习的数据结构与算法项目
也是非常不错的数据结构与算法的入门学习资料。
daily-algorithms
算法,每日练习的一个项目。
- ★ 表示 easy,★★ 表示 medium,★★★ 表示 hard;
- 题目主要来自 leetcode,可能会适当变换题设,改变难度;
- 对于 ★ 和 ★★ 难度的题目,每天的量会随机出现 1~5 个,尤其是 ★ 的题目,比较简单。
白天出题,尽量晚上给出参考答案。
项目也不错,是以参与讨论的形式与大家一起学习数据结构与算法的。
就是内容积累还不够多,还不够火。
JavaScript 更多 ...
https://github.com/search?l=JavaScript&o=desc&q=algo&s=stars&type=Repositories
还想知道更多好的数据结构与算法项目,可以点击上面的链接进行搜索。
最后
Star 数最多,但是并不代表该项目就最好并适合你哦,因为有些项目早于几年前就不再更新与维护了。
本文推荐的都是一些真的实用并还在更新的开源仓库,估计都比较适合前端学习。
平时如何发现好的开源项目,可以看看这篇文章:GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目。
本文原文 GitHub 地址:https://github.com/biaochenxuying/FrontEndGitHub
GitHub上最火的、最值得前端学习的几个数据结构与算法项目!没有之一!的更多相关文章
- 强烈推荐 GitHub 上值得前端学习的开源实战项目
强烈推荐 GitHub 上值得前端学习的开源实战项目. Vue.js vue-element-admin 是一个后台前端解决方案,它基于和 element-ui 实现 基于 iView 的 Vue 2 ...
- github上最全的资源教程-前端涉及的所有知识体系【转】
github上最全的资源教程-前端涉及的所有知识体系[转自:蓝猫的博客] 综合类 综合类 地址 前端知识体系 http://www.cnblogs.com/sb19871023/p/3894452.h ...
- GitHub上最火的40个iOS开源项目
1. AFNetworking 在众多iOS开源项目中,AFNetworking可以称得上是最受开发者欢迎的库项目.AFNetworking是一个轻量级的iOS. Mac OS X网络通信类库,现在是 ...
- GitHub上最火的74个Android开源项目
GitHub上最火的74个Android开源项目 1.ActionBarSherlock ActionBarSherlock应该算得上是GitHub上最火的Android开源项目了,它是一个独立的库, ...
- GitHub上最火的Android开源项目(一)
GitHub在中国的火爆程度无需多言,越来越多的开源项目迁移到GitHub平台上.更何况,基于不要重复造轮子的原则,了解当下比较流行的Android与iOS开源项目很是必要.利用这些项目,有时能够让你 ...
- GitHub上最火的74个Android开源项目(三)
此前,推出的GitHub平台上“最受欢迎的开源项目”系列文章引发了许多读者的热议,在“GitHub上最火的40个Android开源项目(一).(二)中,我们也相继盘点了40个GitHub上最受欢迎的A ...
- Github上PHP资源汇总大全,php学习的好资料
Github上PHP资源汇总大全,php学习的好资料 国外程序员ziadoz 在Github上收集整理了PHP的各种资源,内容包括模板.框架.数据库.安全等方面的库和工具.汇总了各种PHP资源,供各位 ...
- 【伯乐在线】最值得阅读学习的 10 个 C 语言开源项目代码
原文出处: 平凡之路的博客 欢迎分享原创到伯乐头条 伯乐在线注:『阅读优秀代码是提高开发人员修为的一种捷径』http://t.cn/S4RGEz .之前@伯乐头条 曾发过一条微博:『C 语言进阶有 ...
- github上最全的资源教程-前端涉及的所有知识体系
前面分享了前端入门资源汇总,今天分享下前端所有的知识体系. 个人站长对个人综合素质要求还是比较高的,要想打造多拉斯自媒体网站,不花点心血是很难成功的,学习前端是必不可少的一个环节, 当然你不一定要成为 ...
随机推荐
- Youtube订阅——解决在弹窗内使用Youtube订阅按钮高度显示不全的问题
背景:公司网站业务在做海外营销网站,为了配合营销工作,前端总要在各种地方添加各种社媒订阅(摊手.jpg):最近遇到的是在弹窗内展示公司的Youtube账号的订阅按钮. 理想:我想使用的例子是这样的: ...
- 最简单的基于FFmpeg的直播系统开发移动端例子:IOS 视频解码器
本文记录IOS平台下基于FFmpeg的视频解码器.该示例C语言的源代码来自于<最简单的基于FFMPEG+SDL的视频播放器>.相关的概念就不再重复记录了. 源代码 项目的目录结构如图所示. ...
- 配置交换机基于接口划分VLAN(接入层设备作为网关)
组网图形 简介 划分VLAN的方式有:基于接口.基于MAC地址.基于IP子网.基于协议.基于策略(MAC地址.IP地址.接口).其中基于接口划分VLAN,是最简单,最常见的划分方式. 基于接口划分VL ...
- C++变量的存储类型
C++变量和函数包括两个属性:数据类型和数据的存储类型.存储类型是指数据在内存中存储的方式.变量的存储类型分为四种:自动类型(auto),寄存器类型(register).静态类型(static)外部类 ...
- vs2010 中取消检测有潜在危险的 Request.Form 值的方法
1,<%@ Page Language="C#" ValidateRequest="false" AutoEventWireup="true&q ...
- 【java从入门到精通】day10-Java流程控制2-switch多选择结构
1.switch多选择结构 switch case语句判断一个变量与一系列值中某个值是否相等,每个值称为一个分支. switch语句中的变量类型可以是: byte.short.int或者char 从j ...
- [开源]CSharpFlink(NET 5.0开发)分布式实时计算框架,PC机10万数据点秒级计算测试说明
github地址:https://github.com/wxzz/CSharpFlinkgitee地址:https://gitee.com/wxzz/CSharpFlink 1 计算 ...
- Spring Cloud Security OAuth2.0 认证授权系列(一) 基础概念
世界上最快的捷径,就是脚踏实地,本文已收录[架构技术专栏]关注这个喜欢分享的地方. 前序 最近想搞下基于Spring Cloud的认证授权平台,总体想法是可以对服务间授权,想做一个基于Agent 的无 ...
- (i春秋 Misc)ReCreators - CryMisc
[i春秋 Misc] [题目链接] i春秋 Misc ReCreators CryMisc ReCreators 下载得到一个文件.老规矩,放入010文本编辑器中查看: 文件头是: KDMV 不清楚. ...
- 不是吧!做了两年java还没弄懂JVM堆?进来看看你就明白了
堆的核心概述 一个JVM实例只存在一个堆内存,堆也是java内存管理的核心区域Java堆区在jvm启动的时候被创建,其空间大小也就确定了.是jvm管理的最大一块内存空间.(堆内存的大小可以调节)< ...