摘要：之前寫(xiě)過(guò)一篇天學(xué)通前端開(kāi)發(fā)，內(nèi)容主要講的就是前端學(xué)習(xí)路徑，今天再來(lái)寫(xiě)一篇零基礎(chǔ)的學(xué)習(xí)路徑，希望能幫編程零基礎(chǔ)的前端愛(ài)好者指明方向。十框架三選一，零基礎(chǔ)的初學(xué)者強(qiáng)烈推薦，如果是后臺(tái)轉(zhuǎn)前端推薦，如果技術(shù)型前端，推薦。

之前寫(xiě)過(guò)一篇26天學(xué)通前端開(kāi)發(fā)，內(nèi)容主要講的就是前端學(xué)習(xí)路徑，今天再來(lái)寫(xiě)一篇零基礎(chǔ)的JavaScript學(xué)習(xí)路徑，希望能幫編程零基礎(chǔ)的前端愛(ài)好者指明方向。

開(kāi)發(fā)環(huán)境越簡(jiǎn)單越好，一定不要在這個(gè)環(huán)節(jié)浪費(fèi)時(shí)間。

首先說(shuō)編輯器的選擇，sublime text、vs code、atom、webstorm，還有HBuilder。新手入門的時(shí)候總想找一個(gè)最好的編輯器，其實(shí)這編輯器就和游戲里面選英雄一樣，沒(méi)有最厲害的，只有最適合你的，如果還是拿不定注意，就選vs code吧，我感覺(jué)這個(gè)對(duì)新手挺友好的。

瀏覽器就用chrome，然后就可以開(kāi)始擼代碼了。

關(guān)于JavaScript版本，我建議還是從ES5開(kāi)始學(xué)，有一定基礎(chǔ)之后再來(lái)看ES2015+的新特性。

學(xué)編程語(yǔ)言和學(xué)自然語(yǔ)言有很多相似的地方，我們得從最基本的單詞和語(yǔ)法開(kāi)始學(xué)。

變量：如何聲明變量，如何給變量賦值。

數(shù)據(jù)類型：什么是數(shù)據(jù)類型，數(shù)字與字符串有什么區(qū)別。

運(yùn)算符與表達(dá)式：常用的運(yùn)算符有哪些？“=”、“==”與“===”的區(qū)別等等。

分支語(yǔ)句：if、switch

循環(huán)語(yǔ)句：for、while

函數(shù)：什么是函數(shù)，什么是參數(shù)，什么是返回值。

這些基本語(yǔ)法一定要非常熟悉，要不然后續(xù)的學(xué)習(xí)會(huì)舉步維艱。

對(duì)象是一個(gè)非常重要的概念，一定要靈活掌握：

對(duì)象：屬性的無(wú)序集合，當(dāng)屬性值為函數(shù)的時(shí)候，我們叫這個(gè)函數(shù)為對(duì)象的方法。

數(shù)組：元素的有序集合。了解數(shù)組的常用方法

日期對(duì)象：獲取年月日時(shí)分秒

數(shù)學(xué)對(duì)象：獲取隨機(jī)數(shù)

了解其他對(duì)象：正則表達(dá)式、包裝對(duì)象，其實(shí)函數(shù)也是對(duì)象，不過(guò)這些簡(jiǎn)單了解一下就行。

每個(gè)對(duì)象都有很多方法，這些方法知道在哪里查就行了，千萬(wàn)不要去背，就像我們學(xué)英語(yǔ)，必要的單詞要背，但是大部分單詞知道用詞典查就行了。

學(xué)習(xí)【基礎(chǔ)語(yǔ)法】和【對(duì)象】的過(guò)程比較枯燥，知識(shí)點(diǎn)之間銜接不是特別緊密，就像我們小學(xué)一年級(jí)學(xué)習(xí)漢字一樣，每一個(gè)字我們都知道是什么，但是卻不會(huì)把他們組合到一起，所以小學(xué)才會(huì)練習(xí)組詞，造句，再到寫(xiě)作文。我們把做的項(xiàng)目比作寫(xiě)作文，那我們還有一段路要走，切莫心急。

DOM的樹(shù)狀結(jié)構(gòu)

節(jié)點(diǎn)：元素節(jié)點(diǎn)、文本節(jié)點(diǎn)、屬性節(jié)點(diǎn)

節(jié)點(diǎn)關(guān)系：同級(jí)、父子級(jí)等等

獲取節(jié)點(diǎn)：querySelector、querySelectorAll等等

