GitHub 上值得前端學(xué)習(xí)的數(shù)據(jù)結(jié)構(gòu)與算法項(xiàng)目

Hello，大家好，我是你們的 前端章魚(yú)貓。

簡(jiǎn)介

前端章魚(yú)貓從 2016 年加入 GitHub，到現(xiàn)在的 2020 年，快整整 5 個(gè)年頭了。

相信很多人都沒(méi)有逛 GitHub 的習(xí)慣，因此總會(huì)有開(kāi)源信息的不對(duì)稱，有哪些優(yōu)秀的前端開(kāi)源項(xiàng)目值得學(xué)習(xí)的也不知道。

從 2018 年開(kāi)始，我就養(yǎng)成了每天逛 GitHub 的習(xí)慣，一般在早上上班前或者中午午休的時(shí)候都會(huì)逛一下。

看看每天都開(kāi)源了哪些好的前端項(xiàng)目，還有用到的主流前端技術(shù)棧又是哪些，值得我去學(xué)習(xí)的。

因此也收藏了不少好的開(kāi)源項(xiàng)目，在此推薦給大家，每周會(huì)有一到三篇的文章推送。

希望你在瀏覽、學(xué)習(xí)了前端章魚(yú)貓推薦的這些開(kāi)源項(xiàng)目的過(guò)程中，你能學(xué)習(xí)到更多編程知識(shí)、提高編程技巧、找到編程的樂(lè)趣。

★

【前端GitHub】，專注于挖掘 GitHub 上優(yōu)秀的前端開(kāi)源項(xiàng)目，抹平你的前端信息不對(duì)稱，涵蓋 JavaScript、Vue、React、Node、小程序、Flutter、Deno、HTML、CSS、數(shù)據(jù)結(jié)構(gòu)與算法 等等。

”

以下為【前端GitHub】的第二期內(nèi)容。

前言

★

算法為王。

”

★

想學(xué)好前端，先練好內(nèi)功，內(nèi)功不行，就算招式練的再花哨，終究成不了高手；只有內(nèi)功深厚者，前端之路才會(huì)走得更遠(yuǎn)。

”

本文推薦幾個(gè) GitHub 上值得前端學(xué)習(xí)的數(shù)據(jù)結(jié)構(gòu)與算法項(xiàng)目，包含 gif 圖的演示過(guò)程與視頻講解。

數(shù)據(jù)結(jié)構(gòu)與算法

關(guān)于數(shù)據(jù)結(jié)構(gòu)與算法的 GitHub 項(xiàng)目，star 數(shù)由高到低排序。

javascript-algorithms

★

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

”

該倉(cāng)庫(kù)包含了多種基于 JavaScript 的算法與數(shù)據(jù)結(jié)構(gòu)。

每種算法和數(shù)據(jù)結(jié)構(gòu)都有自己的 README，包含相關(guān)說(shuō)明和鏈接，以便進(jìn)一步閱讀 (還有 YouTube 視頻) 。

數(shù)據(jù)結(jié)構(gòu)包含了 鏈表、雙向鏈表、隊(duì)列、棧、哈希表(散列)、堆、優(yōu)先隊(duì)列、字典樹(shù)、樹(shù)、優(yōu)先隊(duì)列、二叉查找樹(shù)、AVL 樹(shù)、紅黑樹(shù)、線段樹(shù)、樹(shù)狀數(shù)組、圖、并查集、布隆過(guò)濾器

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

其中算法主題又包含了：數(shù)學(xué)、集合、字符串、搜索、排序、鏈表、樹(shù)、圖、加密、機(jī)器學(xué)習(xí)。

算法范式：算法范式是一種通用方法，基于一類算法的設(shè)計(jì)。這是比算法更高的抽象，就像算法是比計(jì)算機(jī)程序更高的抽象。

算法范式包含了：BF 算法、貪心法、分治法、動(dòng)態(tài)編程、回溯法、Branch & Bound 等等。

