學(xué)JavaScript：從運(yùn)行環(huán)境、DOM操作到網(wǎng)絡(luò)請(qǐng)求與調(diào)試)
在實(shí)際的 Web 前端開(kāi)發(fā)中JavaScript 不是一門“可選”語(yǔ)言而是頁(yè)面交互、數(shù)據(jù)處理、網(wǎng)絡(luò)請(qǐng)求和前端框架的基礎(chǔ)。很多零基礎(chǔ)的初學(xué)者在看完一遍語(yǔ)法文檔后仍然不知道代碼該寫在哪里、怎么運(yùn)行、報(bào)錯(cuò)怎么看、函數(shù)和對(duì)象到底解決什么問(wèn)題。這篇文章會(huì)從零開(kāi)始把 JavaScript 的語(yǔ)法主線、運(yùn)行方式、DOM 操作、網(wǎng)絡(luò)請(qǐng)求和排錯(cuò)思路串起來(lái)重點(diǎn)放在“為什么這樣寫”和“報(bào)錯(cuò)之后怎么查”上。文章適合完全沒(méi)有編程基礎(chǔ)、剛接觸 Web 前端的初學(xué)者也適合已經(jīng)寫過(guò) HTML 和 CSS、但還沒(méi)有系統(tǒng)學(xué)過(guò) JavaScript 的讀者。學(xué)完之后你會(huì)知道如何搭建最小運(yùn)行環(huán)境、理解變量、函數(shù)、對(duì)象、數(shù)組和事件的核心用法并能獨(dú)立排查常見(jiàn)的 JavaScript 報(bào)錯(cuò)。1. 先搞清楚 JavaScript 到底是什么才能開(kāi)始學(xué)1.1 網(wǎng)頁(yè)三件套中 JavaScript 負(fù)責(zé)什么構(gòu)建一個(gè)網(wǎng)頁(yè)通常用三門語(yǔ)言它們的分工完全不同HTML 負(fù)責(zé)頁(yè)面結(jié)構(gòu)相當(dāng)于房子的承重墻和房間布局。CSS 負(fù)責(zé)頁(yè)面樣式相當(dāng)于墻面顏色、家具擺放和整體裝修。JavaScript 負(fù)責(zé)頁(yè)面行為相當(dāng)于房子里的電路、水管和智能開(kāi)關(guān)用戶點(diǎn)擊按鈕、輸入文字、發(fā)起請(qǐng)求、數(shù)據(jù)變化后的刷新都靠 JavaScript 驅(qū)動(dòng)。如果一個(gè) HTML 頁(yè)面沒(méi)有任何 JavaScript它只能展示靜態(tài)信息用戶點(diǎn)擊按鈕不會(huì)有任何反應(yīng)表單數(shù)據(jù)也無(wú)法交給服務(wù)器處理。JavaScript 的價(jià)值就是讓頁(yè)面“動(dòng)”起來(lái)。這里需要補(bǔ)充一個(gè)容易混淆的點(diǎn)JavaScript 雖然在名字里有“Java”但它和 Java 語(yǔ)言沒(méi)有直接關(guān)系。JavaScript 最初由 Netscape 公司設(shè)計(jì)取名時(shí)借用了 Java 的熱度但兩者的語(yǔ)法、運(yùn)行機(jī)制和應(yīng)用場(chǎng)景完全不同。初學(xué)階段完全不需要把 Java 和 JavaScript 放在一起比較先掌握 JavaScript 本身即可。1.2 JavaScript 在哪里運(yùn)行JavaScript 主要有兩個(gè)運(yùn)行環(huán)境瀏覽器環(huán)境。這是 Web 前端最常用的環(huán)境JavaScript 代碼通過(guò)script標(biāo)簽嵌入 HTML 頁(yè)面由瀏覽器內(nèi)置的 JavaScript 引擎解析執(zhí)行。瀏覽器環(huán)境提供了 DOM、BOM、事件、網(wǎng)絡(luò)請(qǐng)求等 Web API。Node.js 環(huán)境。這是一個(gè)脫離瀏覽器的 JavaScript 運(yùn)行環(huán)境主要用于開(kāi)發(fā)后端服務(wù)、命令行工具和前端構(gòu)建工具。初學(xué)者可以先不接觸 Node.js先把瀏覽器環(huán)境跑通。在瀏覽器里運(yùn)行 JavaScript 不需要安裝額外軟件也不需要單獨(dú)配置環(huán)境。只要有一個(gè)現(xiàn)代瀏覽器按 F12 打開(kāi)開(kāi)發(fā)者工具點(diǎn)擊 Console控制臺(tái)面板就可以直接輸入并執(zhí)行 JavaScript 代碼。這也是學(xué)習(xí)階段最輕量的運(yùn)行方式。1.3 JavaScript 的核心組成一個(gè)完整的 JavaScript 學(xué)習(xí)體系包含三塊內(nèi)容組成說(shuō)明典型內(nèi)容ECMAScript語(yǔ)言核心規(guī)范描述語(yǔ)法和基礎(chǔ)對(duì)象變量、數(shù)據(jù)類型、運(yùn)算符、流程控制、函數(shù)、對(duì)象、數(shù)組、類DOM文檔對(duì)象模型操作網(wǎng)頁(yè)元素的接口獲取元素、修改內(nèi)容、綁定事件、操作樣式BOM瀏覽器對(duì)象模型操作瀏覽器的接口window、location、history、alert、setTimeout新手學(xué)習(xí)時(shí)要分清這三者的邊界。比如console.log是瀏覽器控制臺(tái)對(duì)象提供的方法document.getElementById是 DOM 提供的方法setTimeout是瀏覽器提供的定時(shí)器。它們都叫“JavaScript API”但歸屬不同理解這個(gè)結(jié)構(gòu)對(duì)后面排查問(wèn)題很有幫助。2. 搭建最小開(kāi)發(fā)環(huán)境先讓代碼跑起來(lái)2.1 用瀏覽器控制臺(tái)做第一行代碼實(shí)驗(yàn)打開(kāi) Chrome 或 Edge 瀏覽器按 F12 打開(kāi)開(kāi)發(fā)者工具切換到 Console 面板在提示符后面輸入console.log(hello world);按回車后會(huì)在控制臺(tái)輸出hello world。這是最簡(jiǎn)單的 JavaScript 運(yùn)行驗(yàn)證。瀏覽器控制臺(tái)適合測(cè)試零散語(yǔ)法但它不保存代碼刷新頁(yè)面后內(nèi)容就會(huì)丟失。真正寫項(xiàng)目時(shí)需要把 JavaScript 代碼寫到.js文件或者 HTML 的script標(biāo)簽中。2.2 一個(gè)最小的 HTML 頁(yè)面加上 JavaScript在本地新建一個(gè)文件夾創(chuàng)建demo.html文件寫入以下內(nèi)容!DOCTYPE html html langzh-CN head meta charsetUTF-8 titleJavaScript 入門/title /head body h1 idtitleHello/h1 button idbtn點(diǎn)擊我/button script const title document.getElementById(title); const btn document.getElementById(btn); btn.addEventListener(click, function () { title.textContent 你點(diǎn)擊了按鈕; console.log(按鈕被點(diǎn)擊了); }); /script /body /html用瀏覽器打開(kāi)這個(gè)文件點(diǎn)擊頁(yè)面上的按鈕標(biāo)題文字會(huì)從Hello變成你點(diǎn)擊了按鈕同時(shí)控制臺(tái)輸出一條日志。這段代碼里包含了初學(xué)者需要理解的三件事document.getElementById是獲取頁(yè)面元素的方法。addEventListener(click, callback)是給元素綁定點(diǎn)擊事件的方法第二個(gè)參數(shù)是一個(gè)函數(shù)。textContent是讀取或修改元素文本內(nèi)容的屬性。不需要立刻記住全部 API但要理解 JavaScript 和頁(yè)面交互的基本鏈路獲取元素 → 綁定事件 → 修改內(nèi)容。2.3 外部 JS 文件的引入方式當(dāng)代碼量變大時(shí)不應(yīng)該把所有 JavaScript 寫在 HTML 文件內(nèi)部而應(yīng)該單獨(dú)創(chuàng)建.js文件再通過(guò)script標(biāo)簽引入。創(chuàng)建app.jsconsole.log(app.js 文件已加載);在 HTML 中引入script srcapp.js/script需要強(qiáng)調(diào)的是script標(biāo)簽的位置會(huì)影響代碼執(zhí)行順序。如果腳本放在body底部頁(yè)面 DOM 已經(jīng)解析完成可以直接操作元素如果放在head中腳本執(zhí)行時(shí) body 中的元素還沒(méi)有被解析直接獲取元素會(huì)得到null。初學(xué)階段推薦把外部腳本放在/body之前減少這類問(wèn)題。3. 變量和數(shù)據(jù)類型是后面所有內(nèi)容的地基3.1 聲明變量的三種方式JavaScript 中聲明變量有三種關(guān)鍵字var、let、const。var a 10; let b 20; const c 30;初學(xué)階段需要掌握它們的核心差異關(guān)鍵字是否能重新賦值作用域建議var可以函數(shù)作用域盡量不用let可以塊級(jí)作用域推薦用于會(huì)變化的變量const不可以重新賦值塊級(jí)作用域推薦用于不會(huì)變化的變量這里的“作用域”可以簡(jiǎn)單理解成變量能被訪問(wèn)的范圍。let和const是塊級(jí)作用域意思是在一對(duì)花括號(hào){}內(nèi)部聲明的變量只能在這個(gè)塊內(nèi)部使用。var是函數(shù)作用域行為更寬松容易造成變量污染這也是現(xiàn)代開(kāi)發(fā)中推薦使用let和const的原因。需要特別注意的是const不能重新賦值但數(shù)組和對(duì)象內(nèi)部的元素可以修改。因?yàn)閏onst限制的是“變量指向的地址”而不是地址里存的內(nèi)容。const arr [1, 2, 3]; arr.push(4); // 正確數(shù)組本身可以修改 console.log(arr); // [1, 2, 3, 4] // arr [5, 6, 7]; // 錯(cuò)誤不能重新賦值3.2 基本數(shù)據(jù)類型JavaScript 中常用的基礎(chǔ)數(shù)據(jù)類型包括number數(shù)值類型包含整數(shù)和浮點(diǎn)數(shù)。string字符串類型用單引號(hào)、雙引號(hào)或反引號(hào)包裹。boolean布爾類型只有true和false兩個(gè)值。undefined未定義類型變量聲明了但沒(méi)有賦值。null空值表示人為設(shè)置為空。object對(duì)象類型包括普通對(duì)象、數(shù)組、函數(shù)等。使用typeof可以查看一個(gè)變量的類型console.log(typeof 10); // number console.log(typeof hello); // string console.log(typeof true); // boolean console.log(typeof undefined); // undefined console.log(typeof null); // object歷史遺留行為 console.log(typeof {}); // object這里有一個(gè)經(jīng)典的知識(shí)點(diǎn)typeof null返回的是object這是 JavaScript 最初設(shè)計(jì)時(shí)留下來(lái)的行為雖然在邏輯上 null 是一個(gè)空值但 typeof 的結(jié)果會(huì)誤導(dǎo)初學(xué)者。實(shí)際開(kāi)發(fā)中判斷變量是否為 null一般直接比較if (value null) { console.log(value 是 null); }3.3 類型轉(zhuǎn)換是新手最容易踩坑的地方JavaScript 是動(dòng)態(tài)類型語(yǔ)言變量在運(yùn)行過(guò)程中可以自動(dòng)轉(zhuǎn)換類型這種隱式轉(zhuǎn)換經(jīng)常導(dǎo)致預(yù)期之外的結(jié)果。典型例子是字符串拼接console.log(1 1); // 11 console.log(1 - 1); // 0 console.log(5 * 2); // 10操作符在遇到字符串時(shí)會(huì)做拼接所以1 1得到字符串11。而-、*、/會(huì)嘗試把字符串轉(zhuǎn)成數(shù)值所以1 - 1得到0。這種不一致會(huì)讓新手覺(jué)得“JavaScript 很奇怪”實(shí)際上它遵循的是“加號(hào)遇字符串變拼接其他運(yùn)算符盡量轉(zhuǎn)數(shù)值”的規(guī)則。為了避免隱式轉(zhuǎn)換帶來(lái)問(wèn)題推薦使用嚴(yán)格相等運(yùn)算符而不是console.log(1 1); // true會(huì)發(fā)生類型轉(zhuǎn)換 console.log(1 1); // false類型不同直接不等初學(xué)階段養(yǎng)成使用的習(xí)慣能少踩很多坑。3.4 模板字符串拼接字符串時(shí)使用加號(hào)的寫法可讀性較差const name 張三; const age 20; console.log(我的名字是 name 今年 age 歲);使用反引號(hào)模板字符串可以這樣寫console.log(我的名字是${name}今年${age}歲);模板字符串里用${}包裹表達(dá)式JavaScript 會(huì)自動(dòng)計(jì)算并插入結(jié)果這種方式更簡(jiǎn)潔也支持換行是開(kāi)發(fā)中的推薦寫法。4. 函數(shù)JavaScript 中的核心抽象方式4.1 三種函數(shù)寫法函數(shù)的作用是把一段可重復(fù)執(zhí)行的邏輯封裝起來(lái)避免代碼重復(fù)。JavaScript 中有三種常見(jiàn)寫法// 函數(shù)聲明 function add(a, b) { return a b; } // 函數(shù)表達(dá)式 const subtract function (a, b) { return a - b; }; // 箭頭函數(shù) const multiply (a, b) { return a * b; }; console.log(add(1, 2)); // 3 console.log(subtract(5, 2)); // 3 console.log(multiply(3, 4)); // 12函數(shù)聲明和函數(shù)表達(dá)式的區(qū)別在于“提升”機(jī)制。函數(shù)聲明可以在定義之前調(diào)用函數(shù)表達(dá)式不行。箭頭函數(shù)是 ES6 引入的寫法語(yǔ)法更簡(jiǎn)潔但它和普通函數(shù)在this的指向上有區(qū)別初學(xué)階段先掌握基本用法即可等學(xué)到對(duì)象和事件時(shí)再深入理解this。4.2 參數(shù)和默認(rèn)值函數(shù)參數(shù)可以有默認(rèn)值function greet(name 陌生人) { console.log(你好${name}); } greet(); // 你好陌生人 greet(小明); // 你好小明當(dāng)調(diào)用函數(shù)時(shí)沒(méi)有傳入對(duì)應(yīng)參數(shù)參數(shù)的值就是undefined此時(shí)默認(rèn)值會(huì)生效。函數(shù)內(nèi)部還可以通過(guò)arguments對(duì)象訪問(wèn)所有傳入的參數(shù)但箭頭函數(shù)沒(méi)有自己的arguments?，F(xiàn)代開(kāi)發(fā)中更推薦使用剩余參數(shù)function sum(...numbers) { return numbers.reduce((total, current) total current, 0); } console.log(sum(1, 2, 3, 4)); // 10...numbers會(huì)把所有傳入?yún)?shù)收集成一個(gè)數(shù)組然后對(duì)數(shù)組做累加。reduce是數(shù)組的歸并方法它接收一個(gè)回調(diào)函數(shù)和初始值回調(diào)函數(shù)第一個(gè)參數(shù)是累積結(jié)果第二個(gè)參數(shù)是當(dāng)前元素。4.3 什么是回調(diào)函數(shù)回調(diào)函數(shù)就是把一個(gè)函數(shù)作為參數(shù)傳給另一個(gè)函數(shù)另一個(gè)函數(shù)在合適的時(shí)機(jī)調(diào)用它。瀏覽器事件監(jiān)聽(tīng)就是典型的回調(diào)場(chǎng)景const btn document.getElementById(btn); btn.addEventListener(click, function () { console.log(點(diǎn)擊事件觸發(fā)了); });這個(gè)匿名函數(shù)就是回調(diào)函數(shù)它不會(huì)在定義時(shí)立即執(zhí)行而是等用戶點(diǎn)擊按鈕后由瀏覽器調(diào)用。理解回調(diào)函數(shù)的關(guān)鍵是當(dāng)你把函數(shù)作為參數(shù)傳遞時(shí)不要加括號(hào)。加括號(hào)表示立即執(zhí)行不加括號(hào)表示把函數(shù)本身交給別人去調(diào)用。4.4 作用域和閉包入門作用域決定了變量可以訪問(wèn)的范圍。JavaScript 采用詞法作用域意味著函數(shù)內(nèi)可以訪問(wèn)函數(shù)外部的變量但反過(guò)來(lái)不行。let score 100; function showScore() { console.log(score); // 可以訪問(wèn)外部變量 } showScore(); // 100閉包是一個(gè)稍難理解的概念它指的是一個(gè)函數(shù)“記住”了定義它時(shí)的作用域即使這個(gè)函數(shù)在別處被調(diào)用仍然可以訪問(wèn)原來(lái)作用域中的變量。function createCounter() { let count 0; return function () { count; return count; }; } const counter createCounter(); console.log(counter()); // 1 console.log(counter()); // 2在這里內(nèi)部匿名函數(shù)被返回后仍然持有count變量的訪問(wèn)權(quán)所以多次調(diào)用counter時(shí)count會(huì)持續(xù)累加。初學(xué)階段不需要把閉包用得很熟練但要理解“函數(shù)自帶記憶環(huán)境”這個(gè)現(xiàn)象后面學(xué)習(xí)模塊化和框架時(shí)會(huì)經(jīng)常遇到。5. 對(duì)象和數(shù)組操作數(shù)據(jù)的日常工具5.1 對(duì)象的基本用法對(duì)象用來(lái)描述一組相關(guān)的屬性。普通對(duì)象用花括號(hào)定義const user { name: 張三, age: 20, isAdmin: false }; // 讀取屬性 console.log(user.name); console.log(user[age]); // 修改屬性 user.age 21; // 新增屬性 user.email zhangsanexample.com; // 刪除屬性 delete user.isAdmin; console.log(user);點(diǎn)語(yǔ)法適合屬性名符合標(biāo)識(shí)符規(guī)則的情況方括號(hào)語(yǔ)法適合屬性名包含特殊字符或需要?jiǎng)討B(tài)計(jì)算屬性名的情況。5.2 數(shù)組的增刪改查數(shù)組用方括號(hào)定義下標(biāo)從 0 開(kāi)始const fruits [apple, banana, orange]; // 讀取 console.log(fruits[0]); // apple // 尾部添加 fruits.push(grape); // 尾部刪除 fruits.pop(); // 頭部添加 fruits.unshift(pear); // 頭部刪除 fruits.shift(); // 查找元素位置 console.log(fruits.indexOf(banana)); // 1 // 截取 const sliced fruits.slice(1, 2);需要注意slice不會(huì)修改原數(shù)組splice才會(huì)修改原數(shù)組。這種“是否修改原數(shù)組”的差異在開(kāi)發(fā)中經(jīng)常引起問(wèn)題建議用到某個(gè)方法時(shí)先查文檔確認(rèn)。5.3 常用迭代方法forEach、map、filter、reduce數(shù)組的迭代方法能極大簡(jiǎn)化數(shù)據(jù)處理代碼。forEach用于遍歷數(shù)組沒(méi)有返回值const arr [1, 2, 3]; arr.forEach((item, index) { console.log(${index}: ${item}); });map用于把原數(shù)組映射成新數(shù)組返回的是新數(shù)組不會(huì)修改原數(shù)組const numbers [1, 2, 3]; const doubled numbers.map((item) item * 2); console.log(doubled); // [2, 4, 6]filter用于篩選符合條件的元素得到新數(shù)組const numbers [1, 2, 3, 4, 5]; const even numbers.filter((item) item % 2 0); console.log(even); // [2, 4]reduce用于把數(shù)組歸并成單個(gè)值const numbers [1, 2, 3, 4]; const total numbers.reduce((sum, item) sum item, 0); console.log(total); // 10這些方法的共同點(diǎn)是接收一個(gè)回調(diào)函數(shù)回調(diào)函數(shù)根據(jù)場(chǎng)景決定接收的參數(shù)。初學(xué)階段建議每個(gè)方法都親手寫一遍不要只是看示例。5.4 JSON 與對(duì)象的轉(zhuǎn)換前端和后端的數(shù)據(jù)交換通常使用 JSON 格式。JavaScript 提供了兩個(gè)方法const user { name: 張三, age: 20 }; // 對(duì)象轉(zhuǎn) JSON 字符串 const jsonString JSON.stringify(user); console.log(jsonString); // {name:張三,age:20} // JSON 字符串轉(zhuǎn)對(duì)象 const parsed JSON.parse(jsonString); console.log(parsed.name); // 張三JSON.stringify和JSON.parse在前后端聯(lián)調(diào)時(shí)非常常用。解析 JSON 時(shí)如果字符串格式不正確JSON.parse會(huì)拋出異常實(shí)際項(xiàng)目中要用try...catch包裹避免解析失敗導(dǎo)致整個(gè)腳本崩潰。const invalidData {name: 張三}; try { const result JSON.parse(invalidData); console.log(result); } catch (e) { console.log(JSON 解析失敗, e.message); }注意 JSON 里的字符串必須使用雙引號(hào)屬性名也必須加雙引號(hào)不能寫單引號(hào)。6. DOM 操作讓 JavaScript 和頁(yè)面真正聯(lián)動(dòng)6.1 DOM 是什么DOMDocument Object Model是瀏覽器把 HTML 文檔解析成的樹(shù)形結(jié)構(gòu)。每一個(gè)標(biāo)簽、屬性、文本都是樹(shù)上的節(jié)點(diǎn)。JavaScript 通過(guò) DOM 接口讀取和修改這些節(jié)點(diǎn)從而實(shí)現(xiàn)頁(yè)面內(nèi)容的動(dòng)態(tài)變化?？梢杂靡粋€(gè)簡(jiǎn)單的比喻理解HTML 是房子的圖紙瀏覽器按照?qǐng)D紙蓋好房子DOM 就是房子里的一套開(kāi)關(guān)和插座系統(tǒng)JavaScript 通過(guò)操作開(kāi)關(guān)來(lái)改變房間的狀態(tài)。6.2 獲取頁(yè)面元素常用方法有三種// 根據(jù) id 獲取單個(gè)元素 const title document.getElementById(title); // 根據(jù)選擇器獲取第一個(gè)匹配元素 const firstBtn document.querySelector(.btn); // 根據(jù)選擇器獲取所有匹配元素返回 NodeList const allBtns document.querySelectorAll(.btn);querySelector和querySelectorAll的參數(shù)字符串是 CSS 選擇器所以.class、#id、tag、父子選擇器都可以使用。getElementById只能按 id 查但性能更好。業(yè)務(wù)代碼中兩種方式都會(huì)用到?jīng)]有絕對(duì)優(yōu)劣。6.3 事件監(jiān)聽(tīng)頁(yè)面交互的核心是事件。常用事件有click、input、change、mouseover、keydown等。const input document.getElementById(username); const tip document.getElementById(tip); input.addEventListener(input, function () { const value input.value; if (value.length 3) { tip.textContent 用戶名至少 3 個(gè)字符; tip.style.color red; } else { tip.textContent 用戶名可用; tip.style.color green; } });這個(gè)例子實(shí)現(xiàn)了輸入框字符長(zhǎng)度校驗(yàn)。input事件會(huì)在每次輸入時(shí)觸發(fā)它比change事件更實(shí)時(shí)。生產(chǎn)環(huán)境下校驗(yàn)邏輯通常更復(fù)雜需要同時(shí)考慮規(guī)則、提示文案和防抖但核心的事件綁定機(jī)制是一樣的。6.4 修改樣式和類名修改元素樣式有兩種推薦方式方式一直接修改部分樣式屬性const box document.getElementById(box); box.style.backgroundColor blue; box.style.padding 10px;方式二切換類名把樣式邏輯集中在 CSS 文件里const box document.getElementById(box); box.classList.add(active); box.classList.remove(hidden); box.classList.toggle(selected);推薦優(yōu)先使用類名切換因?yàn)闃邮郊泄芾砗蟾菀拙S護(hù)。直接操作style適合臨時(shí)、動(dòng)態(tài)、簡(jiǎn)單的樣式調(diào)整。7. 網(wǎng)絡(luò)請(qǐng)求用 fetch 與后端交互7.1 前端為什么要發(fā)起網(wǎng)絡(luò)請(qǐng)求頁(yè)面中的數(shù)據(jù)不可能全部寫死在代碼里。登錄用戶信息、商品列表、訂單狀態(tài)這些數(shù)據(jù)通常存儲(chǔ)在服務(wù)器數(shù)據(jù)庫(kù)中前端需要通過(guò) HTTP 請(qǐng)求獲取或提交。早期前端使用 XMLHttpRequest 發(fā)請(qǐng)求代碼比較繁瑣?，F(xiàn)代瀏覽器提供了fetchAPI語(yǔ)法更簡(jiǎn)潔基于 Promise 設(shè)計(jì)。7.2 fetch 的基本用法一個(gè)最簡(jiǎn)單的 GET 請(qǐng)求fetch(https://api.example.com/users) .then((response) response.json()) .then((data) { console.log(data); }) .catch((error) { console.log(請(qǐng)求失敗, error); });fetch返回一個(gè) Promise第一次then拿到的是響應(yīng)對(duì)象需要調(diào)用.json()把響應(yīng)體解析成 JavaScript 對(duì)象第二次then拿到的是真正解析后的數(shù)據(jù)。如果網(wǎng)絡(luò)異?；蚍?wù)器無(wú)響應(yīng)會(huì)進(jìn)入catch。使用 async/await 可以讓異步代碼讀起來(lái)更像同步代碼async function loadUsers() { try { const response await fetch(https://api.example.com/users); const data await response.json(); console.log(data); } catch (error) { console.log(請(qǐng)求失敗, error); } } loadUsers();await只能在async函數(shù)內(nèi)部使用。它表示等待一個(gè) Promise 完成然后取出其結(jié)果。用try...catch捕獲錯(cuò)誤是推薦寫法。7.3 發(fā)送 POST 請(qǐng)求向服務(wù)器提交數(shù)據(jù)時(shí)通常使用 POST 方法并設(shè)置請(qǐng)求頭和請(qǐng)求體async function createUser() { const url https://api.example.com/users; const options { method: POST, headers: { Content-Type: application/json }, body: JSON.stringify({ name: 張三, age: 20 }) }; try { const response await fetch(url, options); const result await response.json(); console.log(result); } catch (error) { console.log(提交失敗, error); } }這里最容易踩的坑是請(qǐng)求頭設(shè)置。如果Content-Type設(shè)置為application/json那么body必須使用JSON.stringify轉(zhuǎn)成字符串如果body直接傳 JavaScript 對(duì)象接口大概率會(huì)解析失敗。學(xué)習(xí)階段建議對(duì)比以下三種情況Content-Typebody 格式application/jsonJSON.stringify({ ... })不設(shè)置或使用表單格式new URLSearchParams({ ... })文件上傳FormData對(duì)象8. JavaScript 報(bào)錯(cuò)怎么看從現(xiàn)象到原因的一條排查鏈路8.1 先分清三類常見(jiàn)錯(cuò)誤新手在控制臺(tái)看到的報(bào)錯(cuò)千變?nèi)f化但多數(shù)可以歸為三類語(yǔ)法錯(cuò)誤SyntaxError語(yǔ)法錯(cuò)誤表示代碼沒(méi)有按照 JavaScript 語(yǔ)法規(guī)則書(shū)寫腳本在解析階段就失敗不會(huì)繼續(xù)執(zhí)行。const a 1; // 正確的是 const a 1;常見(jiàn)原因包括少寫了分號(hào)、括號(hào)不匹配、字符串引號(hào)沒(méi)閉合、函數(shù)名拼寫錯(cuò)誤。引用錯(cuò)誤ReferenceError引用錯(cuò)誤表示使用了一個(gè)不存在的變量或函數(shù)最常見(jiàn)的是變量名拼寫錯(cuò)誤、變量在作用域外被訪問(wèn)、使用前忘了聲明。console.log(username); // ReferenceError: username is not defined類型錯(cuò)誤TypeError類型錯(cuò)誤表示變量的類型不支持當(dāng)前操作常見(jiàn)場(chǎng)景是對(duì)null或undefined調(diào)用屬性或方法。const obj null; console.log(obj.name); // TypeError: Cannot read properties of null (reading name)這類報(bào)錯(cuò)在操作 DOM 時(shí)非常常見(jiàn)本質(zhì)是獲取元素失敗拿到的是null卻仍然去訪問(wèn)它的屬性。8.2 報(bào)錯(cuò)排查的標(biāo)準(zhǔn)順序遇到控制臺(tái)報(bào)錯(cuò)時(shí)建議按以下順序排查讀報(bào)錯(cuò)信息的第一行確認(rèn)錯(cuò)誤類型和錯(cuò)誤描述?？磮?bào)錯(cuò)位置的堆棧信息一般會(huì)顯示文件名、行號(hào)和列號(hào)。點(diǎn)擊堆棧中的文件鏈接直接跳轉(zhuǎn)到對(duì)應(yīng)的錯(cuò)誤行?；乜创a確認(rèn)變量是否已聲明、函數(shù)是否已定義、對(duì)象是否為 null。在報(bào)錯(cuò)之前加console.log打印關(guān)鍵變量確認(rèn)運(yùn)行到哪一步出問(wèn)題。如果是網(wǎng)絡(luò)請(qǐng)求報(bào)錯(cuò)切換到 Network 面板查看請(qǐng)求狀態(tài)碼和響應(yīng)體。8.3 使用 try...catch 處理可預(yù)期的異常對(duì)于可能失敗的代碼例如網(wǎng)絡(luò)請(qǐng)求、JSON 解析、文件讀取建議使用try...catch包裹而不是讓錯(cuò)誤直接拋到控制臺(tái)導(dǎo)致頁(yè)面功能中斷。try { const data JSON.parse(str); console.log(data); } catch (e) { console.log(解析失敗包含非法數(shù)據(jù)); }不要用裸catch (e) {}吞掉所有異常而不做任何處理這樣會(huì)讓問(wèn)題徹底失去線索。至少應(yīng)該把錯(cuò)誤信息記錄到控制臺(tái)或者上報(bào)到監(jiān)控系統(tǒng)。錯(cuò)誤現(xiàn)象常見(jiàn)原因檢查方式頁(yè)面按鈕點(diǎn)擊沒(méi)反應(yīng)事件回調(diào)函數(shù)未綁定成功控制臺(tái)是否有報(bào)錯(cuò)代碼中元素 id 是否寫錯(cuò)變量 is not defined變量名拼寫錯(cuò)誤或作用域外訪問(wèn)檢查聲明位置和作用域無(wú)法讀取 null 的屬性獲取元素失敗或異步數(shù)據(jù)未返回時(shí)提前訪問(wèn)打印元素是否為 null檢查異步流程JSON.parse 報(bào)錯(cuò)服務(wù)端返回了非 JSON 數(shù)據(jù)Network 面板查看響應(yīng)體fetch 不觸發(fā) then 只觸發(fā) catch網(wǎng)絡(luò)不可達(dá)、服務(wù)器 500、CORS 跨域限制查看控制臺(tái)完整錯(cuò)誤和 Network 請(qǐng)求狀態(tài)8.4 瀏覽器控制臺(tái)的高級(jí)用法除了console.log控制臺(tái)還有幾個(gè)常用方法console.log(普通日志); console.warn(警告信息); console.error(錯(cuò)誤信息); console.table([{ name: a }, { name: b }]); // 表格形式輸出排查循環(huán)或復(fù)雜對(duì)象時(shí)console.table比console.log更直觀。調(diào)試時(shí)建議使用瀏覽器 Sources 面板打斷點(diǎn)逐步執(zhí)行代碼查看每行代碼執(zhí)行后變量的值這比不斷加console.log更高效。9. 零基礎(chǔ)學(xué)習(xí)路線從語(yǔ)法到小項(xiàng)目該怎么練9.1 建議的學(xué)習(xí)順序?qū)W習(xí) JavaScript 切忌一上來(lái)就翻完整本語(yǔ)法書(shū)。推薦按下面的順序推進(jìn)變量、數(shù)據(jù)類型、運(yùn)算符。條件判斷和循環(huán)。函數(shù)聲明、調(diào)用、參數(shù)、返回值。數(shù)組和對(duì)象的基本操作。DOM 獲取元素和事件監(jiān)聽(tīng)。異步基礎(chǔ)fetch 請(qǐng)求和 Promise 初步。小項(xiàng)目實(shí)戰(zhàn)待辦事項(xiàng)、圖片輪播、表單校驗(yàn)。再回頭深入學(xué)習(xí)閉包、原型、this 指向等進(jìn)階內(nèi)容。先跑通一條線頁(yè)面加載 → 用戶點(diǎn)擊 → 數(shù)據(jù)變化 → 頁(yè)面更新。這條線跑通后再把每個(gè)環(huán)節(jié)往深里鉆。9.2 刻意練習(xí)清單每學(xué)完一個(gè)階段可以按這個(gè)清單自測(cè)能用let、const正確聲明變量并說(shuō)清楚兩者區(qū)別。能寫出函數(shù)聲明、函數(shù)表達(dá)式、箭頭函數(shù)三種形式并知道箭頭函數(shù)的簡(jiǎn)單用法。能使用map、filter、forEach處理數(shù)組。能獲取頁(yè)面元素綁定點(diǎn)擊事件修改文本內(nèi)容和樣式。能使用fetch發(fā)起 GET 和 POST 請(qǐng)求并用try...catch捕獲異常。能讀懂控制臺(tái)報(bào)錯(cuò)中的錯(cuò)誤類型、文件名和行號(hào)。能使用JSON.stringify和JSON.parse完成對(duì)象與字符串轉(zhuǎn)換。能獨(dú)立完成一個(gè)包含輸入、按鈕、列表渲染的待辦事項(xiàng)小頁(yè)面。9.3 學(xué)習(xí)環(huán)境與生產(chǎn)環(huán)境的差異在學(xué)習(xí)階段代碼寫在 HTML 頁(yè)面里雙擊打開(kāi)就能運(yùn)行。但實(shí)際生產(chǎn)項(xiàng)目通常使用前端工程化和構(gòu)建工具兩者有明顯區(qū)別項(xiàng)目學(xué)習(xí)環(huán)境生產(chǎn)環(huán)境代碼組織HTML 內(nèi)嵌或單文件模塊化拆分多文件依賴管理無(wú)npm、pnpm 等包管理工具瀏覽器兼容最新瀏覽器需要結(jié)合兼容性要求錯(cuò)誤監(jiān)控瀏覽器控制臺(tái)日志上報(bào)、錯(cuò)誤監(jiān)控平臺(tái)代碼質(zhì)量能運(yùn)行即可代碼規(guī)范、單元測(cè)試、構(gòu)建檢查資源加載本地文件CDN 部署、打包壓縮、緩存策略初學(xué)階段不需要刻意追求工程化但要知道這些差異避免把“雙擊打開(kāi)網(wǎng)頁(yè)能跑”等價(jià)于“能交付生產(chǎn)項(xiàng)目”。等到能獨(dú)立完成交互小項(xiàng)目后再開(kāi)始學(xué)習(xí) Node.js、npm、Vue 或 React 等框架逐步進(jìn)入現(xiàn)代化前端開(kāi)發(fā)。9.4 學(xué)習(xí)中最容易放棄的三個(gè)節(jié)點(diǎn)第一個(gè)節(jié)點(diǎn)是數(shù)組的map、filter、reduce。這些方法不像循環(huán)那么直觀理解它們的關(guān)鍵是接受“函數(shù)作為參數(shù)”的思維方式先照著寫寫多了就自然理解。第二個(gè)節(jié)點(diǎn)是異步和回調(diào)。很多人看到Promise、async/await會(huì)卡住建議把異步概念拉回日常生活點(diǎn)外賣以后不需要一直等可以同時(shí)做別的事外賣送達(dá)后再去取。async/await就是把“取外賣”這個(gè)動(dòng)作變成同步寫法不需要嵌套回調(diào)。第三個(gè)節(jié)點(diǎn)是this指向。這個(gè)知識(shí)點(diǎn)確實(shí)容易繞暈但它并不影響你寫大部分業(yè)務(wù)代碼。初學(xué)階段先用箭頭函數(shù)規(guī)避常見(jiàn)問(wèn)題等對(duì)函數(shù)和作用域理解更深后再集中攻克。JavaScript 的語(yǔ)法其實(shí)不復(fù)雜難的是把零散 API 組合起來(lái)解決真實(shí)問(wèn)題。這條學(xué)習(xí)路徑的核心判斷是先建立“怎么運(yùn)行、怎么編程、怎么排錯(cuò)”的最小閉環(huán)再不斷地把新語(yǔ)法和 API 加入這個(gè)閉環(huán)。前端開(kāi)發(fā)真正需要的不是記住所有 API而是面對(duì)未知問(wèn)題時(shí)知道去哪里查、怎么驗(yàn)證、怎么修復(fù)這套能力會(huì)伴隨整個(gè)開(kāi)發(fā)生涯。 零基礎(chǔ)學(xué)JavaScript：從運(yùn)行環(huán)境、DOM操作到網(wǎng)絡(luò)請(qǐng)求與調(diào)試
在實(shí)際的 Web 前端開(kāi)發(fā)中JavaScript 不是一門“可選”語(yǔ)言而是頁(yè)面交互、數(shù)據(jù)處理、網(wǎng)絡(luò)請(qǐng)求和前端框架的基礎(chǔ)。很多零基礎(chǔ)的初學(xué)者在看完一遍語(yǔ)法文檔后仍然不知道代碼該寫在哪里、怎么運(yùn)行、報(bào)錯(cuò)怎么看、函數(shù)和對(duì)象到底解決什么問(wèn)題。這篇文章會(huì)從零開(kāi)始把 JavaScript 的語(yǔ)法主線、運(yùn)行方式、DOM 操作、網(wǎng)絡(luò)請(qǐng)求和排錯(cuò)思路串起來(lái)重點(diǎn)放在“為什么這樣寫”和“報(bào)錯(cuò)之后怎么查”上。文章適合完全沒(méi)有編程基礎(chǔ)、剛接觸 Web 前端的初學(xué)者也適合已經(jīng)寫過(guò) HTML 和 CSS、但還沒(méi)有系統(tǒng)學(xué)過(guò) JavaScript 的讀者。學(xué)完之后你會(huì)知道如何搭建最小運(yùn)行環(huán)境、理解變量、函數(shù)、對(duì)象、數(shù)組和事件的核心用法并能獨(dú)立排查常見(jiàn)的 JavaScript 報(bào)錯(cuò)。1. 先搞清楚 JavaScript 到底是什么才能開(kāi)始學(xué)1.1 網(wǎng)頁(yè)三件套中 JavaScript 負(fù)責(zé)什么構(gòu)建一個(gè)網(wǎng)頁(yè)通常用三門語(yǔ)言它們的分工完全不同HTML 負(fù)責(zé)頁(yè)面結(jié)構(gòu)相當(dāng)于房子的承重墻和房間布局。CSS 負(fù)責(zé)頁(yè)面樣式相當(dāng)于墻面顏色、家具擺放和整體裝修。JavaScript 負(fù)責(zé)頁(yè)面行為相當(dāng)于房子里的電路、水管和智能開(kāi)關(guān)用戶點(diǎn)擊按鈕、輸入文字、發(fā)起請(qǐng)求、數(shù)據(jù)變化后的刷新都靠 JavaScript 驅(qū)動(dòng)。如果一個(gè) HTML 頁(yè)面沒(méi)有任何 JavaScript它只能展示靜態(tài)信息用戶點(diǎn)擊按鈕不會(huì)有任何反應(yīng)表單數(shù)據(jù)也無(wú)法交給服務(wù)器處理。JavaScript 的價(jià)值就是讓頁(yè)面“動(dòng)”起來(lái)。這里需要補(bǔ)充一個(gè)容易混淆的點(diǎn)JavaScript 雖然在名字里有“Java”但它和 Java 語(yǔ)言沒(méi)有直接關(guān)系。JavaScript 最初由 Netscape 公司設(shè)計(jì)取名時(shí)借用了 Java 的熱度但兩者的語(yǔ)法、運(yùn)行機(jī)制和應(yīng)用場(chǎng)景完全不同。初學(xué)階段完全不需要把 Java 和 JavaScript 放在一起比較先掌握 JavaScript 本身即可。1.2 JavaScript 在哪里運(yùn)行JavaScript 主要有兩個(gè)運(yùn)行環(huán)境瀏覽器環(huán)境。這是 Web 前端最常用的環(huán)境JavaScript 代碼通過(guò)script標(biāo)簽嵌入 HTML 頁(yè)面由瀏覽器內(nèi)置的 JavaScript 引擎解析執(zhí)行。瀏覽器環(huán)境提供了 DOM、BOM、事件、網(wǎng)絡(luò)請(qǐng)求等 Web API。Node.js 環(huán)境。這是一個(gè)脫離瀏覽器的 JavaScript 運(yùn)行環(huán)境主要用于開(kāi)發(fā)后端服務(wù)、命令行工具和前端構(gòu)建工具。初學(xué)者可以先不接觸 Node.js先把瀏覽器環(huán)境跑通。在瀏覽器里運(yùn)行 JavaScript 不需要安裝額外軟件也不需要單獨(dú)配置環(huán)境。只要有一個(gè)現(xiàn)代瀏覽器按 F12 打開(kāi)開(kāi)發(fā)者工具點(diǎn)擊 Console控制臺(tái)面板就可以直接輸入并執(zhí)行 JavaScript 代碼。這也是學(xué)習(xí)階段最輕量的運(yùn)行方式。1.3 JavaScript 的核心組成一個(gè)完整的 JavaScript 學(xué)習(xí)體系包含三塊內(nèi)容組成說(shuō)明典型內(nèi)容ECMAScript語(yǔ)言核心規(guī)范描述語(yǔ)法和基礎(chǔ)對(duì)象變量、數(shù)據(jù)類型、運(yùn)算符、流程控制、函數(shù)、對(duì)象、數(shù)組、類DOM文檔對(duì)象模型操作網(wǎng)頁(yè)元素的接口獲取元素、修改內(nèi)容、綁定事件、操作樣式BOM瀏覽器對(duì)象模型操作瀏覽器的接口window、location、history、alert、setTimeout新手學(xué)習(xí)時(shí)要分清這三者的邊界。比如console.log是瀏覽器控制臺(tái)對(duì)象提供的方法document.getElementById是 DOM 提供的方法setTimeout是瀏覽器提供的定時(shí)器。它們都叫“JavaScript API”但歸屬不同理解這個(gè)結(jié)構(gòu)對(duì)后面排查問(wèn)題很有幫助。2. 搭建最小開(kāi)發(fā)環(huán)境先讓代碼跑起來(lái)2.1 用瀏覽器控制臺(tái)做第一行代碼實(shí)驗(yàn)打開(kāi) Chrome 或 Edge 瀏覽器按 F12 打開(kāi)開(kāi)發(fā)者工具切換到 Console 面板在提示符后面輸入console.log(hello world);按回車后會(huì)在控制臺(tái)輸出hello world。這是最簡(jiǎn)單的 JavaScript 運(yùn)行驗(yàn)證。瀏覽器控制臺(tái)適合測(cè)試零散語(yǔ)法但它不保存代碼刷新頁(yè)面后內(nèi)容就會(huì)丟失。真正寫項(xiàng)目時(shí)需要把 JavaScript 代碼寫到.js文件或者 HTML 的script標(biāo)簽中。2.2 一個(gè)最小的 HTML 頁(yè)面加上 JavaScript在本地新建一個(gè)文件夾創(chuàng)建demo.html文件寫入以下內(nèi)容!DOCTYPE html html langzh-CN head meta charsetUTF-8 titleJavaScript 入門/title /head body h1 idtitleHello/h1 button idbtn點(diǎn)擊我/button script const title document.getElementById(title); const btn document.getElementById(btn); btn.addEventListener(click, function () { title.textContent 你點(diǎn)擊了按鈕; console.log(按鈕被點(diǎn)擊了); }); /script /body /html用瀏覽器打開(kāi)這個(gè)文件點(diǎn)擊頁(yè)面上的按鈕標(biāo)題文字會(huì)從Hello變成你點(diǎn)擊了按鈕同時(shí)控制臺(tái)輸出一條日志。這段代碼里包含了初學(xué)者需要理解的三件事document.getElementById是獲取頁(yè)面元素的方法。addEventListener(click, callback)是給元素綁定點(diǎn)擊事件的方法第二個(gè)參數(shù)是一個(gè)函數(shù)。textContent是讀取或修改元素文本內(nèi)容的屬性。不需要立刻記住全部 API但要理解 JavaScript 和頁(yè)面交互的基本鏈路獲取元素 → 綁定事件 → 修改內(nèi)容。2.3 外部 JS 文件的引入方式當(dāng)代碼量變大時(shí)不應(yīng)該把所有 JavaScript 寫在 HTML 文件內(nèi)部而應(yīng)該單獨(dú)創(chuàng)建.js文件再通過(guò)script標(biāo)簽引入。創(chuàng)建app.jsconsole.log(app.js 文件已加載);在 HTML 中引入script srcapp.js/script需要強(qiáng)調(diào)的是script標(biāo)簽的位置會(huì)影響代碼執(zhí)行順序。如果腳本放在body底部頁(yè)面 DOM 已經(jīng)解析完成可以直接操作元素如果放在head中腳本執(zhí)行時(shí) body 中的元素還沒(méi)有被解析直接獲取元素會(huì)得到null。初學(xué)階段推薦把外部腳本放在/body之前減少這類問(wèn)題。3. 變量和數(shù)據(jù)類型是后面所有內(nèi)容的地基3.1 聲明變量的三種方式JavaScript 中聲明變量有三種關(guān)鍵字var、let、const。var a 10; let b 20; const c 30;初學(xué)階段需要掌握它們的核心差異關(guān)鍵字是否能重新賦值作用域建議var可以函數(shù)作用域盡量不用let可以塊級(jí)作用域推薦用于會(huì)變化的變量const不可以重新賦值塊級(jí)作用域推薦用于不會(huì)變化的變量這里的“作用域”可以簡(jiǎn)單理解成變量能被訪問(wèn)的范圍。let和const是塊級(jí)作用域意思是在一對(duì)花括號(hào){}內(nèi)部聲明的變量只能在這個(gè)塊內(nèi)部使用。var是函數(shù)作用域行為更寬松容易造成變量污染這也是現(xiàn)代開(kāi)發(fā)中推薦使用let和const的原因。需要特別注意的是const不能重新賦值但數(shù)組和對(duì)象內(nèi)部的元素可以修改。因?yàn)閏onst限制的是“變量指向的地址”而不是地址里存的內(nèi)容。const arr [1, 2, 3]; arr.push(4); // 正確數(shù)組本身可以修改 console.log(arr); // [1, 2, 3, 4] // arr [5, 6, 7]; // 錯(cuò)誤不能重新賦值3.2 基本數(shù)據(jù)類型JavaScript 中常用的基礎(chǔ)數(shù)據(jù)類型包括number數(shù)值類型包含整數(shù)和浮點(diǎn)數(shù)。string字符串類型用單引號(hào)、雙引號(hào)或反引號(hào)包裹。boolean布爾類型只有true和false兩個(gè)值。undefined未定義類型變量聲明了但沒(méi)有賦值。null空值表示人為設(shè)置為空。object對(duì)象類型包括普通對(duì)象、數(shù)組、函數(shù)等。使用typeof可以查看一個(gè)變量的類型console.log(typeof 10); // number console.log(typeof hello); // string console.log(typeof true); // boolean console.log(typeof undefined); // undefined console.log(typeof null); // object歷史遺留行為 console.log(typeof {}); // object這里有一個(gè)經(jīng)典的知識(shí)點(diǎn)typeof null返回的是object這是 JavaScript 最初設(shè)計(jì)時(shí)留下來(lái)的行為雖然在邏輯上 null 是一個(gè)空值但 typeof 的結(jié)果會(huì)誤導(dǎo)初學(xué)者。實(shí)際開(kāi)發(fā)中判斷變量是否為 null一般直接比較if (value null) { console.log(value 是 null); }3.3 類型轉(zhuǎn)換是新手最容易踩坑的地方JavaScript 是動(dòng)態(tài)類型語(yǔ)言變量在運(yùn)行過(guò)程中可以自動(dòng)轉(zhuǎn)換類型這種隱式轉(zhuǎn)換經(jīng)常導(dǎo)致預(yù)期之外的結(jié)果。典型例子是字符串拼接console.log(1 1); // 11 console.log(1 - 1); // 0 console.log(5 * 2); // 10操作符在遇到字符串時(shí)會(huì)做拼接所以1 1得到字符串11。而-、*、/會(huì)嘗試把字符串轉(zhuǎn)成數(shù)值所以1 - 1得到0。這種不一致會(huì)讓新手覺(jué)得“JavaScript 很奇怪”實(shí)際上它遵循的是“加號(hào)遇字符串變拼接其他運(yùn)算符盡量轉(zhuǎn)數(shù)值”的規(guī)則。為了避免隱式轉(zhuǎn)換帶來(lái)問(wèn)題推薦使用嚴(yán)格相等運(yùn)算符而不是console.log(1 1); // true會(huì)發(fā)生類型轉(zhuǎn)換 console.log(1 1); // false類型不同直接不等初學(xué)階段養(yǎng)成使用的習(xí)慣能少踩很多坑。3.4 模板字符串拼接字符串時(shí)使用加號(hào)的寫法可讀性較差const name 張三; const age 20; console.log(我的名字是 name 今年 age 歲);使用反引號(hào)模板字符串可以這樣寫console.log(我的名字是${name}今年${age}歲);模板字符串里用${}包裹表達(dá)式JavaScript 會(huì)自動(dòng)計(jì)算并插入結(jié)果這種方式更簡(jiǎn)潔也支持換行是開(kāi)發(fā)中的推薦寫法。4. 函數(shù)JavaScript 中的核心抽象方式4.1 三種函數(shù)寫法函數(shù)的作用是把一段可重復(fù)執(zhí)行的邏輯封裝起來(lái)避免代碼重復(fù)。JavaScript 中有三種常見(jiàn)寫法// 函數(shù)聲明 function add(a, b) { return a b; } // 函數(shù)表達(dá)式 const subtract function (a, b) { return a - b; }; // 箭頭函數(shù) const multiply (a, b) { return a * b; }; console.log(add(1, 2)); // 3 console.log(subtract(5, 2)); // 3 console.log(multiply(3, 4)); // 12函數(shù)聲明和函數(shù)表達(dá)式的區(qū)別在于“提升”機(jī)制。函數(shù)聲明可以在定義之前調(diào)用函數(shù)表達(dá)式不行。箭頭函數(shù)是 ES6 引入的寫法語(yǔ)法更簡(jiǎn)潔但它和普通函數(shù)在this的指向上有區(qū)別初學(xué)階段先掌握基本用法即可等學(xué)到對(duì)象和事件時(shí)再深入理解this。4.2 參數(shù)和默認(rèn)值函數(shù)參數(shù)可以有默認(rèn)值function greet(name 陌生人) { console.log(你好${name}); } greet(); // 你好陌生人 greet(小明); // 你好小明當(dāng)調(diào)用函數(shù)時(shí)沒(méi)有傳入對(duì)應(yīng)參數(shù)參數(shù)的值就是undefined此時(shí)默認(rèn)值會(huì)生效。函數(shù)內(nèi)部還可以通過(guò)arguments對(duì)象訪問(wèn)所有傳入的參數(shù)但箭頭函數(shù)沒(méi)有自己的arguments?，F(xiàn)代開(kāi)發(fā)中更推薦使用剩余參數(shù)function sum(...numbers) { return numbers.reduce((total, current) total current, 0); } console.log(sum(1, 2, 3, 4)); // 10...numbers會(huì)把所有傳入?yún)?shù)收集成一個(gè)數(shù)組然后對(duì)數(shù)組做累加。reduce是數(shù)組的歸并方法它接收一個(gè)回調(diào)函數(shù)和初始值回調(diào)函數(shù)第一個(gè)參數(shù)是累積結(jié)果第二個(gè)參數(shù)是當(dāng)前元素。4.3 什么是回調(diào)函數(shù)回調(diào)函數(shù)就是把一個(gè)函數(shù)作為參數(shù)傳給另一個(gè)函數(shù)另一個(gè)函數(shù)在合適的時(shí)機(jī)調(diào)用它。瀏覽器事件監(jiān)聽(tīng)就是典型的回調(diào)場(chǎng)景const btn document.getElementById(btn); btn.addEventListener(click, function () { console.log(點(diǎn)擊事件觸發(fā)了); });這個(gè)匿名函數(shù)就是回調(diào)函數(shù)它不會(huì)在定義時(shí)立即執(zhí)行而是等用戶點(diǎn)擊按鈕后由瀏覽器調(diào)用。理解回調(diào)函數(shù)的關(guān)鍵是當(dāng)你把函數(shù)作為參數(shù)傳遞時(shí)不要加括號(hào)。加括號(hào)表示立即執(zhí)行不加括號(hào)表示把函數(shù)本身交給別人去調(diào)用。4.4 作用域和閉包入門作用域決定了變量可以訪問(wèn)的范圍。JavaScript 采用詞法作用域意味著函數(shù)內(nèi)可以訪問(wèn)函數(shù)外部的變量但反過(guò)來(lái)不行。let score 100; function showScore() { console.log(score); // 可以訪問(wèn)外部變量 } showScore(); // 100閉包是一個(gè)稍難理解的概念它指的是一個(gè)函數(shù)“記住”了定義它時(shí)的作用域即使這個(gè)函數(shù)在別處被調(diào)用仍然可以訪問(wèn)原來(lái)作用域中的變量。function createCounter() { let count 0; return function () { count; return count; }; } const counter createCounter(); console.log(counter()); // 1 console.log(counter()); // 2在這里內(nèi)部匿名函數(shù)被返回后仍然持有count變量的訪問(wèn)權(quán)所以多次調(diào)用counter時(shí)count會(huì)持續(xù)累加。初學(xué)階段不需要把閉包用得很熟練但要理解“函數(shù)自帶記憶環(huán)境”這個(gè)現(xiàn)象后面學(xué)習(xí)模塊化和框架時(shí)會(huì)經(jīng)常遇到。5. 對(duì)象和數(shù)組操作數(shù)據(jù)的日常工具5.1 對(duì)象的基本用法對(duì)象用來(lái)描述一組相關(guān)的屬性。普通對(duì)象用花括號(hào)定義const user { name: 張三, age: 20, isAdmin: false }; // 讀取屬性 console.log(user.name); console.log(user[age]); // 修改屬性 user.age 21; // 新增屬性 user.email zhangsanexample.com; // 刪除屬性 delete user.isAdmin; console.log(user);點(diǎn)語(yǔ)法適合屬性名符合標(biāo)識(shí)符規(guī)則的情況方括號(hào)語(yǔ)法適合屬性名包含特殊字符或需要?jiǎng)討B(tài)計(jì)算屬性名的情況。5.2 數(shù)組的增刪改查數(shù)組用方括號(hào)定義下標(biāo)從 0 開(kāi)始const fruits [apple, banana, orange]; // 讀取 console.log(fruits[0]); // apple // 尾部添加 fruits.push(grape); // 尾部刪除 fruits.pop(); // 頭部添加 fruits.unshift(pear); // 頭部刪除 fruits.shift(); // 查找元素位置 console.log(fruits.indexOf(banana)); // 1 // 截取 const sliced fruits.slice(1, 2);需要注意slice不會(huì)修改原數(shù)組splice才會(huì)修改原數(shù)組。這種“是否修改原數(shù)組”的差異在開(kāi)發(fā)中經(jīng)常引起問(wèn)題建議用到某個(gè)方法時(shí)先查文檔確認(rèn)。5.3 常用迭代方法forEach、map、filter、reduce數(shù)組的迭代方法能極大簡(jiǎn)化數(shù)據(jù)處理代碼。forEach用于遍歷數(shù)組沒(méi)有返回值const arr [1, 2, 3]; arr.forEach((item, index) { console.log(${index}: ${item}); });map用于把原數(shù)組映射成新數(shù)組返回的是新數(shù)組不會(huì)修改原數(shù)組const numbers [1, 2, 3]; const doubled numbers.map((item) item * 2); console.log(doubled); // [2, 4, 6]filter用于篩選符合條件的元素得到新數(shù)組const numbers [1, 2, 3, 4, 5]; const even numbers.filter((item) item % 2 0); console.log(even); // [2, 4]reduce用于把數(shù)組歸并成單個(gè)值const numbers [1, 2, 3, 4]; const total numbers.reduce((sum, item) sum item, 0); console.log(total); // 10這些方法的共同點(diǎn)是接收一個(gè)回調(diào)函數(shù)回調(diào)函數(shù)根據(jù)場(chǎng)景決定接收的參數(shù)。初學(xué)階段建議每個(gè)方法都親手寫一遍不要只是看示例。5.4 JSON 與對(duì)象的轉(zhuǎn)換前端和后端的數(shù)據(jù)交換通常使用 JSON 格式。JavaScript 提供了兩個(gè)方法const user { name: 張三, age: 20 }; // 對(duì)象轉(zhuǎn) JSON 字符串 const jsonString JSON.stringify(user); console.log(jsonString); // {name:張三,age:20} // JSON 字符串轉(zhuǎn)對(duì)象 const parsed JSON.parse(jsonString); console.log(parsed.name); // 張三JSON.stringify和JSON.parse在前后端聯(lián)調(diào)時(shí)非常常用。解析 JSON 時(shí)如果字符串格式不正確JSON.parse會(huì)拋出異常實(shí)際項(xiàng)目中要用try...catch包裹避免解析失敗導(dǎo)致整個(gè)腳本崩潰。const invalidData {name: 張三}; try { const result JSON.parse(invalidData); console.log(result); } catch (e) { console.log(JSON 解析失敗, e.message); }注意 JSON 里的字符串必須使用雙引號(hào)屬性名也必須加雙引號(hào)不能寫單引號(hào)。6. DOM 操作讓 JavaScript 和頁(yè)面真正聯(lián)動(dòng)6.1 DOM 是什么DOMDocument Object Model是瀏覽器把 HTML 文檔解析成的樹(shù)形結(jié)構(gòu)。每一個(gè)標(biāo)簽、屬性、文本都是樹(shù)上的節(jié)點(diǎn)。JavaScript 通過(guò) DOM 接口讀取和修改這些節(jié)點(diǎn)從而實(shí)現(xiàn)頁(yè)面內(nèi)容的動(dòng)態(tài)變化?？梢杂靡粋€(gè)簡(jiǎn)單的比喻理解HTML 是房子的圖紙瀏覽器按照?qǐng)D紙蓋好房子DOM 就是房子里的一套開(kāi)關(guān)和插座系統(tǒng)JavaScript 通過(guò)操作開(kāi)關(guān)來(lái)改變房間的狀態(tài)。6.2 獲取頁(yè)面元素常用方法有三種// 根據(jù) id 獲取單個(gè)元素 const title document.getElementById(title); // 根據(jù)選擇器獲取第一個(gè)匹配元素 const firstBtn document.querySelector(.btn); // 根據(jù)選擇器獲取所有匹配元素返回 NodeList const allBtns document.querySelectorAll(.btn);querySelector和querySelectorAll的參數(shù)字符串是 CSS 選擇器所以.class、#id、tag、父子選擇器都可以使用。getElementById只能按 id 查但性能更好。業(yè)務(wù)代碼中兩種方式都會(huì)用到?jīng)]有絕對(duì)優(yōu)劣。6.3 事件監(jiān)聽(tīng)頁(yè)面交互的核心是事件。常用事件有click、input、change、mouseover、keydown等。const input document.getElementById(username); const tip document.getElementById(tip); input.addEventListener(input, function () { const value input.value; if (value.length 3) { tip.textContent 用戶名至少 3 個(gè)字符; tip.style.color red; } else { tip.textContent 用戶名可用; tip.style.color green; } });這個(gè)例子實(shí)現(xiàn)了輸入框字符長(zhǎng)度校驗(yàn)。input事件會(huì)在每次輸入時(shí)觸發(fā)它比change事件更實(shí)時(shí)。生產(chǎn)環(huán)境下校驗(yàn)邏輯通常更復(fù)雜需要同時(shí)考慮規(guī)則、提示文案和防抖但核心的事件綁定機(jī)制是一樣的。6.4 修改樣式和類名修改元素樣式有兩種推薦方式方式一直接修改部分樣式屬性const box document.getElementById(box); box.style.backgroundColor blue; box.style.padding 10px;方式二切換類名把樣式邏輯集中在 CSS 文件里const box document.getElementById(box); box.classList.add(active); box.classList.remove(hidden); box.classList.toggle(selected);推薦優(yōu)先使用類名切換因?yàn)闃邮郊泄芾砗蟾菀拙S護(hù)。直接操作style適合臨時(shí)、動(dòng)態(tài)、簡(jiǎn)單的樣式調(diào)整。7. 網(wǎng)絡(luò)請(qǐng)求用 fetch 與后端交互7.1 前端為什么要發(fā)起網(wǎng)絡(luò)請(qǐng)求頁(yè)面中的數(shù)據(jù)不可能全部寫死在代碼里。登錄用戶信息、商品列表、訂單狀態(tài)這些數(shù)據(jù)通常存儲(chǔ)在服務(wù)器數(shù)據(jù)庫(kù)中前端需要通過(guò) HTTP 請(qǐng)求獲取或提交。早期前端使用 XMLHttpRequest 發(fā)請(qǐng)求代碼比較繁瑣?，F(xiàn)代瀏覽器提供了fetchAPI語(yǔ)法更簡(jiǎn)潔基于 Promise 設(shè)計(jì)。7.2 fetch 的基本用法一個(gè)最簡(jiǎn)單的 GET 請(qǐng)求fetch(https://api.example.com/users) .then((response) response.json()) .then((data) { console.log(data); }) .catch((error) { console.log(請(qǐng)求失敗, error); });fetch返回一個(gè) Promise第一次then拿到的是響應(yīng)對(duì)象需要調(diào)用.json()把響應(yīng)體解析成 JavaScript 對(duì)象第二次then拿到的是真正解析后的數(shù)據(jù)。如果網(wǎng)絡(luò)異?；蚍?wù)器無(wú)響應(yīng)會(huì)進(jìn)入catch。使用 async/await 可以讓異步代碼讀起來(lái)更像同步代碼async function loadUsers() { try { const response await fetch(https://api.example.com/users); const data await response.json(); console.log(data); } catch (error) { console.log(請(qǐng)求失敗, error); } } loadUsers();await只能在async函數(shù)內(nèi)部使用。它表示等待一個(gè) Promise 完成然后取出其結(jié)果。用try...catch捕獲錯(cuò)誤是推薦寫法。7.3 發(fā)送 POST 請(qǐng)求向服務(wù)器提交數(shù)據(jù)時(shí)通常使用 POST 方法并設(shè)置請(qǐng)求頭和請(qǐng)求體async function createUser() { const url https://api.example.com/users; const options { method: POST, headers: { Content-Type: application/json }, body: JSON.stringify({ name: 張三, age: 20 }) }; try { const response await fetch(url, options); const result await response.json(); console.log(result); } catch (error) { console.log(提交失敗, error); } }這里最容易踩的坑是請(qǐng)求頭設(shè)置。如果Content-Type設(shè)置為application/json那么body必須使用JSON.stringify轉(zhuǎn)成字符串如果body直接傳 JavaScript 對(duì)象接口大概率會(huì)解析失敗。學(xué)習(xí)階段建議對(duì)比以下三種情況Content-Typebody 格式application/jsonJSON.stringify({ ... })不設(shè)置或使用表單格式new URLSearchParams({ ... })文件上傳FormData對(duì)象8. JavaScript 報(bào)錯(cuò)怎么看從現(xiàn)象到原因的一條排查鏈路8.1 先分清三類常見(jiàn)錯(cuò)誤新手在控制臺(tái)看到的報(bào)錯(cuò)千變?nèi)f化但多數(shù)可以歸為三類語(yǔ)法錯(cuò)誤SyntaxError語(yǔ)法錯(cuò)誤表示代碼沒(méi)有按照 JavaScript 語(yǔ)法規(guī)則書(shū)寫腳本在解析階段就失敗不會(huì)繼續(xù)執(zhí)行。const a 1; // 正確的是 const a 1;常見(jiàn)原因包括少寫了分號(hào)、括號(hào)不匹配、字符串引號(hào)沒(méi)閉合、函數(shù)名拼寫錯(cuò)誤。引用錯(cuò)誤ReferenceError引用錯(cuò)誤表示使用了一個(gè)不存在的變量或函數(shù)最常見(jiàn)的是變量名拼寫錯(cuò)誤、變量在作用域外被訪問(wèn)、使用前忘了聲明。console.log(username); // ReferenceError: username is not defined類型錯(cuò)誤TypeError類型錯(cuò)誤表示變量的類型不支持當(dāng)前操作常見(jiàn)場(chǎng)景是對(duì)null或undefined調(diào)用屬性或方法。const obj null; console.log(obj.name); // TypeError: Cannot read properties of null (reading name)這類報(bào)錯(cuò)在操作 DOM 時(shí)非常常見(jiàn)本質(zhì)是獲取元素失敗拿到的是null卻仍然去訪問(wèn)它的屬性。8.2 報(bào)錯(cuò)排查的標(biāo)準(zhǔn)順序遇到控制臺(tái)報(bào)錯(cuò)時(shí)建議按以下順序排查讀報(bào)錯(cuò)信息的第一行確認(rèn)錯(cuò)誤類型和錯(cuò)誤描述?？磮?bào)錯(cuò)位置的堆棧信息一般會(huì)顯示文件名、行號(hào)和列號(hào)。點(diǎn)擊堆棧中的文件鏈接直接跳轉(zhuǎn)到對(duì)應(yīng)的錯(cuò)誤行?；乜创a確認(rèn)變量是否已聲明、函數(shù)是否已定義、對(duì)象是否為 null。在報(bào)錯(cuò)之前加console.log打印關(guān)鍵變量確認(rèn)運(yùn)行到哪一步出問(wèn)題。如果是網(wǎng)絡(luò)請(qǐng)求報(bào)錯(cuò)切換到 Network 面板查看請(qǐng)求狀態(tài)碼和響應(yīng)體。8.3 使用 try...catch 處理可預(yù)期的異常對(duì)于可能失敗的代碼例如網(wǎng)絡(luò)請(qǐng)求、JSON 解析、文件讀取建議使用try...catch包裹而不是讓錯(cuò)誤直接拋到控制臺(tái)導(dǎo)致頁(yè)面功能中斷。try { const data JSON.parse(str); console.log(data); } catch (e) { console.log(解析失敗包含非法數(shù)據(jù)); }不要用裸catch (e) {}吞掉所有異常而不做任何處理這樣會(huì)讓問(wèn)題徹底失去線索。至少應(yīng)該把錯(cuò)誤信息記錄到控制臺(tái)或者上報(bào)到監(jiān)控系統(tǒng)。錯(cuò)誤現(xiàn)象常見(jiàn)原因檢查方式頁(yè)面按鈕點(diǎn)擊沒(méi)反應(yīng)事件回調(diào)函數(shù)未綁定成功控制臺(tái)是否有報(bào)錯(cuò)代碼中元素 id 是否寫錯(cuò)變量 is not defined變量名拼寫錯(cuò)誤或作用域外訪問(wèn)檢查聲明位置和作用域無(wú)法讀取 null 的屬性獲取元素失敗或異步數(shù)據(jù)未返回時(shí)提前訪問(wèn)打印元素是否為 null檢查異步流程JSON.parse 報(bào)錯(cuò)服務(wù)端返回了非 JSON 數(shù)據(jù)Network 面板查看響應(yīng)體fetch 不觸發(fā) then 只觸發(fā) catch網(wǎng)絡(luò)不可達(dá)、服務(wù)器 500、CORS 跨域限制查看控制臺(tái)完整錯(cuò)誤和 Network 請(qǐng)求狀態(tài)8.4 瀏覽器控制臺(tái)的高級(jí)用法除了console.log控制臺(tái)還有幾個(gè)常用方法console.log(普通日志); console.warn(警告信息); console.error(錯(cuò)誤信息); console.table([{ name: a }, { name: b }]); // 表格形式輸出排查循環(huán)或復(fù)雜對(duì)象時(shí)console.table比console.log更直觀。調(diào)試時(shí)建議使用瀏覽器 Sources 面板打斷點(diǎn)逐步執(zhí)行代碼查看每行代碼執(zhí)行后變量的值這比不斷加console.log更高效。9. 零基礎(chǔ)學(xué)習(xí)路線從語(yǔ)法到小項(xiàng)目該怎么練9.1 建議的學(xué)習(xí)順序?qū)W習(xí) JavaScript 切忌一上來(lái)就翻完整本語(yǔ)法書(shū)。推薦按下面的順序推進(jìn)變量、數(shù)據(jù)類型、運(yùn)算符。條件判斷和循環(huán)。函數(shù)聲明、調(diào)用、參數(shù)、返回值。數(shù)組和對(duì)象的基本操作。DOM 獲取元素和事件監(jiān)聽(tīng)。異步基礎(chǔ)fetch 請(qǐng)求和 Promise 初步。小項(xiàng)目實(shí)戰(zhàn)待辦事項(xiàng)、圖片輪播、表單校驗(yàn)。再回頭深入學(xué)習(xí)閉包、原型、this 指向等進(jìn)階內(nèi)容。先跑通一條線頁(yè)面加載 → 用戶點(diǎn)擊 → 數(shù)據(jù)變化 → 頁(yè)面更新。這條線跑通后再把每個(gè)環(huán)節(jié)往深里鉆。9.2 刻意練習(xí)清單每學(xué)完一個(gè)階段可以按這個(gè)清單自測(cè)能用let、const正確聲明變量并說(shuō)清楚兩者區(qū)別。能寫出函數(shù)聲明、函數(shù)表達(dá)式、箭頭函數(shù)三種形式并知道箭頭函數(shù)的簡(jiǎn)單用法。能使用map、filter、forEach處理數(shù)組。能獲取頁(yè)面元素綁定點(diǎn)擊事件修改文本內(nèi)容和樣式。能使用fetch發(fā)起 GET 和 POST 請(qǐng)求并用try...catch捕獲異常。能讀懂控制臺(tái)報(bào)錯(cuò)中的錯(cuò)誤類型、文件名和行號(hào)。能使用JSON.stringify和JSON.parse完成對(duì)象與字符串轉(zhuǎn)換。能獨(dú)立完成一個(gè)包含輸入、按鈕、列表渲染的待辦事項(xiàng)小頁(yè)面。9.3 學(xué)習(xí)環(huán)境與生產(chǎn)環(huán)境的差異在學(xué)習(xí)階段代碼寫在 HTML 頁(yè)面里雙擊打開(kāi)就能運(yùn)行。但實(shí)際生產(chǎn)項(xiàng)目通常使用前端工程化和構(gòu)建工具兩者有明顯區(qū)別項(xiàng)目學(xué)習(xí)環(huán)境生產(chǎn)環(huán)境代碼組織HTML 內(nèi)嵌或單文件模塊化拆分多文件依賴管理無(wú)npm、pnpm 等包管理工具瀏覽器兼容最新瀏覽器需要結(jié)合兼容性要求錯(cuò)誤監(jiān)控瀏覽器控制臺(tái)日志上報(bào)、錯(cuò)誤監(jiān)控平臺(tái)代碼質(zhì)量能運(yùn)行即可代碼規(guī)范、單元測(cè)試、構(gòu)建檢查資源加載本地文件CDN 部署、打包壓縮、緩存策略初學(xué)階段不需要刻意追求工程化但要知道這些差異避免把“雙擊打開(kāi)網(wǎng)頁(yè)能跑”等價(jià)于“能交付生產(chǎn)項(xiàng)目”。等到能獨(dú)立完成交互小項(xiàng)目后再開(kāi)始學(xué)習(xí) Node.js、npm、Vue 或 React 等框架逐步進(jìn)入現(xiàn)代化前端開(kāi)發(fā)。9.4 學(xué)習(xí)中最容易放棄的三個(gè)節(jié)點(diǎn)第一個(gè)節(jié)點(diǎn)是數(shù)組的map、filter、reduce。這些方法不像循環(huán)那么直觀理解它們的關(guān)鍵是接受“函數(shù)作為參數(shù)”的思維方式先照著寫寫多了就自然理解。第二個(gè)節(jié)點(diǎn)是異步和回調(diào)。很多人看到Promise、async/await會(huì)卡住建議把異步概念拉回日常生活點(diǎn)外賣以后不需要一直等可以同時(shí)做別的事外賣送達(dá)后再去取。async/await就是把“取外賣”這個(gè)動(dòng)作變成同步寫法不需要嵌套回調(diào)。第三個(gè)節(jié)點(diǎn)是this指向。這個(gè)知識(shí)點(diǎn)確實(shí)容易繞暈但它并不影響你寫大部分業(yè)務(wù)代碼。初學(xué)階段先用箭頭函數(shù)規(guī)避常見(jiàn)問(wèn)題等對(duì)函數(shù)和作用域理解更深后再集中攻克。JavaScript 的語(yǔ)法其實(shí)不復(fù)雜難的是把零散 API 組合起來(lái)解決真實(shí)問(wèn)題。這條學(xué)習(xí)路徑的核心判斷是先建立“怎么運(yùn)行、怎么編程、怎么排錯(cuò)”的最小閉環(huán)再不斷地把新語(yǔ)法和 API 加入這個(gè)閉環(huán)。前端開(kāi)發(fā)真正需要的不是記住所有 API而是面對(duì)未知問(wèn)題時(shí)知道去哪里查、怎么驗(yàn)證、怎么修復(fù)這套能力會(huì)伴隨整個(gè)開(kāi)發(fā)生涯。