簡介《JavaScript編程語言入門及核心功能詳解》是一份面向初學(xué)程序員和希望系統(tǒng)梳理JavaScript核心機(jī)制的教程文檔內(nèi)容覆蓋變量聲明、數(shù)據(jù)類型、運(yùn)算符、控制結(jié)構(gòu)、函數(shù)、對象、DOM操作與異步編程等核心模塊并解釋了JavaScript作為多范式語言的特性適合零基礎(chǔ)入門或已有少量編程經(jīng)驗(yàn)但想補(bǔ)全知識(shí)體系的讀者。整個(gè)資源包僅含1個(gè)docx文檔大小約19KB輕量易讀可快速下載學(xué)習(xí)。文檔不僅詳細(xì)講解var、let、const的差異、函數(shù)一等公民特性、對象鍵值對結(jié)構(gòu)等基礎(chǔ)概念還通過大量示例代碼演示如何操作DOM元素、綁定事件以及使用回調(diào)、Promise和async/await處理異步任務(wù)并附帶了MDN、Eloquent JavaScript等延伸學(xué)習(xí)路徑與小型練手項(xiàng)目建議方便讀者將知識(shí)轉(zhuǎn)化為實(shí)戰(zhàn)能力。目前已有88人學(xué)習(xí)瀏覽對初學(xué)者而言是一份高性價(jià)比的JavaScript入門參考。1. JavaScript 到底是什么從“讓網(wǎng)頁動(dòng)起來”說起如果你是第一次接觸 JavaScript可能會(huì)聽到各種說法它是網(wǎng)頁的靈魂、是前端工程師的吃飯家伙、是全棧開發(fā)的敲門磚。這些都對但都繞。通俗地說JavaScript 最初是給網(wǎng)頁貼的“動(dòng)作指令”HTML 是骨頭CSS 是皮肉JavaScript 是神經(jīng)和肌肉——讓頁面能響應(yīng)你的點(diǎn)擊、輸入、滾動(dòng)而不是一張死板的打印紙。把它想成一個(gè)廚房。HTML 相當(dāng)于菜譜上寫的食材和擺盤CSS 規(guī)定盤子怎么放、顏色怎么搭而 JavaScript 就是那個(gè)掌勺的廚師食材什么時(shí)候下鍋、火候多大、哪道菜先上全靠它調(diào)度。沒有廚師的廚房所有東西只是擺在那里有了 JavaScript網(wǎng)頁才真正“活”起來能彈窗、能請求數(shù)據(jù)、能實(shí)時(shí)刷新也才有了今天你能看到的在線文檔、短視頻和購物車。之所以值得搞懂它是因?yàn)樗恢够钤跒g覽器里現(xiàn)在還能寫服務(wù)器、寫桌面軟件、寫小游戲——一個(gè)語法入門能撬動(dòng)幾乎整個(gè)軟件世界。2. 變量與數(shù)據(jù)類型寫 JavaScript 的“第一塊磚”所有編程語言都是從“存數(shù)據(jù)”開始的JavaScript 也不例外。存數(shù)據(jù)這件事用的就是變量和常量。但 JavaScript 在這塊有個(gè)著名的坑同樣的var、let、const三個(gè)關(guān)鍵字如果搞不清它們的脾氣寫起代碼來就像玩一個(gè)不告訴規(guī)則的游戲跑著跑著就翻車。2.1 var、let 和 const一張表認(rèn)清三種聲明方式先看代碼再解釋這件事為什么重要var x 10; // 老派寫法函數(shù)作用域有提升hoisting現(xiàn)象 let y 20; // 現(xiàn)代寫法塊級(jí)作用域聲明后可以修改 const z 30; // 常量塊級(jí)作用域聲明后不能重新賦值你可能會(huì)問“不都是存一個(gè)數(shù)嗎分三種干嘛”原因是 JavaScript 早年設(shè)計(jì)得很隨意var的作用域是“函數(shù)級(jí)”的而且有個(gè)奇怪的現(xiàn)象叫變量提升——在代碼還沒執(zhí)行到那一行時(shí)變量就已經(jīng)被“隱約”創(chuàng)建了值是undefined。這就導(dǎo)致一個(gè)經(jīng)典翻車場景你寫了一個(gè)循環(huán)變量i用var聲明循環(huán)結(jié)束后它還在函數(shù)外面“活著”把別的同名變量悄悄改掉排查起來非常費(fèi)神。let和const是后來為修補(bǔ)這些毛病引入的。它們的作用域是“塊級(jí)”的——意思是一對花括號(hào){}內(nèi)部就是它們的邊界出了括號(hào)就查無此人。區(qū)別在于let允許你日后重新賦值const則把變量“焊死”一旦賦予初始值就不能再指向新內(nèi)容。注意是“不能重新賦值”而不是“不能修改”所以const聲明的對象它的屬性仍然可以改這個(gè)細(xì)節(jié)后面講對象時(shí)會(huì)再次出現(xiàn)。那到底怎么選一句話先用const等發(fā)現(xiàn)確實(shí)需要重新賦值再改成let。這能讓你的代碼更不容易被意外篡改也更容易一眼看出哪些值是“一成不變”的。至于var在今天的代碼里基本可以當(dāng)它不存在只在個(gè)別要兼容“上古”運(yùn)行環(huán)境時(shí)才考慮。2.2 原始類型與引用類型值傳遞還是引用傳遞JavaScript 里的數(shù)據(jù)可以粗略分成兩撥一撥是原始類型一撥是引用類型。原始類型包括字符串、數(shù)字、布爾值、null、undefined、Symbol引用類型則包括對象、數(shù)組和函數(shù)。區(qū)分它們的核心方式有點(diǎn)像一個(gè)生活邏輯原始類型是“直接發(fā)給你的文件”引用類型是“發(fā)給你的一個(gè)網(wǎng)盤鏈接”。let a 5; let b a; b 10; console.log(a); // 輸出 5a 不受影響因?yàn)閿?shù)字是原始類型等于把值復(fù)制了一份 let obj1 { name: Tom }; let obj2 obj1; obj2.name Jerry; console.log(obj1.name); // 輸出 Jerry因?yàn)?obj1 和 obj2 指向的是同一個(gè)對象第一段代碼里b a把數(shù)字 5 復(fù)制了一份給b之后改b跟a毫無關(guān)系。第二段代碼里obj2 obj1并沒有復(fù)制一個(gè)新的對象而是讓兩個(gè)變量指向同一塊內(nèi)存地址所以通過obj2改名字obj1也會(huì)跟著變。這個(gè)特性是新手最常踩的暗坑之一。你原本以為只是“備份”了一個(gè)對象結(jié)果改備份把原稿也改了而且很可能不是你想要的行為。如果真想復(fù)制一份獨(dú)立的對象要用展開語法{...obj}做淺拷貝或者更徹底地用深拷貝。理解“引用”這個(gè)詞等于提前給自己買了一份后悔藥。2.3 運(yùn)算符與控制結(jié)構(gòu)代碼的“流水線”變量存好數(shù)據(jù)下一步就是處理它們。JavaScript 的運(yùn)算符種類不少算術(shù)、賦值、比較、邏輯、三元甚至還有按位運(yùn)算。不過新手不必全記先把最常用的搞明白就行。let a 10, b 20; let sum a b; // 算術(shù)運(yùn)算符加 a 5; // 賦值運(yùn)算符等價(jià)于 a a 5 let isGreater (a b) ? a 更大 : b 更大; // 三元運(yùn)算符一行 if...else控制結(jié)構(gòu)是給代碼規(guī)定“接下來怎么走”的。if...else是岔路口for和while是循環(huán)傳送帶break和continue是傳送帶上的緊急閘門和跳過鍵。比如一個(gè)常見需求“遍歷列表、跳過空值、遇到特定標(biāo)記就停止”就是這幾樣工具的組合。編寫時(shí)建議遵循一個(gè)“提早返回”的小習(xí)慣與其層層嵌套if...else不如先處理異常情況直接return再寫主干邏輯。這樣代碼可讀性會(huì)提升一大截——你讀起來就像一條直路而不是迷宮。3. 函數(shù)與對象JavaScript 世界里的兩個(gè)“萬金油”如果只能從這篇里帶走兩個(gè)概念那一定是函數(shù)和對象。函數(shù)是動(dòng)作用對象是容器二者幾乎可以表達(dá)任意業(yè)務(wù)邏輯。很多初學(xué)者覺得“先學(xué)會(huì)語法就能寫項(xiàng)目”但真正拉開差距的是對這兩個(gè)概念的認(rèn)知深度。3.1 為什么說函數(shù)是“一等公民”“一等公民”這個(gè)詞聽著玄乎其實(shí)是說函數(shù)可以和普通值一樣被傳遞、保存、返回。別的語言里函數(shù)可能只是“代碼塊”但在 JavaScript 里函數(shù)可以像數(shù)字、字符串一樣被塞進(jìn)數(shù)組、當(dāng)作參數(shù)遞給另一個(gè)函數(shù)、甚至由另一個(gè)函數(shù)“生出來”。function greet(name) { return Hello, name; } function callWithHello(fn) { return fn(World); } let message callWithHello(greet); console.log(message); // 輸出Hello, World這個(gè)代碼里greet被當(dāng)成參數(shù)傳給了callWithHello后者在自己的函數(shù)體內(nèi)調(diào)用了它。這種“把一個(gè)函數(shù)交出去讓別的函數(shù)決定何時(shí)調(diào)用”的模式正是回調(diào)函數(shù)的基礎(chǔ)也是后面異步編程的地基。理解一等公民你就能看懂很多“奇怪”的寫法比如事件監(jiān)聽器里寫element.addEventListener(click, function() {...})——這里并不是先執(zhí)行函數(shù)而是把整個(gè)函數(shù)“交給”事件系統(tǒng)等到點(diǎn)擊發(fā)生的那一刻系統(tǒng)才來調(diào)用它。這也解釋了為什么異步代碼有時(shí)讓你困惑有些函數(shù)不是你調(diào)它而是要等一個(gè)信號(hào)才被調(diào)。有了這個(gè)認(rèn)知你再看各種“高階函數(shù)”的用法就會(huì)豁然開朗數(shù)組的map接收一個(gè)函數(shù)對每個(gè)元素執(zhí)行并返回新數(shù)組filter接收一個(gè)判斷函數(shù)篩出符合條件的元素。函數(shù)成了可以自由流通的“零件”這使得代碼復(fù)用性大幅提升——你不用為每種新需求重寫循環(huán)只需要換一個(gè)“零件”進(jìn)去。3.2 對象與this你親手搭起來的“資料卡”對象是 JavaScript 另一個(gè)地基級(jí)概念本質(zhì)是鍵值對容器。你可以把對象想象成一張實(shí)物資料卡字段是卡上的欄目如姓名、年齡值是填寫的內(nèi)容。數(shù)組是特殊的對象下標(biāo)即鍵名函數(shù)也是特殊的對象可以調(diào)用。這個(gè)“萬物皆可對象”的設(shè)定讓 JavaScript 非常靈活但也帶來了this這個(gè)著名的迷霧點(diǎn)。let person { name: John, age: 30, greet: function() { console.log(Hello, this.name); } }; person.greet(); // 輸出Hello, Johnthis的取值并不取決于它在哪里定義而是取決于它被誰調(diào)用。上面的例子里greet是person的方法調(diào)用點(diǎn)是person.greet()所以this指向person。但如果把greet單獨(dú)拿出來存到另一個(gè)變量里再調(diào)用this就很可能會(huì)變成undefined嚴(yán)格模式或全局對象——這是一個(gè)讓無數(shù)新手頭疼的“玄學(xué)”。避開這個(gè)坑有一個(gè)簡單策略盡量用普通函數(shù)語法 .call()/.apply()/.bind()來控制this或者干脆用箭頭函數(shù)。箭頭函數(shù)本身不產(chǎn)生自己的this它會(huì)繼承外層作用域的this這反而讓很多場景變得更可預(yù)測。不要死記this的各種規(guī)則先記住一個(gè)口訣“誰調(diào)用就指向誰沒人調(diào)用就按默認(rèn)規(guī)則走?！睂懗鰩锥涡〈a驗(yàn)證這個(gè)口訣比背十遍文檔都管用。對象還有一個(gè)用途把相關(guān)的函數(shù)和數(shù)據(jù)捆在一起形成“模塊”。比如一個(gè)購物車對象里面有商品數(shù)組、計(jì)算總價(jià)的方法、添加商品的方法。這樣做的好處是你的代碼結(jié)構(gòu)能直接映射業(yè)務(wù)概念讀代碼就跟讀業(yè)務(wù)說明書一樣。這也是為什么面向?qū)ο蟮乃季S方式如此流行的重要原義——對象提供了一種“組織代碼像組織現(xiàn)實(shí)事物”的自然路徑。4. DOM 操作JavaScript 接管網(wǎng)頁的那只手前面講的變量、函數(shù)、對象是在“語言的房間里練功”。真正讓 JavaScript 跟網(wǎng)頁發(fā)生關(guān)系靠的是 DOM 操作。如果你在瀏覽器里打開任何網(wǎng)頁然后按 F12 打開開發(fā)者工具輸入一句document.title看到當(dāng)前標(biāo)簽頁標(biāo)題被打印出來那一刻你就已經(jīng)碰到了 DOM。4.1 DOM 是一棵“活的樹”DOM 全稱是 Document Object Model文檔對象模型。你可以把整個(gè)頁面想象成一棵倒掛的樹根節(jié)點(diǎn)是document往下是html、body再往下是各種標(biāo)簽和文本。這棵樹不是靜態(tài)藍(lán)圖而是一棵實(shí)時(shí)同步的“活樹”——你用 JavaScript 改動(dòng)樹上的某個(gè)節(jié)點(diǎn)頁面立刻就會(huì)跟著變。這種設(shè)計(jì)意味著什么意味著網(wǎng)頁的內(nèi)容、結(jié)構(gòu)、樣式不是“寫完就固定”的而是可以通過代碼隨時(shí)調(diào)整。一個(gè)簡單的例子// 獲取元素 let element document.getElementById(myElement); // 修改內(nèi)容 element.innerHTML 新內(nèi)容;這兩行做到的事在早期互聯(lián)網(wǎng)是不可想象靜態(tài)頁面必須手動(dòng)改html文件才能換一句話?，F(xiàn)在只用兩行代碼你就能讓頁面上的文字瞬間變化。這正是“動(dòng)態(tài)網(wǎng)頁”的本質(zhì)——不是頁面自己會(huì)動(dòng)而是有腳本在背后實(shí)時(shí)操作這棵樹。4.2 讀、改、監(jiān)聽三個(gè)最常用的 DOM 動(dòng)作DOM 操作看起來方法很多其實(shí)可以歸納為三類讀取、修改、監(jiān)聽。讀取是“查”修改是“改”而監(jiān)聽是“守株待兔”——告訴瀏覽器“當(dāng)這個(gè)元素被點(diǎn)擊時(shí)執(zhí)行這個(gè)函數(shù)”。// 獲取元素 let element document.getElementById(myButton); // 修改內(nèi)容與樣式 element.textContent 點(diǎn)我; element.style.backgroundColor #4CAF50; // 添加事件監(jiān)聽器 element.addEventListener(click, function() { alert(按鈕被點(diǎn)擊了); });getElementById是最直接的一種獲取方式因?yàn)樗?HTML 里的id屬性而id保證唯一。除了它還有querySelector和querySelectorAll可以像寫 CSS 選擇器一樣精準(zhǔn)定位元素。textContent和innerHTML都可以改內(nèi)容區(qū)別在于innerHTML會(huì)解析字符串里的 HTML 標(biāo)簽textContent只會(huì)把它當(dāng)純文本。涉及用戶輸入的內(nèi)容時(shí)盡量用textContent可以避免腳本注入的安全隱患這是很多新手容易忽略的點(diǎn)。監(jiān)聽事件時(shí)有一個(gè)重要的優(yōu)化思路事件委托。如果你有十個(gè)按鈕都要監(jiān)聽點(diǎn)擊不必給每個(gè)按鈕都掛一個(gè)監(jiān)聽器而是把監(jiān)聽器掛到它們的共同父級(jí)上。點(diǎn)擊任何一個(gè)按鈕時(shí)父級(jí)統(tǒng)一處理再用邏輯判斷事件到底發(fā)生在誰身上。這不僅能省內(nèi)存還讓后續(xù)新增的按鈕自動(dòng)獲得同樣的事件處理能力——你的代碼結(jié)構(gòu)會(huì)因此簡潔很多。5. 易混概念同步與異步、原始與引用這些坑最容易被混淆到了這個(gè)階段你已經(jīng)能用 JavaScript 寫不少功能了。但真正讓初學(xué)者從“能跑”到“跑得明白”的跨越往往發(fā)生在厘清幾個(gè)容易混淆的概念上。這一章集中解決最常見的四組“雙胞胎”。5.1 同步與異步不是快慢的區(qū)別是等不等的區(qū)別很多人以為“異步就是更快”大錯(cuò)特錯(cuò)。異步不是讓任務(wù)跑得更快而是讓“耗時(shí)的任務(wù)”不阻擋主線程讓“后面不依賴它的代碼”先執(zhí)行。這有點(diǎn)像點(diǎn)外賣同步模式是一邊開車一邊去店里到了才能繼續(xù)下一步異步模式是下單后司機(jī)正常開會(huì)外賣到了再通知你拿。JavaScript 是單線程的語言同一時(shí)刻只能執(zhí)行一個(gè)任務(wù)。如果某個(gè)任務(wù)是死等三秒整個(gè)頁面就會(huì)被卡死三秒——按鈕點(diǎn)不了動(dòng)畫停住。異步編程就是解決這個(gè)問題的把耗時(shí)任務(wù)交出去主線程先干別的等任務(wù)完成再把結(jié)果通過回調(diào)送回。5.2 回調(diào)、Promise 和 async/await三個(gè)“遞進(jìn)”的關(guān)系回調(diào)是最古老的異步方案把函數(shù)作為參數(shù)傳給異步操作操作完成時(shí)調(diào)用它。但回調(diào)一旦多層嵌套代碼會(huì)出現(xiàn)著名的“回調(diào)地獄”——縮進(jìn)層層加深讀起來像歪七扭八的階梯改一個(gè)邏輯要找半天。Promise 的出現(xiàn)是為了把異步結(jié)果變成一個(gè)可以鏈?zhǔn)讲僮鞯膶ο髄et promise new Promise(function(resolve, reject) { // 異步操作比如 setTimeout 模擬網(wǎng)絡(luò)請求 setTimeout(function() { resolve(Success!); }, 1000); }); promise.then(function(result) { console.log(result); // 輸出Success! });resolve表示操作成功并傳出結(jié)果reject表示失敗并傳出原因。.then處理成功.catch處理失敗。這比回調(diào)的寫法規(guī)整得多但還是有一點(diǎn)鏈?zhǔn)讲僮鞯拈喿x負(fù)擔(dān)。async/await則是讓異步代碼“看起來像同步”的語法糖async function getData() { let result await promise; // 這一行會(huì)暫停等待 promise 完成 console.log(result); }注意await只能在async函數(shù)里使用。它讓你像寫同步代碼一樣順序閱讀實(shí)際卻在等待異步結(jié)果。用哪個(gè)好我的建議是新代碼習(xí)慣用async/await它在處理多個(gè)串行請求時(shí)更清晰需要并行請求時(shí)再考慮Promise.all。這就是一個(gè)“舊方案 → 中間方案 → 新方案”的演進(jìn)理解了這個(gè)順序你再看各種討論就不會(huì)一頭霧水。5.3 DOM 操作是在 DOM 加載后才能做的新手常犯一個(gè)錯(cuò)誤在頁面還沒加載完時(shí)就執(zhí)行g(shù)etElementById結(jié)果拿到的永遠(yuǎn)是null頁面看起來“什么都沒發(fā)生”。原因是腳本在瀏覽器解析 HTML 的中途就執(zhí)行了此時(shí)后面的節(jié)點(diǎn)還不存在。解決方案有兩個(gè)把script標(biāo)簽放到/body的后面或者監(jiān)聽 DOM 加載完成的事件。前者是最簡單直接的辦法因?yàn)闉g覽器按順序解析 HTML腳本放在文檔末尾時(shí)前面的節(jié)點(diǎn)都已經(jīng)解析完畢。后者的代碼如下document.addEventListener(DOMContentLoaded, function() { // 在這里操作頁面元素保證安全 });如果你只用原生 JavaScript這個(gè)習(xí)慣能避免一半的“為什么我的代碼不生效”問題。頁面結(jié)構(gòu)、腳本位置、加載時(shí)機(jī)這三個(gè)要素是排查前端問題時(shí)最先要檢查的對象。5.4 原始類型不是對象不要在上面找方法雖然hello.toUpperCase()這種寫法在 JavaScript 中是合法的看起來字符串也有方法但這是一種“臨時(shí)包裝”字符串本身仍然是原始類型只是調(diào)用方法的那一刻運(yùn)行時(shí)臨時(shí)給它包了一個(gè) String 對象方法調(diào)用完包裝就消失了。理解這一點(diǎn)有什么實(shí)際意義意義在于你無法給原始類型“存檔”比如想給一個(gè)數(shù)字掛一個(gè)自定義屬性讓它記住某個(gè)狀態(tài)這個(gè)屬性會(huì)在下一次操作時(shí)丟失。這不會(huì)造成項(xiàng)目災(zāi)難但能讓你理解 JavaScript 內(nèi)部的一種“偽裝機(jī)制”從而看到“原始類型和對象之間有明確邊界”。如果你想讓數(shù)據(jù)攜帶額外信息正確做法是用對象包裝而不是給原始值“貼標(biāo)簽”。6. 什么時(shí)候用 JavaScript該上場時(shí)上場該收手時(shí)收手學(xué)了這么多你可能會(huì)想JavaScript 是不是什么都能干接近但不完全。它最強(qiáng)的主場是任何需要“交互界面”的場景——網(wǎng)頁按鈕的點(diǎn)擊、菜單的展開、表單的校驗(yàn)、圖表的數(shù)據(jù)刷新這些都是它的看家本領(lǐng)。如果你要在瀏覽器里做任何動(dòng)態(tài)效果JavaScript 是唯一的選擇不用想別的。它還適合做全棧開發(fā)的“同一門語言”方案前端用 React 或 Vue后端用 Node.js一個(gè)團(tuán)隊(duì)只用 JavaScript 就能打通前后端減少了“前端工程師和后端工程師各說各話”的溝通成本?？焖俅罱ㄐ〕绦?、工具型應(yīng)用或 IoT 設(shè)備的控制面板這種“開發(fā)速度和用戶體感并重”的項(xiàng)目JavaScript 都很合適。但也有明顯不適合的場合。如果任務(wù)是重計(jì)算比如要處理海量圖像、訓(xùn)練機(jī)器學(xué)習(xí)模型、做復(fù)雜的金融數(shù)值模擬JavaScript 的單線程模型就不太占優(yōu)勢。因?yàn)樗墙忉屝驼Z言運(yùn)行效率通常低于編譯型語言而這些任務(wù)恰好需要極致的底層性能。即便是 Node.js 有 Worker 線程也只是多開了幾個(gè)并行通道單體性能的物理上限仍然被語言特性約束。從維護(hù)角度來看如果一個(gè)項(xiàng)目沒有頁面交互、沒有用戶操作就是個(gè)純后臺(tái)的數(shù)據(jù)清洗腳本那用 JavaScript 硬上還不如用 Python 或 Shell 簡潔。另一個(gè)微妙場景是超大型桌面應(yīng)用雖然 Electron 等工具能用 JavaScript 寫桌面軟件但內(nèi)存占用和包體積往往會(huì)讓用戶付出成本。這種場景下“能不能做”和“該不該做”是兩回事。說到底JavaScript 是一門“界面語言”和“膠水語言”——它擅長把各種服務(wù)、數(shù)據(jù)、用戶操作粘合在一起讓復(fù)雜系統(tǒng)像行云流水一樣被普通人使用。判斷該不該用它只需問自己一句話這個(gè)項(xiàng)目里有多少工作是“跟人產(chǎn)生交互”交互越密集JavaScript 的價(jià)值越大。我自己就吃過一次虧某次接了個(gè)純數(shù)據(jù)清洗的任務(wù)為了“統(tǒng)一語言”強(qiáng)行用了 Node.js結(jié)果處理近百萬行記錄時(shí)耗時(shí)感人被迫換回 Python同樣的邏輯快了好幾倍。從那以后我每次定技術(shù)選型都強(qiáng)制自己先問一句“交互密集不密集”而不是只圖順手。希望幫到你也祝你在 JavaScript 這條路上少踩坑、多寫能跑還能維護(hù)的代碼。本文還有配套的精品資源點(diǎn)擊獲取