這項(xiàng)目還出了對(duì)應(yīng)的教學(xué)視頻，總共 81 個(gè)視頻講解，每個(gè)視頻大概 5 - 10分鐘左右，還能學(xué)習(xí)英語(yǔ)哦 ??

★

youtube 的教學(xué)視頻：https://www.youtube.com/playlist?list=PLLXdhg_r2hKA7DPDsunoDZ-Z769jWn4R8

”

前端章魚(yú)貓之前學(xué)習(xí)算法的時(shí)候，也在這個(gè)項(xiàng)目中收益良多呢！

而且這個(gè)項(xiàng)目還一直有維護(hù)和更新內(nèi)容哦！真的非常不錯(cuò)的一個(gè)項(xiàng)目！

algorithm-visualizer

★

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

”

算法可視化工具是一個(gè)交互式的在線平臺(tái)，可以從代碼中可視化算法。

通過(guò)可視化方法學(xué)習(xí)算法變得容易得多。

Algorithm Visualizer 是一款有趣的在線開(kāi)源工具，內(nèi)含多種算法并進(jìn)行了直觀可視化呈現(xiàn), 讓學(xué)習(xí)算法和數(shù)據(jù)結(jié)構(gòu)更加直觀。

目前支持的算法包括回溯法、加密算法、動(dòng)態(tài)規(guī)劃、圖搜索、貪婪算法、搜索算法、排序算法等。

Algorithm Visualizer 的目錄區(qū)，選擇任何算法，中間就會(huì)動(dòng)態(tài)演示，日志輸出區(qū)記錄每次搜索的過(guò)程。

該算法可視化工具是一個(gè)用 React 編寫(xiě)的 web 應(yīng)用程序。它包含 UI 組件并將命令解釋為可視化。

如果你是算法初學(xué)者，強(qiáng)烈推薦這個(gè)「算法可視化」工具 Algorithm Visualizer，很清晰地繪制了每一個(gè)基礎(chǔ)算法的原理和運(yùn)作流程。

algo

★

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

”

數(shù)據(jù)結(jié)構(gòu)和算法必知必會(huì)的 50 個(gè)代碼實(shí)現(xiàn)。

包含數(shù)組、鏈表、棧、隊(duì)列、遞歸、排序、二分查找、散列表、字符串、二叉樹(shù)、堆、圖、回溯、分治、動(dòng)態(tài)規(guī)劃 等。

每個(gè)代碼實(shí)現(xiàn)有解釋，測(cè)試用例。

