「前端進階」前端如何搞定數據結構與算法(先導篇)

「觀感度：🌟🌟🌟🌟🌟」

「口味：鍋包肉」

「烹飪時間：20min」

本文已收錄在Github github.com/Geekhyt，感謝Star。

爲何要學習數據結構與算法？

在0202年的今天，因爲天天被無數的信息轟炸，大多數人已經變得愈來愈浮躁了，而且喪失了獨立思考的能力。

你可能會常常聽到這樣的感慨：

• 技術人究竟能走多遠？我遇到了天花板
• 35歲的程序員要如何面對中年危機？
• 技術更新太快，好累，學不動了

而後，你也變得焦慮起來。那你有沒有靜下心來想過，如何才能抵禦年齡增加而且使本身增值呢？

無非是終身學習，持續修煉本身的內功。內功也就是基礎知識和核心概念，這些轟轟烈烈發展的技術本質，其實都是基礎知識，也就是咱們在大學裏學過的基礎課程。

• 操做系統
• 計算機組成原理
• 計算機網絡
• 編譯原理
• 設計模式
• 數據結構與算法

這也就是爲何越靠譜的面試官越注重你基礎知識的掌握程度，爲何越牛的的企業越重視你的算法能力。由於當你擁有了這些，你已經比大多數人優秀了。你的天花板由你本身來決定，你們口中的中年危機可能並不會成爲你的危機。新技術來臨時，你對它的本質會看得更加透徹，學起來會一通百通。這樣的人才，公司培養你也會花費更少的成本。

(不過，一生作個開開心心的 CRUD Boy 也是一種選擇。)

數據結構與算法之間的關係

Rob Pike's 5 Rules of Programming中的第五條是這樣說的：

Data dominates. If you've chosen the right data structures and organized things well, the algorithms will almost always be self-evident. Data structures, not algorithms, are central to programming.

數據佔主導。若是您選擇了正確的數據結構並組織得當，那麼這些算法幾乎老是不言而喻的。數據結構而非算法是編程的核心。

瑞士計算機科學家，Algol W，Modula，Oberon 和 Pascal 語言的設計師 Niklaus Emil Wirth 寫過一本很是經典的書《Algorithms + Data Structures = Programs》，即算法 + 數據結構 = 程序。

咱們能夠得出結論，數據結構與算法之間是相輔相成的關係。數據結構服務於算法，算法做用於特定的數據結構之上。

數據結構與算法好難，怎麼學？

• 是否是我腦子有問題？智商不夠？
• 數學太難了，我天生數學就很差
• 好不容易搞懂了一個算法，沒過幾天就忘了

在我堅持刷 LeetCode 這段時間，我也曾產生過懷疑，但後來發現，其實都不是。學習都是反人性的，貴在堅持。數據結構與算法這塊知識並不適合零碎的時間來學習，你首先須要規劃整塊的時間。而後從最基礎數據結構開始學起，從易到難，由淺入深。學到後面你會發現。其實，數據結構中的基礎就是數組(順序存儲)和鏈表(鏈式存儲)。

• 隊列和棧能夠分別經過數組和鏈表實現
• 一般狀況下咱們會用數組實現堆(徹底二叉樹)，用鏈表也能夠實現(二叉搜索樹、紅黑樹、AVL、B樹等)
• 圖用二維數組實現就是鄰接矩陣，用鏈表實現就是鄰接表
• 散列表中能夠用鏈表解決散列衝突(拉鍊法)，也能夠用數組(線性探測法)

因此，記住這些基礎的概念，學習複雜的數據結構和算法時會事半功倍。

(算法的套路過多，請容許我再開一篇專欄)

時間久了記不住怎麼辦？

美國緬因州國家訓練實驗室作過學習金字塔的實驗並得出以下報告，這個理論最先於1946年由美國學者 Edgar Dale 提出。

人的學習分爲被動學習和主動學習兩個層次。

