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