GitHub 上值得前端学习的数据结构与算法项目
Hello，大家好，我是你們的 前端章魚貓。
簡介
前端章魚貓從 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后的循環，所以外層需要?數組長度-1for?(let?i?=?0;?i?<?arr.length?-?1;?i++)?{let?minIndex?=?ifor?(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
★https://github.com/mgechev/javascript-algorithms
”此存儲庫包含不同著名計算機科學算法的 javascript 實現。
該倉庫是不錯的，不方便學習的地方就是需要安裝依賴并運行才能看到效果及文檔。
Call:npm?installTo?setup?repository?with?documentationnpm?run?docThis?will?build?the?documentation?and?open?it?in?your?browser.JS-Sorting-Algorithm
★https://github.com/hustcc/JS-Sorting-Algorithm
”一本關于排序算法的 GitBook 在線書籍 《十大經典排序算法》，使用 JavaScript & Python & Go & Java 實現。
包含冒泡排序、選擇排序、插入排序、希爾排序、歸并排序、快速排序、堆排序、計數排序、桶排序、基數排序。
該倉庫的文章有定義有解釋、有代碼實現、還有動態圖，入門十大經典排序算法是個不錯的教程。
JavaScript 數據結構與算法之美
★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
”包含了 十大經典排序算法 的思想、代碼實現、一些例子、復雜度分析、動畫、還有算法可視化工具。
這是比較精簡的 JavaScript 數據結構與算法 的講解。
該倉庫總共寫了 10 篇算法入門的文章
時間和空間復雜度
線性表（數組、隊列、棧、鏈表）
實現一個前端路由，如何實現瀏覽器的前進與后退 ？
棧內存與堆內存 、淺拷貝與深拷貝
遞歸
非線性表（樹、堆）
冒泡排序、選擇排序、插入排序
歸并排序、快速排序、希爾排序、堆排序
計數排序、桶排序、基數排序
十大經典排序算法匯總
GitHub 上 170K+ Star 的前端學習的數據結構與算法項目
也是非常不錯的數據結構與算法的入門學習資料。
daily-algorithms
★https://github.com/barretlee/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
”覺得有用 ？喜歡就收藏，順便點個贊吧，你的支持是我最大的鼓勵！
在公眾號后臺回復：電子書 ，可以獲得160本前端精華書籍哦。
往期項目2020-WEB開發路線圖，和即將到來的 2021-WEB技術清單
總結
以上是生活随笔為你收集整理的GitHub 上值得前端学习的数据结构与算法项目的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 2020-WEB开发路线图，和即将到来的
- 下一篇： Github标星1.6W+，程序员不得不