• 被動學習：聽講、閱讀、試聽、演示。學習內容平均留存率爲5%、10%、20%和30%。
• 主動學習：討論、實踐、教授給他人，平均留存率爲50%、75%和90%。

這個理論可能你們早已聽過，可是實際踐行的人又有多少呢？

數據結構與算法也是這樣，你須要養成 LeetCode 上每日一題的習慣，並及時複習淡忘的部分。除此以外，踐行主動學習。找到志同道合的小夥伴，一塊兒交流進步。還能夠在開源項目上提供題解，這樣也是教授給他人的一種方式。

這裏推薦一個好朋友 Lucifer 的已有 30K+ Star的 LeetCode 題解庫，我已經提交了一些題解，寫題解的時候你會發現，這纔是真正考驗你是否掌握的時候。

lucifer的LeetCode解題之路

數據結構與算法在前端中的應用

• 你熟知的 DOM 樹、AST 樹、以及 Vue、React 的 Virtual DOM 都是樹。

• React Hooks 的本質是數組，React Fiber 是基於鏈表實現的。

• HTTP 緩存響應消息 和 Vue 的 keep-alive 都用到了 LRU 算法。

• 瀏覽器前進後退功能經過棧實現。

• TCP 鏈接實現多路複用時藉助了epoll，而決定 epoll 高效的緣由：數據結構採用了紅黑樹和隊列。

• 搜索引擎採用的是廣度優先搜索策略。

若是你瞭解 Linux、Nginx 、數據庫和一些消息隊列，你會發現處處都是數據結構與算法的應用。這裏舉幾個例子：

• Linux 進程調度、進程空間管理用到了 紅黑樹
• Linux 文件系統中爲了提升目錄項對象的處理效率： LRU、哈希表
• Linux 路由表 Tire 樹
• Nginx 定義緩存 key 用到了 紅黑樹
• MySQL 數據庫索引使用 B+ 樹提升查詢效率
• Redis中根據大多數開發場景下，數據的大小和多少採用更適合存儲的數據結構。(數據量小用數組下標訪問快、佔用內存小。可是由於數組須要佔用連續的內存空間，因此當數據量大的時候，採用鏈表，同時又爲了兼顧速度又須要和數組結合，從而有了散列表。)
• 分佈式消息隊列， RocketMQ、 Kafka 也是一種 隊列。

通關數據結構與算法的捷徑？

刷題就是捷徑。

對，你沒看錯。

其實，和計算機交流真的很簡單，你給他輸入，他確定會給你輸出。比女友好伺候多了。

掘金小冊、開源項目及書單推薦

掘金小冊

修言的 《前端算法與數據結構面試：底層邏輯解讀與大廠真題訓練》，我在小冊撰寫前期有幸參與試讀，修言大佬保姆級別教程，不買後悔系列。

開源項目

• lucifer 大佬的 LeetCode解題之路，上文提到過，已有 30K+Star，還有他的新書或許是一本能夠完全改變你刷 LeetCode 效率的題解書

• 若是你喜歡看視頻，能夠來力扣加加 看視頻題解哦～

• lucifer單身可撩！快來個寶藏女孩收了他！

書單

初級

• 算法圖解
• 大話數據結構
• 算法之美
• 數學之美
• 數據結構與算法 JavaScript 描述

經典

• 算法
• 算法導論

典藏

• 計算機程序設計藝術

寫在最後

伽利略曾經說過，「宇宙這本書是用數學語言寫成的」。

數學不光是曾經在學校學過的公式，它實際上是一種思惟模式，因此最終要提升的是概括、總結和抽象的能力。

前面的路還很長，共勉。

❤️愛心三連擊

1.看到這裏了就點個贊支持下吧，你的「贊」是我創做的動力。

2.關注公衆號前端食堂，「你的前端食堂，記得按時吃飯」！

3.本文已收錄在前端食堂Github github.com/Geekhyt，求個小星星，感謝Star。