//?選擇排序
const?selectionSort?=?(arr)?=>?{
????if?(arr.length?<=?1)?return
????//?需要注意這里的邊界,?因?yàn)樾枰趦?nèi)層進(jìn)行?i+1后的循環(huán)，所以外層需要?數(shù)組長(zhǎng)度-1
????for?(let?i?=?0;?i?????????let?minIndex?=?i
????????for?(let?j?=?i?+?1;?j?????????????if?(arr[j]?????????????????minIndex?=?j?//?找到整個(gè)數(shù)組的最小值
????????????}
????????}
????????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)

該倉(cāng)庫(kù)是《數(shù)據(jù)結(jié)構(gòu)和算法之美》《設(shè)計(jì)模式之美》專欄作者創(chuàng)建的，前端章魚(yú)貓也學(xué)習(xí)過(guò)他的《數(shù)據(jù)結(jié)構(gòu)和算法之美》，非常不錯(cuò)的學(xué)習(xí)教程。

awesome-algorithms

★

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

”

此存儲(chǔ)庫(kù)包含不同著名計(jì)算機(jī)科學(xué)算法的 javascript 實(shí)現(xiàn)。

該倉(cāng)庫(kù)是不錯(cuò)的，不方便學(xué)習(xí)的地方就是需要安裝依賴并運(yùn)行才能看到效果及文檔。

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

★

https://github.com/hustcc/JS-Sorting-Algorithm

”

一本關(guān)于排序算法的 GitBook 在線書(shū)籍 《十大經(jīng)典排序算法》，使用 JavaScript & Python & Go & Java 實(shí)現(xiàn)。

包含冒泡排序、選擇排序、插入排序、希爾排序、歸并排序、快速排序、堆排序、計(jì)數(shù)排序、桶排序、基數(shù)排序。

該倉(cāng)庫(kù)的文章有定義有解釋、有代碼實(shí)現(xiàn)、還有動(dòng)態(tài)圖，入門十大經(jīng)典排序算法是個(gè)不錯(cuò)的教程。

JavaScript 數(shù)據(jù)結(jié)構(gòu)與算法之美

★

https://github.com/biaochenxuying/blog#-javascript-%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84%E4%B8%8E%E7%AE%97%E6%B3%95%E4%B9%8B%E7%BE%8E

”

包含了 十大經(jīng)典排序算法 的思想、代碼實(shí)現(xiàn)、一些例子、復(fù)雜度分析、動(dòng)畫(huà)、還有算法可視化工具。

這是比較精簡(jiǎn)的 JavaScript 數(shù)據(jù)結(jié)構(gòu)與算法 的講解。

該倉(cāng)庫(kù)總共寫(xiě)了 10 篇算法入門的文章

1. 時(shí)間和空間復(fù)雜度
2. 線性表（數(shù)組、隊(duì)列、棧、鏈表）
3. 實(shí)現(xiàn)一個(gè)前端路由，如何實(shí)現(xiàn)瀏覽器的前進(jìn)與后退 ？
4. 棧內(nèi)存與堆內(nèi)存 、淺拷貝與深拷貝
5. 遞歸
6. 非線性表（樹(shù)、堆）
7. 冒泡排序、選擇排序、插入排序
8. 歸并排序、快速排序、希爾排序、堆排序
9. 計(jì)數(shù)排序、桶排序、基數(shù)排序
10. 十大經(jīng)典排序算法匯總
11. GitHub 上 170K+ Star 的前端學(xué)習(xí)的數(shù)據(jù)結(jié)構(gòu)與算法項(xiàng)目

也是非常不錯(cuò)的數(shù)據(jù)結(jié)構(gòu)與算法的入門學(xué)習(xí)資料。

daily-algorithms

★

https://github.com/barretlee/daily-algorithms

”

算法，每日練習(xí)的一個(gè)項(xiàng)目。

• ★ 表示 easy，★★ 表示 medium，★★★ 表示 hard；
• 題目主要來(lái)自 leetcode，可能會(huì)適當(dāng)變換題設(shè)，改變難度；
• 對(duì)于 ★ 和 ★★ 難度的題目，每天的量會(huì)隨機(jī)出現(xiàn) 1~5 個(gè)，尤其是 ★ 的題目，比較簡(jiǎn)單。

白天出題，盡量晚上給出參考答案。

項(xiàng)目也不錯(cuò)，是以參與討論的形式與大家一起學(xué)習(xí)數(shù)據(jù)結(jié)構(gòu)與算法的。

就是內(nèi)容積累還不夠多，還不夠火。

JavaScript 更多 ...

★

https://github.com/search?l=JavaScript&o=desc&q=algo&s=stars&type=Repositories

”

還想知道更多好的數(shù)據(jù)結(jié)構(gòu)與算法項(xiàng)目，可以點(diǎn)擊上面的鏈接進(jìn)行搜索。

最后

Star 數(shù)最多，但是并不代表該項(xiàng)目就最好并適合你哦，因?yàn)橛行╉?xiàng)目早于幾年前就不再更新與維護(hù)了。

本文推薦的都是一些真的實(shí)用并還在更新的開(kāi)源倉(cāng)庫(kù)，估計(jì)都比較適合前端學(xué)習(xí)。

★

本文原文 GitHub 地址：https://github.com/biaochenxuying/FrontEndGitHub

”

覺(jué)得有用 ？喜歡就收藏，順便點(diǎn)個(gè)贊吧，你的支持是我最大的鼓勵(lì)！