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/playl...

前端章魚貓以前學習算法的時候，也在這個項目中收益良多呢！

並且這個項目還一直有維護和更新內容哦！真的很是不錯的一個項目！

---

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)

該倉庫是《數據結構和算法之美》《設計模式之美》專欄做者建立的，前端章魚貓也學習過他的《數據結構和算法之美》，很是不錯的學習教程。

---

awesome-algorithms

https://github.com/mgechev/javascript-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

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

一本關於排序算法的 GitBook 在線書籍 《十大經典排序算法》，使用 JavaScript & Python & Go & Java 實現。

包含冒泡排序、選擇排序、插入排序、希爾排序、歸併排序、快速排序、堆排序、計數排序、桶排序、基數排序。

該倉庫的文章有定義有解釋、有代碼實現、還有動態圖，入門十大經典排序算法是個不錯的教程。

---

JavaScript 數據結構與算法之美

https://github.com/biaochenxu...

包含了 十大經典排序算法 的思想、代碼實現、一些例子、複雜度分析、動畫、還有算法可視化工具。

這是比較精簡的 JavaScript 數據結構與算法 的講解。

該倉庫總共寫了 10 篇算法入門的文章

1. 時間和空間複雜度
2. 線性表（數組、隊列、棧、鏈表）
3. 實現一個前端路由，如何實現瀏覽器的前進與後退 ？
4. 棧內存與堆內存 、淺拷貝與深拷貝
5. 遞歸
6. 非線性表（樹、堆）
7. 冒泡排序、選擇排序、插入排序
8. 歸併排序、快速排序、希爾排序、堆排序
9. 計數排序、桶排序、基數排序
10. 十大經典排序算法彙總
11. GitHub 上 170K+ Star 的前端學習的數據結構與算法項目

也是很是不錯的數據結構與算法的入門學習資料。

---

daily-algorithms

https://github.com/barretlee/...

算法，每日練習的一個項目。

• ★ 表示 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/biaochenxu...

以爲有用 ？喜歡就收藏，順便點個贊吧，你的支持是我最大的鼓勵！

在公衆號後臺回覆：電子書 ，能夠得到160本前端精華書籍哦。