導航現代JavaScript的廣闊生態系統是一項艱巨的任務。有各種各樣的前端框架，少量的模塊捆綁程序和數千個實用程序庫，更不用說可以在你的計算機或伺服器上運行的所有Node.js模塊了。你怎麼知道從哪裡開始？你應該在哪些技術上花費時間？
我學到了無數的東西，但從未停止使用，還有其他一些我希望自己花更多時間在上面的東西。考慮到我7年職業生涯中的經驗教訓，這些是我對如何學習JavaScript的建議。
1.熟悉異步JavaScript。
如果查看JavaScript（或一般而言的Web開發）的歷史，就會發現異步JavaScript完全改變了遊戲。它允許網站從僅具有客戶端操作的靜態頁面到瀏覽器中功能全面的應用程式。實際上，發出HTTP請求並等待響應而無需重新加載頁面的能力改變了全球資訊網。
可以肯定地說，異步編程是Web開發的核心宗旨。那是你應該在早期學習JavaScript上投入大量時間的地方，因為它封裝了其他核心原則，例如回調，promise，異步/等待和獲取。
請花一些時間按順序閱讀我在下面列出的資源。他們應該給你一個從哪裡開始異步編程的好主意。
推薦資源：
視頻資料
對於零基礎小白來說看視頻就是最好的學習方式了，我在這裡為大家準備了一套，有需要的可以私聊獲取
看完視頻之後，推薦下面這本書，同意也給大家準備好了電子版
JavaScript異步編程
2.了解TypeScript的基礎。
我和我自己辯論了一個小時左右，以決定是否要包含此內容，因為這是一篇有關學習JavaScript的文章，而TypeScript不是JavaScript。它是它的超集，需要使用構建步驟。但是，我堅信TypeScript，以至於不得不將它包括在內。
該建議與JavaScript的關係比與最佳編碼實踐的關係少。JavaScript是一種鬆散類型的動態程式語言。當您傳遞沒有類型協定和不可變性的變量和數據對象時，編寫容易受副作用影響的代碼太容易了。TypeScript通過添加強類型輸入和創建只讀屬性的能力（在許多其他奇妙的事物中）來減輕這些問題。
考慮到這一點，我建議你儘快學習TypeScript的基礎。「基礎知識」的意思是：如何在變量，類屬性，函數參數和函數返回值中添加類型注釋。TypeScript功能非常強大，除了簡單的類型注釋之外，還有很多東西要學習，但是第一步將阻止您定期腳踏實地拍攝自己。它仍然讓我感到驚訝，TypeScript編譯器多久發現一次我最初沒有看到的錯誤。
是的，編譯器會大吼大叫……很多。沒關係！它是您的朋友，它希望您成為一個更好的程式設計師。花點時間考慮一下TypeScript給你的錯誤消息，我保證您的代碼將得到顯著改善。
推薦資源
從官方TypeScript文檔在5分鐘內輸入TypeScript在在線TypeScript REPL中玩轉[Paywalled] TypeScript 4小時研討會，作者：Mike North已準備離線版
3.了解為什麼存在JavaScript框架。
自從我在2012年末第一次涉足Web開發以來，JavaScript框架就已經存在。那時，AngularJS佔據了上風，Backbone.js擁有可觀的市場份額，而Ember則是炙手可熱的新興市場（雙關語意）。有趣的是，即使它們已成為過去（主要由React和Vue代替），這些前端框架解決的問題也沒有太大變化。例如：
數據綁定視圖到控制器。這是最重要的。保持UI視圖與前端應用程式狀態同步是所有前端框架的主要原因。無論框架是完全MVC，MVVM還是僅僅是視圖層，它們都可以將某些狀態綁定到視圖並使它們保持同步。可重用組件。這是AngularJS做對的最大事情。前端視圖的基於組件的組合，以及JS將模板編譯成HTML的功能，是React和Vue等現代框架的核心，但自AngularJS以來一直存在。如果不使用現有框架或創建自己的框架，則根本不可能創建動態的，可重用的組件，因為Web組件的API非常受限制，並且無法處理數據綁定。這些只是為了說出一對夫婦的名字。關鍵是，如果您看中精美的扳手，螺絲刀和其他工具，螺母和螺栓是相同的。工具的變化和技術的發展，但是，如果您了解Web開發的核心痛點（首先存在這些工具的原因），那麼您將處在一個更好的位置，以理解和正確使用任何現在，將來或舊有的東西框架。
推薦資源
文章：現代JavaScript框架存在的最深層次原因4.同時學習兩個相似的框架。
依我關於框架解決的基本問題的觀點並沒有改變，我現在建議你一次學習兩個前端框架。例如，Vue和React。
當大量使用一個框架時，很容易開始覺得該框架的語法和模式是基礎語言的一部分（在我們的例子中為JavaScript）。俗話說，如果你只有錘子，那麼一切都會看起來像釘子。那句話，翻譯成程序設計，意味著
一次學習或了解兩個框架可以顛覆這種想法，使你對框架實際為你做的事情有更多的了解。就像學習外語實際上可以使你的母語變得更好一樣。你會看到兩者之間的異同，並且你正在思考什麼語言結構導致了這些異同。知道兩個JavaScript框架可以提供相似的觀點。通過了解同一解決方案的兩條路徑，你可以更好地了解它們正在解決的根本問題。
5.揭開構建過程的神秘面紗。
我現在提出了4條建議，但其中只有一項涉及學習Vanilla JS，這對我來說並沒有丟失。無論你是否喜歡，編寫現代JavaScript都涉及許多工具和框架，而將它們聯繫在一起的就是構建過程。
構建工具是我整個職業中變化最大的領域，因為這是性能和資產規模最大的收益。基於Web的公司和開放原始碼社區一直在努力地擠壓他們在構建過程中可能無法進行的每一個小改進，從而導致了工具和過程的不斷變化。
我不得不承認，花了我一段時間才了解Webpack之類的工具是如何工作的。你設置了一個簡單的配置，運行了一個命令，突然您有了一個包含優化，最小化和瀏覽器兼容代碼的文件。構建工具看起來像是不可思議的工具，因為它們都努力做到零配置或很少配置。這對於開始使用它們非常有用，但是當您實際需要進行一些自定義配置時，這會使他們望而卻步。
了解這些工具正在為您做什麼是非常重要的。嘗試了解您的代碼將經歷哪些轉換以及轉換的順序。嘗試了解如何捆綁模塊，以便更好地對其進行優化。嘗試學習每個配置選項，因為這對性能和文件大小影響最大。
推薦資源
深入探討webpack解決的問題Grunt和Gulp.js就是這樣！我希望這個職位能帶來可觀的價值。正如我在介紹中所述，JavaScript生態系統令人生畏。我已經從事專業工作7年了，但我仍然經常覺得自己幾乎沒有刮過表面。因此，不要嘗試一次全部使用-專注於這五件事，你會順利進行的。
本文的所有提到的知識點都為大家準備好了資料，可以私信獲取