節(jié)點(diǎn)操作：增刪改查

事件綁定：事件流和事件委托應(yīng)該了解一下

DOM提供的方法也很多，仍然不要過(guò)多的投入精力，新手自學(xué)總是會(huì)被這些大量的方法困擾，我們要做的是對(duì)DOM有一個(gè)概括性的了解，至于那些雜亂的接口，后續(xù)我們完全可以用jQuery或框架代替。

（如果對(duì)DOM感興趣，可以在技能掌握得稍微全面一些之后，再回來(lái)深入學(xué)習(xí)也是可以的，但是前期投入大量時(shí)間，確實(shí)會(huì)影響學(xué)習(xí)效率）

jQuery是必須要會(huì)的，但是jQuery上手確實(shí)很簡(jiǎn)單，用兩天時(shí)間了解一下jQuery的用法，然后就可以利用jQuery實(shí)現(xiàn)各種頁(yè)面效果了，前期肯定會(huì)磕磕絆絆，但是jQuery的資料有很多，一邊學(xué)一邊做就行。

jQuery熟練了之后，就可以開(kāi)始著手學(xué)習(xí)JavaScript進(jìn)階一點(diǎn)的內(nèi)容了：

原始類型與引用類型的區(qū)別
各種類型轉(zhuǎn)換和類型檢測(cè)
閉包：函數(shù)套函數(shù)，怎么套自己都不蒙就行了。
原型：構(gòu)造函數(shù)、原型屬性、基于原型的繼承是怎么實(shí)現(xiàn)的。
this：可以開(kāi)個(gè)坑好好研究研究

node現(xiàn)在可以說(shuō)是前端必學(xué)的了，但是不是學(xué)用node做后臺(tái)，而是用node生態(tài)下的各種工具，順便借node了解一下后臺(tái)。

使用node開(kāi)一個(gè)靜態(tài)服務(wù)器

使用npm下載第三方模塊

webpack

babel

最好能用express寫(xiě)一個(gè)簡(jiǎn)單的后臺(tái)程序（一個(gè)server.js就夠了），處理一些請(qǐng)求，這樣我們學(xué)習(xí)ajax的時(shí)候就可以自己寫(xiě)后臺(tái)接口了，當(dāng)然這需要有http協(xié)議的基礎(chǔ)知識(shí)。

變量和常量：為什么要拋棄var？

結(jié)構(gòu)賦值

箭頭函數(shù)

模塊化

class

編譯

像promise，async/await函數(shù)等等這些，看自己能力了，有興趣看看，不看也不影響后面學(xué)習(xí)，但是，就算現(xiàn)在不學(xué)，這個(gè)后續(xù)也是要補(bǔ)的。

簡(jiǎn)單的說(shuō)，了解一下http協(xié)議，知道什么是請(qǐng)求，什么是響應(yīng)，get和post有什么卻別，然后在學(xué)ajax，看看語(yǔ)法基本就會(huì)了。

用XMLHttpRequest發(fā)個(gè)請(qǐng)求，接個(gè)數(shù)據(jù)。

用jQuery發(fā)個(gè)請(qǐng)求，接個(gè)數(shù)據(jù)。

json解析

知道這些就差不多了，后續(xù)不管是工作還是學(xué)習(xí)，肯定還會(huì)遇到很多問(wèn)題，到時(shí)候再具體問(wèn)題具體分析。

react、angular、vue三選一，零基礎(chǔ)的初學(xué)者強(qiáng)烈推薦vue，如果是后臺(tái)轉(zhuǎn)前端推薦angular，如果技術(shù)型前端，推薦react。

這篇文章是給零基礎(chǔ)新手的，那自然就選vue比較好了。

通過(guò)這十步，就可以對(duì)JavaScript體系有一個(gè)整體的了解，然后重點(diǎn)向那個(gè)方向發(fā)展，就看自己愛(ài)好或是工作需要了。技術(shù)的道路很漫長(zhǎng)，這只是一個(gè)起點(diǎn)。

關(guān)注微信公眾號(hào)：曉舟報(bào)告，視頻教程，日更中...截止目前，剛剛錄到函數(shù)，如果時(shí)間允許的話，上面的內(nèi)容都會(huì)錄的，感謝大家的支持。

最后附上之前寫(xiě)的JavaScript書(shū)籍測(cè)評(píng)。

如果對(duì)您有一點(diǎn)點(diǎn)幫助，請(qǐng)不要吝惜一個(gè)小小的【贊】！