語(yǔ)法核心筆記：變量、類型、函數(shù)與事件機(jī)制)
說實(shí)話JavaScript 基礎(chǔ)語(yǔ)法這門課我剛?cè)胄心菚?huì)兒是真沒當(dāng)回事覺得不就是寫個(gè)var、敲個(gè)function嘛能難到哪兒去。結(jié)果真正開始寫項(xiàng)目、接手別人的代碼、被線上 bug 追著跑的時(shí)候才發(fā)現(xiàn)當(dāng)初基礎(chǔ)沒摳透的賬全都在后面加倍還回來(lái)了。這份學(xué)習(xí)筆記算是我對(duì)自己這幾年 JavaScript 使用經(jīng)驗(yàn)的一次系統(tǒng)回爐。我不會(huì)把它寫成教科書式的語(yǔ)法清單而是把我在實(shí)際開發(fā)里反復(fù)踩過的坑、驗(yàn)證過的寫法、以及真正用得上的細(xì)節(jié)全部整理出來(lái)。內(nèi)容覆蓋變量聲明、數(shù)據(jù)類型判斷、運(yùn)算符與隱式轉(zhuǎn)換、函數(shù)、事件機(jī)制、報(bào)錯(cuò)調(diào)試這幾個(gè)最核心的模塊適合剛學(xué)完 HTML 和 CSS、準(zhǔn)備進(jìn)入 JavaScript 世界的初學(xué)者也適合寫過一陣子代碼但總覺得基礎(chǔ)不扎實(shí)、想回頭查漏補(bǔ)缺的同學(xué)。我盡量用大白話講清楚每個(gè)知識(shí)點(diǎn)背后的“為什么”再配上可以直接跑起來(lái)的代碼示例。這份筆記不追求面面俱到但凡是寫出來(lái)的都是你日常開發(fā)里高頻遇到的、繞不開的東西。1. 先說說這份學(xué)習(xí)筆記的定位和整體思路1.1 為什么要回頭整理基礎(chǔ)語(yǔ)法很多初學(xué)者會(huì)有個(gè)誤區(qū)覺得基礎(chǔ)語(yǔ)法就是背幾個(gè)關(guān)鍵字、記幾條規(guī)則隨便看一遍就算過了。但 JavaScript 這門語(yǔ)言有個(gè)特點(diǎn)它看起來(lái)跟 C、Java 長(zhǎng)得很像骨子里卻是完全不同的運(yùn)行邏輯。比如變量提升、隱式類型轉(zhuǎn)換、this的指向規(guī)則、事件冒泡這些概念光看語(yǔ)法是看不出來(lái)的必須放到實(shí)際執(zhí)行場(chǎng)景里去理解。我寫這份筆記的另一個(gè)直接原因是身邊陸續(xù)有同事問我一些“基礎(chǔ)問題”“為什么我用比較兩個(gè)值老出問題”“為什么這個(gè)this在函數(shù)里就變成 undefined 了”“為什么數(shù)組判斷類型用typeof不管用”。這些問題單獨(dú)看都是基礎(chǔ)語(yǔ)法里的細(xì)節(jié)但連起來(lái)就是一個(gè)完整的知識(shí)拼圖。與其每次幫人查一遍不如系統(tǒng)性地寫一份可以反復(fù)查閱的筆記也算是對(duì)自己知識(shí)體系的一次沉淀。1.2 基礎(chǔ)語(yǔ)法學(xué)習(xí)的整體路線JavaScript 基礎(chǔ)語(yǔ)法這塊我的建議是按照“變量與類型 → 運(yùn)算符與流程控制 → 函數(shù) → 對(duì)象與數(shù)組 → 事件與 DOM → 異步”這條主線去推進(jìn)而不是今天看一個(gè)知識(shí)點(diǎn)、明天看另一個(gè)。原因很簡(jiǎn)單后面的每一個(gè)環(huán)節(jié)都在依賴前面的概念。你連let和var的作用域都分不清后面寫循環(huán)、寫閉包、寫事件處理函數(shù)的時(shí)候一定會(huì)一頭霧水。這里我用一個(gè)表把我建議的學(xué)習(xí)順序和對(duì)應(yīng)要解決的問題列出來(lái)學(xué)習(xí)階段核心內(nèi)容需要搞懂的關(guān)鍵問題第一階段變量聲明、數(shù)據(jù)類型、類型判斷var/let/const 有什么區(qū)別、typeof 能判斷什么第二階段運(yùn)算符、流程控制、循環(huán)隱式轉(zhuǎn)換規(guī)則、與的差異、分支怎么組織第三階段函數(shù)、作用域、閉包函數(shù)表達(dá)式與聲明區(qū)別、this指向、參數(shù)處理第四階段數(shù)組與對(duì)象操作引用類型特性、常用方法、解構(gòu)賦值第五階段DOM 操作與事件事件綁定、事件流、事件委托第六階段異步與模塊化回調(diào)、Promise、async/await、模塊導(dǎo)入導(dǎo)出這份筆記對(duì)應(yīng)的是前三個(gè)階段的重點(diǎn)內(nèi)容后三個(gè)階段等我把異步那塊再單獨(dú)整理一份筆記出來(lái)。別貪多地基打牢了后面真的會(huì)快很多。2. 變量、數(shù)據(jù)類型與類型判斷翻車率最高的前三名2.1 var、let、const 到底怎么選三個(gè)聲明關(guān)鍵字是 JavaScript 給新手的第一關(guān)。我見過很多教程直接告訴你“能用const就用const其次let別用var”這個(gè)結(jié)論是對(duì)的但它背后的原理如果沒搞清楚以后還是會(huì)踩坑。先說var。它在 ES6 之前是唯一的變量聲明方式有兩個(gè)明顯的問題一是函數(shù)作用域沒有塊級(jí)作用域的概念二是變量提升聲明會(huì)被“提升”到作用域頂部但賦值還在原位。舉個(gè)我自己調(diào)試過的例子function testVar() { console.log(name); // undefined不是報(bào)錯(cuò) var name zhangsan; if (true) { var age 30; // var 沒有塊級(jí)作用域 } console.log(age); // 30外部也能訪問到 }這段代碼在別的語(yǔ)言里早就報(bào)錯(cuò)了但在 JavaScript 里能正常跑正是因?yàn)関ar的變量提升和函數(shù)級(jí)作用域。console.log(name)打印出 undefined 而不是拋異常這個(gè)行為很容易讓人誤以為代碼沒問題實(shí)際上邏輯可能已經(jīng)錯(cuò)了。let和const是 ES6 引入的塊級(jí)作用域變量聲明解決了上面兩個(gè)問題。let聲明的變量只在當(dāng)前代碼塊內(nèi)有效而且存在“暫時(shí)性死區(qū)”——在聲明之前訪問變量會(huì)直接報(bào)ReferenceError。const則是常量聲明聲明時(shí)必須賦值且不能重新賦值。注意這里是不能“重新賦值”但對(duì)對(duì)象和數(shù)組這種引用類型const只鎖住變量指向的地址不鎖內(nèi)部屬性const user { name: lisi }; user.name wangwu; // 允許修改屬性沒問題 // user { name: zhaoliu }; // 報(bào)錯(cuò)重新賦值不允許 const arr [1, 2, 3]; arr.push(4); // 允許 // arr [1, 2]; // 報(bào)錯(cuò)我的實(shí)際建議是默認(rèn)用const確定需要重新賦值時(shí)才用let。這樣代碼的意圖更清晰別人看你的代碼時(shí)看到const就知道這個(gè)變量不會(huì)重新指向新值減少了閱讀理解成本。2.2 數(shù)據(jù)類型全景基本類型和引用類型要分清JavaScript 有 7 種基本類型和 1 種引用類型。基本類型包括string、number、boolean、null、undefined、symbol、bigint引用類型主要是object而數(shù)組、函數(shù)、日期、正則這些本質(zhì)上都是object的變體。這個(gè)分類不是考試知識(shí)點(diǎn)它直接決定了你代碼里的賦值行為?；绢愋桶粗祩鬟f拷貝的是實(shí)實(shí)在在的值引用類型按引用傳遞變量里存的是內(nèi)存地址?？磦€(gè)我實(shí)際遇到過的問題let a { count: 1 }; let b a; // b 拿到的是 a 的引用不是拷貝 b.count 2; console.log(a.count); // 2a 也被改了 let c hello; let d c; d world; console.log(c); // helloc 沒變基本類型互不影響這個(gè)現(xiàn)象我在好幾個(gè)新手同事的代碼里都見過。他們本想復(fù)制一個(gè)對(duì)象出來(lái)做臨時(shí)修改結(jié)果不小心把原對(duì)象也改了排查了半天。解決辦法是用展開運(yùn)算符...做淺拷貝let user { name: tom, info: { age: 20 } }; let copy { ...user }; // 淺拷貝只復(fù)制第一層 copy.info.age 25; console.log(user.info.age); // 25嵌套的 info 對(duì)象還是同一個(gè)引用 // 深拷貝需要用遞歸或者 structuredClone let deepCopy structuredClone(user); deepCopy.info.age 30; console.log(user.info.age); // 25這次互不影響structuredClone是后來(lái)才有的原生深拷貝 API兼容性已經(jīng)足夠好遇到需要深拷貝的場(chǎng)景不用再手動(dòng)寫遞歸了。2.3 typeof 的局限與更可靠的類型判斷typeof是新手最先接觸的類型判斷工具但它有幾個(gè)著名的坑我整理一下表達(dá)式結(jié)果說明typeof 42number正常typeof strstring正常typeof trueboolean正常typeof undefinedundefined正常typeof nullobject歷史遺留 bug但沒法修typeof []object數(shù)組也是 objecttypeof function(){}function函數(shù)有特殊處理typeof null返回object是 ES 規(guī)范里沒法修改的歷史問題所以判斷一個(gè)值是不是真的null時(shí)得用value null這種全等比較而不是依賴typeof。判斷數(shù)組也不能用typeof得用Array.isArray()或者Object.prototype.toString.call()。日常開發(fā)里我總結(jié)了一套自己的判斷習(xí)慣判斷基本類型用typeof判斷null用全等判斷數(shù)組用Array.isArray()需要精確判斷對(duì)象類型時(shí)用Object.prototype.toString.call()Object.prototype.toString.call([]); // [object Array] Object.prototype.toString.call({}); // [object Object] Object.prototype.toString.call(new Date()); // [object Date] Object.prototype.toString.call(/regex/); // [object RegExp]還有一個(gè)在實(shí)戰(zhàn)中非常高頻的需求判斷一個(gè)值是否“為空”。我推薦用“真值”結(jié)合顯式判斷比如判斷一個(gè)輸入框提交前是否填了內(nèi)容function isEmpty(value) { return value null || value undefined || value ; }這里刻意沒有用!value因?yàn)?0、!false、!都是 true直接把數(shù)字 0 和布爾 false 都判成空了容易誤傷。3. 運(yùn)算符、流程控制與隱式轉(zhuǎn)換邏輯出錯(cuò)往往不在邏輯3.1 隱式類型轉(zhuǎn)換加號(hào)到底是拼接還是加法JavaScript 的運(yùn)算符是隱式類型轉(zhuǎn)換的重災(zāi)區(qū)也是新手最容易懷疑人生的地方。規(guī)則其實(shí)很明確只要兩側(cè)有一個(gè)是字符串那它做的就是字符串拼接如果兩側(cè)都不是字符串才把操作數(shù)轉(zhuǎn)成數(shù)字做加法。console.log(1 2); // 12字符串拼接 console.log(1 2); // 3數(shù)字加法 console.log(1 2); // 12 console.log( 1); // 1 console.log(5 - 1); // 4注意減號(hào)沒有拼接語(yǔ)義會(huì)轉(zhuǎn)數(shù)字 console.log(5 * 2); // 10這里有個(gè)特別容易踩的坑從輸入框拿到的一定是字符串直接做加法會(huì)變成拼接。比如用戶輸入價(jià)格和數(shù)量你寫price count結(jié)果得到的是12.934這樣的字符串而不是乘法結(jié)果。解決辦法是顯式轉(zhuǎn)換用Number()、parseInt()或者parseFloat()let price Number(12.9); // 12.9 let count Number(3); // 3 let total price * count; // 38.7 let num1 parseInt(12px); // 12能解析出前置數(shù)字 let num2 parseFloat(3.5rem); // 3.5我自己寫代碼的習(xí)慣是“顯式優(yōu)于隱式”任何從外部拿到的值在使用前先做類型轉(zhuǎn)換絕不讓 JavaScript 幫我猜。這樣代碼清晰也不會(huì)被隱式轉(zhuǎn)換坑到。3.2 與 全等比較是唯一推薦會(huì)先做隱式轉(zhuǎn)換再比較不做轉(zhuǎn)換直接比較值和類型。我在項(xiàng)目里的規(guī)矩就一條永遠(yuǎn)用永遠(yuǎn)別用。因?yàn)榈囊?guī)則太繞了看幾個(gè)例子你就知道為什么我這么堅(jiān)決console.log(1 1); // true轉(zhuǎn)數(shù)字后相等 console.log(0 ); // true空字符串轉(zhuǎn) 0 console.log(0 false); // truefalse 轉(zhuǎn) 0 console.log(null undefined); // true特殊規(guī)則 console.log([] ); // true數(shù)組會(huì)先轉(zhuǎn)成字符串這些結(jié)果單看每條都有“規(guī)則可循”但放在一起就是災(zāi)難。我記得之前排查一個(gè) bug表單提交時(shí)判斷用戶是否選擇了選項(xiàng)用了if (selectedValue 0)結(jié)果空字符串也被當(dāng)成 0 通過了校驗(yàn)導(dǎo)致提交了一堆空數(shù)據(jù)。從那以后我就在團(tuán)隊(duì)里立了規(guī)矩代碼評(píng)審時(shí)看到直接打回讓寫出這行代碼的人用改過來(lái)。在判斷引用類型時(shí)也要注意它比較的是引用地址而不是內(nèi)容let obj1 { id: 1 }; let obj2 { id: 1 }; console.log(obj1 obj2); // false內(nèi)容一樣但地址不同 let obj3 obj1; console.log(obj1 obj3); // true同一個(gè)引用3.3 流程控制的組織方式流程控制除了最基礎(chǔ)的if...else之外實(shí)際開發(fā)里還要學(xué)會(huì)根據(jù)場(chǎng)景選擇更合適的寫法。我自己的選擇標(biāo)準(zhǔn)是分支少、邏輯簡(jiǎn)單用if...else多個(gè)固定值匹配用switch或者對(duì)象映射純粹二選一用三元表達(dá)式。對(duì)象映射這種方式是我在項(xiàng)目里用得越來(lái)越多的尤其是處理不同狀態(tài)對(duì)應(yīng)不同行為時(shí)比一長(zhǎng)串if...else好看得多const statusMap { pending: 待處理, processing: 處理中, finished: 已完成, failed: 失敗 }; function getStatusText(status) { return statusMap[status] || 未知狀態(tài); }這個(gè)寫法有幾個(gè)好處映射關(guān)系集中在對(duì)象里新增狀態(tài)只需要加一行沒有復(fù)雜的嵌套分支默認(rèn)值用||兜底。比寫四個(gè)if判斷要清晰太多了。循環(huán)方面普通for循環(huán)適合知道循環(huán)次數(shù)的場(chǎng)景for...of適合遍歷數(shù)組、字符串等可迭代對(duì)象for...in是遍歷對(duì)象屬性名用的但要注意它會(huì)把原型鏈上的可枚舉屬性也遍歷出來(lái)所以我通常不推薦直接用它遍歷對(duì)象而是用Object.keys()配合forEachconst user { name: tom, age: 25 }; Object.keys(user).forEach(key { console.log(key, user[key]); });4. 函數(shù)JavaScript 的一等公民4.1 函數(shù)聲明、函數(shù)表達(dá)式與箭頭函數(shù)函數(shù)在 JavaScript 里是“一等公民”意思是函數(shù)可以像普通值一樣被賦值、傳參、返回。這個(gè)特性是 JavaScript 能用回調(diào)、能用函數(shù)式編程的基礎(chǔ)。函數(shù)有三種常見寫法我分別說說它們?cè)趯?shí)際使用中的區(qū)別。函數(shù)聲明有提升機(jī)制可以在聲明之前調(diào)用函數(shù)表達(dá)式?jīng)]有提升必須先定義后使用箭頭函數(shù)是 ES6 的簡(jiǎn)潔寫法但沒有自己的this、不能用作構(gòu)造函數(shù)。看代碼感受一下// 函數(shù)聲明可以提前調(diào)用 console.log(add(1, 2)); // 3 function add(a, b) { return a b; } // 函數(shù)表達(dá)式提前調(diào)用會(huì)報(bào)錯(cuò) // console.log(subtract(5, 2)); // TypeError const subtract function(a, b) { return a - b; }; // 箭頭函數(shù) const multiply (a, b) a * b;我平時(shí)寫代碼的傾向是需要提升或者需要作為構(gòu)造函數(shù)時(shí)用函數(shù)聲明一次性使用的回調(diào)函數(shù)用箭頭函數(shù)需要?jiǎng)討B(tài)綁定this時(shí)才用普通函數(shù)表達(dá)式。箭頭函數(shù)還有個(gè)好處是返回值隱式返回寫短回調(diào)特別舒服const numbers [1, 2, 3, 4, 5]; const doubled numbers.map(n n * 2); // [2, 4, 6, 8, 10]這里注意箭頭函數(shù)如果只有一條表達(dá)式可以省略return和大括號(hào)。但如果返回的是對(duì)象字面量需要加圓括號(hào)包裹c(diǎn)onst getUser () ({ name: tom, age: 18 }); // 必須加 ()否則會(huì)被當(dāng)成函數(shù)體4.2 參數(shù)處理與 this 指向函數(shù)參數(shù)的默認(rèn)值處理老寫法是a a || 默認(rèn)值但這有個(gè)問題如果傳入的合法值是空字符串或者 0也會(huì)被替換成默認(rèn)值。ES6 的默認(rèn)參數(shù)語(yǔ)法更精確只有當(dāng)參數(shù)為undefined時(shí)才啟用默認(rèn)值function greet(name 游客) { console.log(你好${name}); } greet(); // 你好游客 greet(tom); // 你好tom greet(); // 你好 空字符串不會(huì)觸發(fā)默認(rèn)值不定參數(shù)...args可以把所有剩余的實(shí)參收集成一個(gè)數(shù)組在處理參數(shù)數(shù)量不確定的函數(shù)時(shí)非常有用function sum(...numbers) { return numbers.reduce((acc, cur) acc cur, 0); } console.log(sum(1, 2, 3, 4)); // 10然后是this指向。這個(gè)真的是 JavaScript 里最勸退新手的點(diǎn)。我的理解方式是普通函數(shù)的this指向“調(diào)用它的那個(gè)對(duì)象”箭頭函數(shù)的this指向“定義它時(shí)所在作用域的this”。最常見的坑是事件回調(diào)里用普通函數(shù)this指向了事件源元素而不是外層對(duì)象導(dǎo)致取不到數(shù)據(jù)。比如const userCard { name: 張三, init() { // 這里的 this 是 userCard document.getElementById(btn).addEventListener(click, function() { // 這里的 this 是 button 元素不是 userCard console.log(this.name); // undefined }); } };解決方案有兩個(gè)一是把外層this存成self再在回調(diào)里用二是直接用箭頭函數(shù)因?yàn)樗鼤?huì)繼承外層作用域的this?，F(xiàn)代寫法毫無(wú)懸念選箭頭函數(shù)const userCard { name: 張三, init() { document.getElementById(btn).addEventListener(click, () { console.log(this.name); // 張三 }); } };4.3 回調(diào)函數(shù)和異步的入門理解函數(shù)作為參數(shù)傳遞是 JavaScript 異步編程的基礎(chǔ)。雖然現(xiàn)在都用 Promise 和 async/await 了但回調(diào)仍然無(wú)處不在事件處理、數(shù)組方法、定時(shí)器、中間件全是回調(diào)。初學(xué)者容易對(duì)回調(diào)產(chǎn)生兩個(gè)困惑一是“為什么函數(shù)可以不立刻執(zhí)行”二是“怎么防止回調(diào)地獄”。關(guān)于第一個(gè)我的解釋是把函數(shù)當(dāng)成一個(gè)“委托任務(wù)”你不是當(dāng)場(chǎng)執(zhí)行它而是告訴系統(tǒng)“到某個(gè)時(shí)機(jī)再執(zhí)行我”。定時(shí)器是最直觀的例子setTimeout(() { console.log(兩秒后執(zhí)行); }, 2000); console.log(先執(zhí)行); // 輸出先執(zhí)行 → 兩秒后執(zhí)行關(guān)于第二個(gè)困惑回調(diào)地獄是層層嵌套回調(diào)導(dǎo)致的代碼橫向膨脹解決思路是不要用}一層層疊而是使用 Promise 鏈?zhǔn)秸{(diào)用或者 async/await 讓代碼恢復(fù)平鋪結(jié)構(gòu)。基礎(chǔ)語(yǔ)法階段先理解回調(diào)的“傳遞行為”異步專項(xiàng)后面單獨(dú)展開。5. 事件機(jī)制語(yǔ)法怎么落地到頁(yè)面上5.1 事件綁定的三種方式JavaScript 在瀏覽器里最核心的工作就是跟用戶交互事件機(jī)制就是交互的入口。事件綁定有三種方式但日常開發(fā)里推薦用的只有一種半。第一種是把事件寫在 HTML 屬性里比如onclickhandleClick()這個(gè)方式現(xiàn)在基本被淘汰了因?yàn)樾袨楦Y(jié)構(gòu)耦合在一起不好維護(hù)。第二種是 DOM 屬性賦值方式element.onclick handler這種方式只能綁一個(gè)處理函數(shù)后綁的會(huì)覆蓋先綁的。第三種是addEventListener方式可以綁多個(gè)處理函數(shù)還支持控制是否在捕獲階段執(zhí)行是唯一推薦的標(biāo)準(zhǔn)方式const btn document.getElementById(btn); btn.addEventListener(click, () { console.log(第一次綁定); }); btn.addEventListener(click, () { console.log(第二次綁定); }); // 點(diǎn)擊后兩個(gè)回調(diào)都會(huì)執(zhí)行addEventListener還有一個(gè)很實(shí)用的能力是{ once: true }參數(shù)讓事件只觸發(fā)一次對(duì)于某些一次性操作比如首次點(diǎn)擊提示特別方便btn.addEventListener(click, showGuide, { once: true });5.2 事件對(duì)象、事件冒泡與事件委托事件處理函數(shù)的第一個(gè)參數(shù)就是事件對(duì)象里面包含了跟這次事件相關(guān)的所有信息目標(biāo)元素、坐標(biāo)、按鍵、時(shí)間戳等。document.addEventListener(click, (event) { console.log(event.target); // 實(shí)際點(diǎn)擊的元素 console.log(event.clientX); // 點(diǎn)擊的 X 坐標(biāo) console.log(event.clientY); // 點(diǎn)擊的 Y 坐標(biāo) console.log(event.type); // click });事件冒泡是指事件從最內(nèi)層的目標(biāo)元素開始逐級(jí)向上傳播到父元素、再傳到 document。如果不了解冒泡你可能會(huì)遇到這種情況點(diǎn)擊列表里某一項(xiàng)結(jié)果整個(gè)列表的點(diǎn)擊事件都觸發(fā)了。實(shí)際項(xiàng)目里冒泡配合“事件委托”反而是個(gè)很好用的模式與其給 100 個(gè)列表項(xiàng)分別綁事件不如只給父容器綁一個(gè)事件通過event.target判斷實(shí)際點(diǎn)的是誰(shuí)const list document.getElementById(list); list.addEventListener(click, (event) { const item event.target.closest(li); if (item) { console.log(點(diǎn)擊了第, item.dataset.index, 項(xiàng)); } });這里用了closest(li)它的作用是向上查找最近的li元素這樣就算用戶點(diǎn)的是li內(nèi)部的文字或圖標(biāo)也能準(zhǔn)確定位到這一項(xiàng)。事件委托的好處是占用的監(jiān)聽器少、內(nèi)存占用低而且后續(xù)動(dòng)態(tài)新增的列表項(xiàng)不需要額外綁定就能響應(yīng)事件。如果你需要阻止冒泡用event.stopPropagation()需要阻止默認(rèn)行為比如跳轉(zhuǎn)、提交刷新頁(yè)面用event.preventDefault()。6. 運(yùn)行時(shí)報(bào)錯(cuò)與調(diào)試別怕報(bào)錯(cuò)怕的是看不懂6.1 高頻報(bào)錯(cuò)類型速查表學(xué)習(xí) JavaScript 的過程中報(bào)錯(cuò)是家常便飯。我把這幾年遇到頻率最高的報(bào)錯(cuò)歸納成一張表方便對(duì)照排查報(bào)錯(cuò)信息含義常見場(chǎng)景解決思路ReferenceError: xxx is not defined變量未聲明拼錯(cuò)變量名、用了未定義的值檢查變量聲明和拼寫TypeError: Cannot read property xxx of undefined在 undefined/null 上讀取屬性異步數(shù)據(jù)未返回、接口字段缺失先判空再用value?.xxx可選鏈SyntaxError: Unexpected token語(yǔ)法錯(cuò)誤少寫括號(hào)、花括號(hào)不配對(duì)、中英文符號(hào)混用看報(bào)錯(cuò)位置附近的代碼檢查括號(hào)TypeError: xxx is not a function調(diào)用了不存在的方法把對(duì)象當(dāng)函數(shù)調(diào)用、方法名拼錯(cuò)確認(rèn)類型和是否存在該方法RangeError: Maximum call stack size exceeded棧溢出無(wú)限遞歸、死循環(huán)檢查遞歸終止條件我自己在調(diào)試時(shí)特別強(qiáng)調(diào)一個(gè)習(xí)慣先看報(bào)錯(cuò)的第一行再看它指出的行號(hào)位置。很多新手一看報(bào)錯(cuò)就慌直接翻代碼從頭看到尾其實(shí)瀏覽器控制臺(tái)已經(jīng)告訴你了問題在哪一行順著查就行。6.2 調(diào)試技巧console、斷點(diǎn)與性能分析console.log當(dāng)然是最常用的調(diào)試方式但它有個(gè)效率問題改一次代碼刷新一次頁(yè)面非常費(fèi)時(shí)間。我的調(diào)試路線是先在控制臺(tái)輸出關(guān)鍵變量確認(rèn)數(shù)據(jù)對(duì)不對(duì)如果還定位不了直接在瀏覽器開發(fā)者工具里打斷點(diǎn)逐步執(zhí)行看每一行的變量變化。打斷點(diǎn)的操作很簡(jiǎn)單在 Sources源代碼面板里找到對(duì)應(yīng)的 JS 文件點(diǎn)擊行號(hào)打上斷點(diǎn)然后刷新頁(yè)面代碼執(zhí)行到這一行就會(huì)停下來(lái)。這時(shí)候可以在右側(cè)的 Scope作用域面板里看到所有變量的當(dāng)前值也可以單步執(zhí)行一行一行走觀察每一步的效果。這個(gè)方法對(duì)排查循環(huán)問題、復(fù)雜函數(shù)內(nèi)部邏輯特別有效比盲目加console.log高效太多。還有一個(gè)我常用的技巧給console.log加上描述前綴方便在多條日志中區(qū)分const userId u_1001; const orderList getOrders(); console.log(當(dāng)前用戶ID:, userId); console.log(訂單列表:, orderList);真到了生產(chǎn)環(huán)境日志可不能隨便打會(huì)影響性能。生產(chǎn)代碼里的調(diào)試信息要么不寫要么通過構(gòu)建工具剔除這是我踩過坑后養(yǎng)成的習(xí)慣——線上頁(yè)面一打開控制臺(tái)幾百條日志排查性能問題的時(shí)候完全分不清哪條是核心信息。7. 實(shí)戰(zhàn)里的高頻細(xì)節(jié)看起來(lái)小用錯(cuò)了很難受7.1 保留兩位小數(shù)到底怎么選“JavaScript 保留兩位小數(shù)”這個(gè)話題在零散問題里一直很熱門因?yàn)槲掖_實(shí)踩過坑。toFixed(2)是很多人第一反應(yīng)但它有個(gè)讓人頭疼的問題返回的是字符串而不是數(shù)字。const price 3.14159; console.log(price.toFixed(2)); // 3.14注意是字符串 console.log(typeof price.toFixed(2)); // string如果你直接拿這個(gè)結(jié)果去做數(shù)值計(jì)算3.14 2會(huì)得到3.142又是一個(gè)隱式轉(zhuǎn)換的坑。所以要么用Number(price.toFixed(2))轉(zhuǎn)回來(lái)要么用更精確的式子const num 3.14159; const rounded Math.round(num * 100) / 100; // 3.14真正的數(shù)字另外toFixed的舍入規(guī)則在某些邊界情況也反直覺比如(1.005).toFixed(2)得到的是1.00而不是1.01原因與浮點(diǎn)數(shù)精度有關(guān)。如果你要做金額計(jì)算我建議用Math.round(value * 100) / 100這個(gè)基礎(chǔ)做法或者直接引入處理精確小數(shù)的庫(kù)無(wú)論如何別依賴toFixed來(lái)做業(yè)務(wù)上的金額舍入判斷。7.2 模板字符串的實(shí)用價(jià)值ES6 的模板字符串用反引號(hào)包裹除了能插值還可以直接寫多行這個(gè)特性在拼 HTML 片段時(shí)特別好用。我寫動(dòng)態(tài)渲染的列表時(shí)經(jīng)常這樣拼模板const users [{ name: 張三, age: 20 }, { name: 李四, age: 22 }]; const listHtml users.map(user li classuser-item span classuser-name${user.name}/span span classuser-age${user.age}歲/span /li ).join(); document.getElementById(userList).innerHTML listHtml;注意拼接數(shù)組時(shí)用了join()不然默認(rèn)會(huì)在每個(gè)元素中間加逗號(hào)生成一堆帶逗號(hào)的 HTML這個(gè)細(xì)節(jié)我第一次寫的時(shí)候也漏了。7.3 字符串綜合處理的常見組合字符串操作用途極廣我整理幾個(gè)高頻組合去首尾空格用trim()判斷是否包含子串用includes()按分隔符拆分用split()把數(shù)組拼回字符串用join()批量替換要用正則加replace()let input hello world ; console.log(input.trim()); // hello world console.log(input.includes(world)); // true console.log(a,b,c.split(,)); // [a, b, c] console.log([a, b].join(-)); // a-b console.log(2025-01-01.replace(/-/g, /)); // 2025/01/01這里replace(/-/g, /)里的g是全局匹配標(biāo)記不加的話只替換第一個(gè)匹配到的-很多人在這里吃過虧。8. 學(xué)習(xí)筆記之外的幾點(diǎn)體會(huì)聊到這兒這份筆記的主體內(nèi)容差不多告一段落。最后分享幾個(gè)我回爐基礎(chǔ)語(yǔ)法后的個(gè)人體會(huì)。第一基礎(chǔ)語(yǔ)法的價(jià)值不在于背下來(lái)多少規(guī)則而在于建立起“遇到問題能判斷它屬于哪一類”的能力。報(bào)錯(cuò)信息是 TypeScript 還是運(yùn)行時(shí)錯(cuò)誤、是類型問題還是作用域問題、是同步邏輯還是異步時(shí)序問題這些分類能力全靠對(duì)基礎(chǔ)的熟悉程度。我在實(shí)際開發(fā)里排查問題的速度明顯快于同事不是因?yàn)槲衣斆鞫且驗(yàn)槲乙娺^這些坑、知道它們大概率出現(xiàn)在哪兒。第二寫代碼時(shí)永遠(yuǎn)不要指望 JavaScript 幫你“猜意圖”。、隱式轉(zhuǎn)換、var提升這些特性任何一次“圖省事”的使用都可能在某次重構(gòu)或者數(shù)據(jù)異常時(shí)變成回旋鏢。用顯式轉(zhuǎn)換、用、用let/const這些習(xí)慣一開始可能覺得繁瑣但長(zhǎng)期算下來(lái)省下的排查時(shí)間遠(yuǎn)大于多敲的那幾個(gè)字符。第三如果這份筆記里的代碼示例你能不看答案自己寫一遍再刻意改幾個(gè)參數(shù)觀察結(jié)果變化那學(xué)習(xí)效果會(huì)比單純“看懂”好很多。我?guī)н^的每一個(gè)上手快的新人共同特點(diǎn)都是愿意親手敲代碼、親手制造 bug、再親手解決 bug?；A(chǔ)語(yǔ)法沒有捷徑但它也不需要你死記硬背多寫多踩坑自然就熟了。 JavaScript基礎(chǔ)語(yǔ)法核心筆記：變量、類型、函數(shù)與事件機(jī)制
說實(shí)話JavaScript 基礎(chǔ)語(yǔ)法這門課我剛?cè)胄心菚?huì)兒是真沒當(dāng)回事覺得不就是寫個(gè)var、敲個(gè)function嘛能難到哪兒去。結(jié)果真正開始寫項(xiàng)目、接手別人的代碼、被線上 bug 追著跑的時(shí)候才發(fā)現(xiàn)當(dāng)初基礎(chǔ)沒摳透的賬全都在后面加倍還回來(lái)了。這份學(xué)習(xí)筆記算是我對(duì)自己這幾年 JavaScript 使用經(jīng)驗(yàn)的一次系統(tǒng)回爐。我不會(huì)把它寫成教科書式的語(yǔ)法清單而是把我在實(shí)際開發(fā)里反復(fù)踩過的坑、驗(yàn)證過的寫法、以及真正用得上的細(xì)節(jié)全部整理出來(lái)。內(nèi)容覆蓋變量聲明、數(shù)據(jù)類型判斷、運(yùn)算符與隱式轉(zhuǎn)換、函數(shù)、事件機(jī)制、報(bào)錯(cuò)調(diào)試這幾個(gè)最核心的模塊適合剛學(xué)完 HTML 和 CSS、準(zhǔn)備進(jìn)入 JavaScript 世界的初學(xué)者也適合寫過一陣子代碼但總覺得基礎(chǔ)不扎實(shí)、想回頭查漏補(bǔ)缺的同學(xué)。我盡量用大白話講清楚每個(gè)知識(shí)點(diǎn)背后的“為什么”再配上可以直接跑起來(lái)的代碼示例。這份筆記不追求面面俱到但凡是寫出來(lái)的都是你日常開發(fā)里高頻遇到的、繞不開的東西。1. 先說說這份學(xué)習(xí)筆記的定位和整體思路1.1 為什么要回頭整理基礎(chǔ)語(yǔ)法很多初學(xué)者會(huì)有個(gè)誤區(qū)覺得基礎(chǔ)語(yǔ)法就是背幾個(gè)關(guān)鍵字、記幾條規(guī)則隨便看一遍就算過了。但 JavaScript 這門語(yǔ)言有個(gè)特點(diǎn)它看起來(lái)跟 C、Java 長(zhǎng)得很像骨子里卻是完全不同的運(yùn)行邏輯。比如變量提升、隱式類型轉(zhuǎn)換、this的指向規(guī)則、事件冒泡這些概念光看語(yǔ)法是看不出來(lái)的必須放到實(shí)際執(zhí)行場(chǎng)景里去理解。我寫這份筆記的另一個(gè)直接原因是身邊陸續(xù)有同事問我一些“基礎(chǔ)問題”“為什么我用比較兩個(gè)值老出問題”“為什么這個(gè)this在函數(shù)里就變成 undefined 了”“為什么數(shù)組判斷類型用typeof不管用”。這些問題單獨(dú)看都是基礎(chǔ)語(yǔ)法里的細(xì)節(jié)但連起來(lái)就是一個(gè)完整的知識(shí)拼圖。與其每次幫人查一遍不如系統(tǒng)性地寫一份可以反復(fù)查閱的筆記也算是對(duì)自己知識(shí)體系的一次沉淀。1.2 基礎(chǔ)語(yǔ)法學(xué)習(xí)的整體路線JavaScript 基礎(chǔ)語(yǔ)法這塊我的建議是按照“變量與類型 → 運(yùn)算符與流程控制 → 函數(shù) → 對(duì)象與數(shù)組 → 事件與 DOM → 異步”這條主線去推進(jìn)而不是今天看一個(gè)知識(shí)點(diǎn)、明天看另一個(gè)。原因很簡(jiǎn)單后面的每一個(gè)環(huán)節(jié)都在依賴前面的概念。你連let和var的作用域都分不清后面寫循環(huán)、寫閉包、寫事件處理函數(shù)的時(shí)候一定會(huì)一頭霧水。這里我用一個(gè)表把我建議的學(xué)習(xí)順序和對(duì)應(yīng)要解決的問題列出來(lái)學(xué)習(xí)階段核心內(nèi)容需要搞懂的關(guān)鍵問題第一階段變量聲明、數(shù)據(jù)類型、類型判斷var/let/const 有什么區(qū)別、typeof 能判斷什么第二階段運(yùn)算符、流程控制、循環(huán)隱式轉(zhuǎn)換規(guī)則、與的差異、分支怎么組織第三階段函數(shù)、作用域、閉包函數(shù)表達(dá)式與聲明區(qū)別、this指向、參數(shù)處理第四階段數(shù)組與對(duì)象操作引用類型特性、常用方法、解構(gòu)賦值第五階段DOM 操作與事件事件綁定、事件流、事件委托第六階段異步與模塊化回調(diào)、Promise、async/await、模塊導(dǎo)入導(dǎo)出這份筆記對(duì)應(yīng)的是前三個(gè)階段的重點(diǎn)內(nèi)容后三個(gè)階段等我把異步那塊再單獨(dú)整理一份筆記出來(lái)。別貪多地基打牢了后面真的會(huì)快很多。2. 變量、數(shù)據(jù)類型與類型判斷翻車率最高的前三名2.1 var、let、const 到底怎么選三個(gè)聲明關(guān)鍵字是 JavaScript 給新手的第一關(guān)。我見過很多教程直接告訴你“能用const就用const其次let別用var”這個(gè)結(jié)論是對(duì)的但它背后的原理如果沒搞清楚以后還是會(huì)踩坑。先說var。它在 ES6 之前是唯一的變量聲明方式有兩個(gè)明顯的問題一是函數(shù)作用域沒有塊級(jí)作用域的概念二是變量提升聲明會(huì)被“提升”到作用域頂部但賦值還在原位。舉個(gè)我自己調(diào)試過的例子function testVar() { console.log(name); // undefined不是報(bào)錯(cuò) var name zhangsan; if (true) { var age 30; // var 沒有塊級(jí)作用域 } console.log(age); // 30外部也能訪問到 }這段代碼在別的語(yǔ)言里早就報(bào)錯(cuò)了但在 JavaScript 里能正常跑正是因?yàn)関ar的變量提升和函數(shù)級(jí)作用域。console.log(name)打印出 undefined 而不是拋異常這個(gè)行為很容易讓人誤以為代碼沒問題實(shí)際上邏輯可能已經(jīng)錯(cuò)了。let和const是 ES6 引入的塊級(jí)作用域變量聲明解決了上面兩個(gè)問題。let聲明的變量只在當(dāng)前代碼塊內(nèi)有效而且存在“暫時(shí)性死區(qū)”——在聲明之前訪問變量會(huì)直接報(bào)ReferenceError。const則是常量聲明聲明時(shí)必須賦值且不能重新賦值。注意這里是不能“重新賦值”但對(duì)對(duì)象和數(shù)組這種引用類型const只鎖住變量指向的地址不鎖內(nèi)部屬性const user { name: lisi }; user.name wangwu; // 允許修改屬性沒問題 // user { name: zhaoliu }; // 報(bào)錯(cuò)重新賦值不允許 const arr [1, 2, 3]; arr.push(4); // 允許 // arr [1, 2]; // 報(bào)錯(cuò)我的實(shí)際建議是默認(rèn)用const確定需要重新賦值時(shí)才用let。這樣代碼的意圖更清晰別人看你的代碼時(shí)看到const就知道這個(gè)變量不會(huì)重新指向新值減少了閱讀理解成本。2.2 數(shù)據(jù)類型全景基本類型和引用類型要分清JavaScript 有 7 種基本類型和 1 種引用類型。基本類型包括string、number、boolean、null、undefined、symbol、bigint引用類型主要是object而數(shù)組、函數(shù)、日期、正則這些本質(zhì)上都是object的變體。這個(gè)分類不是考試知識(shí)點(diǎn)它直接決定了你代碼里的賦值行為?；绢愋桶粗祩鬟f拷貝的是實(shí)實(shí)在在的值引用類型按引用傳遞變量里存的是內(nèi)存地址?？磦€(gè)我實(shí)際遇到過的問題let a { count: 1 }; let b a; // b 拿到的是 a 的引用不是拷貝 b.count 2; console.log(a.count); // 2a 也被改了 let c hello; let d c; d world; console.log(c); // helloc 沒變基本類型互不影響這個(gè)現(xiàn)象我在好幾個(gè)新手同事的代碼里都見過。他們本想復(fù)制一個(gè)對(duì)象出來(lái)做臨時(shí)修改結(jié)果不小心把原對(duì)象也改了排查了半天。解決辦法是用展開運(yùn)算符...做淺拷貝let user { name: tom, info: { age: 20 } }; let copy { ...user }; // 淺拷貝只復(fù)制第一層 copy.info.age 25; console.log(user.info.age); // 25嵌套的 info 對(duì)象還是同一個(gè)引用 // 深拷貝需要用遞歸或者 structuredClone let deepCopy structuredClone(user); deepCopy.info.age 30; console.log(user.info.age); // 25這次互不影響structuredClone是后來(lái)才有的原生深拷貝 API兼容性已經(jīng)足夠好遇到需要深拷貝的場(chǎng)景不用再手動(dòng)寫遞歸了。2.3 typeof 的局限與更可靠的類型判斷typeof是新手最先接觸的類型判斷工具但它有幾個(gè)著名的坑我整理一下表達(dá)式結(jié)果說明typeof 42number正常typeof strstring正常typeof trueboolean正常typeof undefinedundefined正常typeof nullobject歷史遺留 bug但沒法修typeof []object數(shù)組也是 objecttypeof function(){}function函數(shù)有特殊處理typeof null返回object是 ES 規(guī)范里沒法修改的歷史問題所以判斷一個(gè)值是不是真的null時(shí)得用value null這種全等比較而不是依賴typeof。判斷數(shù)組也不能用typeof得用Array.isArray()或者Object.prototype.toString.call()。日常開發(fā)里我總結(jié)了一套自己的判斷習(xí)慣判斷基本類型用typeof判斷null用全等判斷數(shù)組用Array.isArray()需要精確判斷對(duì)象類型時(shí)用Object.prototype.toString.call()Object.prototype.toString.call([]); // [object Array] Object.prototype.toString.call({}); // [object Object] Object.prototype.toString.call(new Date()); // [object Date] Object.prototype.toString.call(/regex/); // [object RegExp]還有一個(gè)在實(shí)戰(zhàn)中非常高頻的需求判斷一個(gè)值是否“為空”。我推薦用“真值”結(jié)合顯式判斷比如判斷一個(gè)輸入框提交前是否填了內(nèi)容function isEmpty(value) { return value null || value undefined || value ; }這里刻意沒有用!value因?yàn)?0、!false、!都是 true直接把數(shù)字 0 和布爾 false 都判成空了容易誤傷。3. 運(yùn)算符、流程控制與隱式轉(zhuǎn)換邏輯出錯(cuò)往往不在邏輯3.1 隱式類型轉(zhuǎn)換加號(hào)到底是拼接還是加法JavaScript 的運(yùn)算符是隱式類型轉(zhuǎn)換的重災(zāi)區(qū)也是新手最容易懷疑人生的地方。規(guī)則其實(shí)很明確只要兩側(cè)有一個(gè)是字符串那它做的就是字符串拼接如果兩側(cè)都不是字符串才把操作數(shù)轉(zhuǎn)成數(shù)字做加法。console.log(1 2); // 12字符串拼接 console.log(1 2); // 3數(shù)字加法 console.log(1 2); // 12 console.log( 1); // 1 console.log(5 - 1); // 4注意減號(hào)沒有拼接語(yǔ)義會(huì)轉(zhuǎn)數(shù)字 console.log(5 * 2); // 10這里有個(gè)特別容易踩的坑從輸入框拿到的一定是字符串直接做加法會(huì)變成拼接。比如用戶輸入價(jià)格和數(shù)量你寫price count結(jié)果得到的是12.934這樣的字符串而不是乘法結(jié)果。解決辦法是顯式轉(zhuǎn)換用Number()、parseInt()或者parseFloat()let price Number(12.9); // 12.9 let count Number(3); // 3 let total price * count; // 38.7 let num1 parseInt(12px); // 12能解析出前置數(shù)字 let num2 parseFloat(3.5rem); // 3.5我自己寫代碼的習(xí)慣是“顯式優(yōu)于隱式”任何從外部拿到的值在使用前先做類型轉(zhuǎn)換絕不讓 JavaScript 幫我猜。這樣代碼清晰也不會(huì)被隱式轉(zhuǎn)換坑到。3.2 與 全等比較是唯一推薦會(huì)先做隱式轉(zhuǎn)換再比較不做轉(zhuǎn)換直接比較值和類型。我在項(xiàng)目里的規(guī)矩就一條永遠(yuǎn)用永遠(yuǎn)別用。因?yàn)榈囊?guī)則太繞了看幾個(gè)例子你就知道為什么我這么堅(jiān)決console.log(1 1); // true轉(zhuǎn)數(shù)字后相等 console.log(0 ); // true空字符串轉(zhuǎn) 0 console.log(0 false); // truefalse 轉(zhuǎn) 0 console.log(null undefined); // true特殊規(guī)則 console.log([] ); // true數(shù)組會(huì)先轉(zhuǎn)成字符串這些結(jié)果單看每條都有“規(guī)則可循”但放在一起就是災(zāi)難。我記得之前排查一個(gè) bug表單提交時(shí)判斷用戶是否選擇了選項(xiàng)用了if (selectedValue 0)結(jié)果空字符串也被當(dāng)成 0 通過了校驗(yàn)導(dǎo)致提交了一堆空數(shù)據(jù)。從那以后我就在團(tuán)隊(duì)里立了規(guī)矩代碼評(píng)審時(shí)看到直接打回讓寫出這行代碼的人用改過來(lái)。在判斷引用類型時(shí)也要注意它比較的是引用地址而不是內(nèi)容let obj1 { id: 1 }; let obj2 { id: 1 }; console.log(obj1 obj2); // false內(nèi)容一樣但地址不同 let obj3 obj1; console.log(obj1 obj3); // true同一個(gè)引用3.3 流程控制的組織方式流程控制除了最基礎(chǔ)的if...else之外實(shí)際開發(fā)里還要學(xué)會(huì)根據(jù)場(chǎng)景選擇更合適的寫法。我自己的選擇標(biāo)準(zhǔn)是分支少、邏輯簡(jiǎn)單用if...else多個(gè)固定值匹配用switch或者對(duì)象映射純粹二選一用三元表達(dá)式。對(duì)象映射這種方式是我在項(xiàng)目里用得越來(lái)越多的尤其是處理不同狀態(tài)對(duì)應(yīng)不同行為時(shí)比一長(zhǎng)串if...else好看得多const statusMap { pending: 待處理, processing: 處理中, finished: 已完成, failed: 失敗 }; function getStatusText(status) { return statusMap[status] || 未知狀態(tài); }這個(gè)寫法有幾個(gè)好處映射關(guān)系集中在對(duì)象里新增狀態(tài)只需要加一行沒有復(fù)雜的嵌套分支默認(rèn)值用||兜底。比寫四個(gè)if判斷要清晰太多了。循環(huán)方面普通for循環(huán)適合知道循環(huán)次數(shù)的場(chǎng)景for...of適合遍歷數(shù)組、字符串等可迭代對(duì)象for...in是遍歷對(duì)象屬性名用的但要注意它會(huì)把原型鏈上的可枚舉屬性也遍歷出來(lái)所以我通常不推薦直接用它遍歷對(duì)象而是用Object.keys()配合forEachconst user { name: tom, age: 25 }; Object.keys(user).forEach(key { console.log(key, user[key]); });4. 函數(shù)JavaScript 的一等公民4.1 函數(shù)聲明、函數(shù)表達(dá)式與箭頭函數(shù)函數(shù)在 JavaScript 里是“一等公民”意思是函數(shù)可以像普通值一樣被賦值、傳參、返回。這個(gè)特性是 JavaScript 能用回調(diào)、能用函數(shù)式編程的基礎(chǔ)。函數(shù)有三種常見寫法我分別說說它們?cè)趯?shí)際使用中的區(qū)別。函數(shù)聲明有提升機(jī)制可以在聲明之前調(diào)用函數(shù)表達(dá)式?jīng)]有提升必須先定義后使用箭頭函數(shù)是 ES6 的簡(jiǎn)潔寫法但沒有自己的this、不能用作構(gòu)造函數(shù)。看代碼感受一下// 函數(shù)聲明可以提前調(diào)用 console.log(add(1, 2)); // 3 function add(a, b) { return a b; } // 函數(shù)表達(dá)式提前調(diào)用會(huì)報(bào)錯(cuò) // console.log(subtract(5, 2)); // TypeError const subtract function(a, b) { return a - b; }; // 箭頭函數(shù) const multiply (a, b) a * b;我平時(shí)寫代碼的傾向是需要提升或者需要作為構(gòu)造函數(shù)時(shí)用函數(shù)聲明一次性使用的回調(diào)函數(shù)用箭頭函數(shù)需要?jiǎng)討B(tài)綁定this時(shí)才用普通函數(shù)表達(dá)式。箭頭函數(shù)還有個(gè)好處是返回值隱式返回寫短回調(diào)特別舒服const numbers [1, 2, 3, 4, 5]; const doubled numbers.map(n n * 2); // [2, 4, 6, 8, 10]這里注意箭頭函數(shù)如果只有一條表達(dá)式可以省略return和大括號(hào)。但如果返回的是對(duì)象字面量需要加圓括號(hào)包裹c(diǎn)onst getUser () ({ name: tom, age: 18 }); // 必須加 ()否則會(huì)被當(dāng)成函數(shù)體4.2 參數(shù)處理與 this 指向函數(shù)參數(shù)的默認(rèn)值處理老寫法是a a || 默認(rèn)值但這有個(gè)問題如果傳入的合法值是空字符串或者 0也會(huì)被替換成默認(rèn)值。ES6 的默認(rèn)參數(shù)語(yǔ)法更精確只有當(dāng)參數(shù)為undefined時(shí)才啟用默認(rèn)值function greet(name 游客) { console.log(你好${name}); } greet(); // 你好游客 greet(tom); // 你好tom greet(); // 你好 空字符串不會(huì)觸發(fā)默認(rèn)值不定參數(shù)...args可以把所有剩余的實(shí)參收集成一個(gè)數(shù)組在處理參數(shù)數(shù)量不確定的函數(shù)時(shí)非常有用function sum(...numbers) { return numbers.reduce((acc, cur) acc cur, 0); } console.log(sum(1, 2, 3, 4)); // 10然后是this指向。這個(gè)真的是 JavaScript 里最勸退新手的點(diǎn)。我的理解方式是普通函數(shù)的this指向“調(diào)用它的那個(gè)對(duì)象”箭頭函數(shù)的this指向“定義它時(shí)所在作用域的this”。最常見的坑是事件回調(diào)里用普通函數(shù)this指向了事件源元素而不是外層對(duì)象導(dǎo)致取不到數(shù)據(jù)。比如const userCard { name: 張三, init() { // 這里的 this 是 userCard document.getElementById(btn).addEventListener(click, function() { // 這里的 this 是 button 元素不是 userCard console.log(this.name); // undefined }); } };解決方案有兩個(gè)一是把外層this存成self再在回調(diào)里用二是直接用箭頭函數(shù)因?yàn)樗鼤?huì)繼承外層作用域的this?，F(xiàn)代寫法毫無(wú)懸念選箭頭函數(shù)const userCard { name: 張三, init() { document.getElementById(btn).addEventListener(click, () { console.log(this.name); // 張三 }); } };4.3 回調(diào)函數(shù)和異步的入門理解函數(shù)作為參數(shù)傳遞是 JavaScript 異步編程的基礎(chǔ)。雖然現(xiàn)在都用 Promise 和 async/await 了但回調(diào)仍然無(wú)處不在事件處理、數(shù)組方法、定時(shí)器、中間件全是回調(diào)。初學(xué)者容易對(duì)回調(diào)產(chǎn)生兩個(gè)困惑一是“為什么函數(shù)可以不立刻執(zhí)行”二是“怎么防止回調(diào)地獄”。關(guān)于第一個(gè)我的解釋是把函數(shù)當(dāng)成一個(gè)“委托任務(wù)”你不是當(dāng)場(chǎng)執(zhí)行它而是告訴系統(tǒng)“到某個(gè)時(shí)機(jī)再執(zhí)行我”。定時(shí)器是最直觀的例子setTimeout(() { console.log(兩秒后執(zhí)行); }, 2000); console.log(先執(zhí)行); // 輸出先執(zhí)行 → 兩秒后執(zhí)行關(guān)于第二個(gè)困惑回調(diào)地獄是層層嵌套回調(diào)導(dǎo)致的代碼橫向膨脹解決思路是不要用}一層層疊而是使用 Promise 鏈?zhǔn)秸{(diào)用或者 async/await 讓代碼恢復(fù)平鋪結(jié)構(gòu)。基礎(chǔ)語(yǔ)法階段先理解回調(diào)的“傳遞行為”異步專項(xiàng)后面單獨(dú)展開。5. 事件機(jī)制語(yǔ)法怎么落地到頁(yè)面上5.1 事件綁定的三種方式JavaScript 在瀏覽器里最核心的工作就是跟用戶交互事件機(jī)制就是交互的入口。事件綁定有三種方式但日常開發(fā)里推薦用的只有一種半。第一種是把事件寫在 HTML 屬性里比如onclickhandleClick()這個(gè)方式現(xiàn)在基本被淘汰了因?yàn)樾袨楦Y(jié)構(gòu)耦合在一起不好維護(hù)。第二種是 DOM 屬性賦值方式element.onclick handler這種方式只能綁一個(gè)處理函數(shù)后綁的會(huì)覆蓋先綁的。第三種是addEventListener方式可以綁多個(gè)處理函數(shù)還支持控制是否在捕獲階段執(zhí)行是唯一推薦的標(biāo)準(zhǔn)方式const btn document.getElementById(btn); btn.addEventListener(click, () { console.log(第一次綁定); }); btn.addEventListener(click, () { console.log(第二次綁定); }); // 點(diǎn)擊后兩個(gè)回調(diào)都會(huì)執(zhí)行addEventListener還有一個(gè)很實(shí)用的能力是{ once: true }參數(shù)讓事件只觸發(fā)一次對(duì)于某些一次性操作比如首次點(diǎn)擊提示特別方便btn.addEventListener(click, showGuide, { once: true });5.2 事件對(duì)象、事件冒泡與事件委托事件處理函數(shù)的第一個(gè)參數(shù)就是事件對(duì)象里面包含了跟這次事件相關(guān)的所有信息目標(biāo)元素、坐標(biāo)、按鍵、時(shí)間戳等。document.addEventListener(click, (event) { console.log(event.target); // 實(shí)際點(diǎn)擊的元素 console.log(event.clientX); // 點(diǎn)擊的 X 坐標(biāo) console.log(event.clientY); // 點(diǎn)擊的 Y 坐標(biāo) console.log(event.type); // click });事件冒泡是指事件從最內(nèi)層的目標(biāo)元素開始逐級(jí)向上傳播到父元素、再傳到 document。如果不了解冒泡你可能會(huì)遇到這種情況點(diǎn)擊列表里某一項(xiàng)結(jié)果整個(gè)列表的點(diǎn)擊事件都觸發(fā)了。實(shí)際項(xiàng)目里冒泡配合“事件委托”反而是個(gè)很好用的模式與其給 100 個(gè)列表項(xiàng)分別綁事件不如只給父容器綁一個(gè)事件通過event.target判斷實(shí)際點(diǎn)的是誰(shuí)const list document.getElementById(list); list.addEventListener(click, (event) { const item event.target.closest(li); if (item) { console.log(點(diǎn)擊了第, item.dataset.index, 項(xiàng)); } });這里用了closest(li)它的作用是向上查找最近的li元素這樣就算用戶點(diǎn)的是li內(nèi)部的文字或圖標(biāo)也能準(zhǔn)確定位到這一項(xiàng)。事件委托的好處是占用的監(jiān)聽器少、內(nèi)存占用低而且后續(xù)動(dòng)態(tài)新增的列表項(xiàng)不需要額外綁定就能響應(yīng)事件。如果你需要阻止冒泡用event.stopPropagation()需要阻止默認(rèn)行為比如跳轉(zhuǎn)、提交刷新頁(yè)面用event.preventDefault()。6. 運(yùn)行時(shí)報(bào)錯(cuò)與調(diào)試別怕報(bào)錯(cuò)怕的是看不懂6.1 高頻報(bào)錯(cuò)類型速查表學(xué)習(xí) JavaScript 的過程中報(bào)錯(cuò)是家常便飯。我把這幾年遇到頻率最高的報(bào)錯(cuò)歸納成一張表方便對(duì)照排查報(bào)錯(cuò)信息含義常見場(chǎng)景解決思路ReferenceError: xxx is not defined變量未聲明拼錯(cuò)變量名、用了未定義的值檢查變量聲明和拼寫TypeError: Cannot read property xxx of undefined在 undefined/null 上讀取屬性異步數(shù)據(jù)未返回、接口字段缺失先判空再用value?.xxx可選鏈SyntaxError: Unexpected token語(yǔ)法錯(cuò)誤少寫括號(hào)、花括號(hào)不配對(duì)、中英文符號(hào)混用看報(bào)錯(cuò)位置附近的代碼檢查括號(hào)TypeError: xxx is not a function調(diào)用了不存在的方法把對(duì)象當(dāng)函數(shù)調(diào)用、方法名拼錯(cuò)確認(rèn)類型和是否存在該方法RangeError: Maximum call stack size exceeded棧溢出無(wú)限遞歸、死循環(huán)檢查遞歸終止條件我自己在調(diào)試時(shí)特別強(qiáng)調(diào)一個(gè)習(xí)慣先看報(bào)錯(cuò)的第一行再看它指出的行號(hào)位置。很多新手一看報(bào)錯(cuò)就慌直接翻代碼從頭看到尾其實(shí)瀏覽器控制臺(tái)已經(jīng)告訴你了問題在哪一行順著查就行。6.2 調(diào)試技巧console、斷點(diǎn)與性能分析console.log當(dāng)然是最常用的調(diào)試方式但它有個(gè)效率問題改一次代碼刷新一次頁(yè)面非常費(fèi)時(shí)間。我的調(diào)試路線是先在控制臺(tái)輸出關(guān)鍵變量確認(rèn)數(shù)據(jù)對(duì)不對(duì)如果還定位不了直接在瀏覽器開發(fā)者工具里打斷點(diǎn)逐步執(zhí)行看每一行的變量變化。打斷點(diǎn)的操作很簡(jiǎn)單在 Sources源代碼面板里找到對(duì)應(yīng)的 JS 文件點(diǎn)擊行號(hào)打上斷點(diǎn)然后刷新頁(yè)面代碼執(zhí)行到這一行就會(huì)停下來(lái)。這時(shí)候可以在右側(cè)的 Scope作用域面板里看到所有變量的當(dāng)前值也可以單步執(zhí)行一行一行走觀察每一步的效果。這個(gè)方法對(duì)排查循環(huán)問題、復(fù)雜函數(shù)內(nèi)部邏輯特別有效比盲目加console.log高效太多。還有一個(gè)我常用的技巧給console.log加上描述前綴方便在多條日志中區(qū)分const userId u_1001; const orderList getOrders(); console.log(當(dāng)前用戶ID:, userId); console.log(訂單列表:, orderList);真到了生產(chǎn)環(huán)境日志可不能隨便打會(huì)影響性能。生產(chǎn)代碼里的調(diào)試信息要么不寫要么通過構(gòu)建工具剔除這是我踩過坑后養(yǎng)成的習(xí)慣——線上頁(yè)面一打開控制臺(tái)幾百條日志排查性能問題的時(shí)候完全分不清哪條是核心信息。7. 實(shí)戰(zhàn)里的高頻細(xì)節(jié)看起來(lái)小用錯(cuò)了很難受7.1 保留兩位小數(shù)到底怎么選“JavaScript 保留兩位小數(shù)”這個(gè)話題在零散問題里一直很熱門因?yàn)槲掖_實(shí)踩過坑。toFixed(2)是很多人第一反應(yīng)但它有個(gè)讓人頭疼的問題返回的是字符串而不是數(shù)字。const price 3.14159; console.log(price.toFixed(2)); // 3.14注意是字符串 console.log(typeof price.toFixed(2)); // string如果你直接拿這個(gè)結(jié)果去做數(shù)值計(jì)算3.14 2會(huì)得到3.142又是一個(gè)隱式轉(zhuǎn)換的坑。所以要么用Number(price.toFixed(2))轉(zhuǎn)回來(lái)要么用更精確的式子const num 3.14159; const rounded Math.round(num * 100) / 100; // 3.14真正的數(shù)字另外toFixed的舍入規(guī)則在某些邊界情況也反直覺比如(1.005).toFixed(2)得到的是1.00而不是1.01原因與浮點(diǎn)數(shù)精度有關(guān)。如果你要做金額計(jì)算我建議用Math.round(value * 100) / 100這個(gè)基礎(chǔ)做法或者直接引入處理精確小數(shù)的庫(kù)無(wú)論如何別依賴toFixed來(lái)做業(yè)務(wù)上的金額舍入判斷。7.2 模板字符串的實(shí)用價(jià)值ES6 的模板字符串用反引號(hào)包裹除了能插值還可以直接寫多行這個(gè)特性在拼 HTML 片段時(shí)特別好用。我寫動(dòng)態(tài)渲染的列表時(shí)經(jīng)常這樣拼模板const users [{ name: 張三, age: 20 }, { name: 李四, age: 22 }]; const listHtml users.map(user li classuser-item span classuser-name${user.name}/span span classuser-age${user.age}歲/span /li ).join(); document.getElementById(userList).innerHTML listHtml;注意拼接數(shù)組時(shí)用了join()不然默認(rèn)會(huì)在每個(gè)元素中間加逗號(hào)生成一堆帶逗號(hào)的 HTML這個(gè)細(xì)節(jié)我第一次寫的時(shí)候也漏了。7.3 字符串綜合處理的常見組合字符串操作用途極廣我整理幾個(gè)高頻組合去首尾空格用trim()判斷是否包含子串用includes()按分隔符拆分用split()把數(shù)組拼回字符串用join()批量替換要用正則加replace()let input hello world ; console.log(input.trim()); // hello world console.log(input.includes(world)); // true console.log(a,b,c.split(,)); // [a, b, c] console.log([a, b].join(-)); // a-b console.log(2025-01-01.replace(/-/g, /)); // 2025/01/01這里replace(/-/g, /)里的g是全局匹配標(biāo)記不加的話只替換第一個(gè)匹配到的-很多人在這里吃過虧。8. 學(xué)習(xí)筆記之外的幾點(diǎn)體會(huì)聊到這兒這份筆記的主體內(nèi)容差不多告一段落。最后分享幾個(gè)我回爐基礎(chǔ)語(yǔ)法后的個(gè)人體會(huì)。第一基礎(chǔ)語(yǔ)法的價(jià)值不在于背下來(lái)多少規(guī)則而在于建立起“遇到問題能判斷它屬于哪一類”的能力。報(bào)錯(cuò)信息是 TypeScript 還是運(yùn)行時(shí)錯(cuò)誤、是類型問題還是作用域問題、是同步邏輯還是異步時(shí)序問題這些分類能力全靠對(duì)基礎(chǔ)的熟悉程度。我在實(shí)際開發(fā)里排查問題的速度明顯快于同事不是因?yàn)槲衣斆鞫且驗(yàn)槲乙娺^這些坑、知道它們大概率出現(xiàn)在哪兒。第二寫代碼時(shí)永遠(yuǎn)不要指望 JavaScript 幫你“猜意圖”。、隱式轉(zhuǎn)換、var提升這些特性任何一次“圖省事”的使用都可能在某次重構(gòu)或者數(shù)據(jù)異常時(shí)變成回旋鏢。用顯式轉(zhuǎn)換、用、用let/const這些習(xí)慣一開始可能覺得繁瑣但長(zhǎng)期算下來(lái)省下的排查時(shí)間遠(yuǎn)大于多敲的那幾個(gè)字符。第三如果這份筆記里的代碼示例你能不看答案自己寫一遍再刻意改幾個(gè)參數(shù)觀察結(jié)果變化那學(xué)習(xí)效果會(huì)比單純“看懂”好很多。我?guī)н^的每一個(gè)上手快的新人共同特點(diǎn)都是愿意親手敲代碼、親手制造 bug、再親手解決 bug?；A(chǔ)語(yǔ)法沒有捷徑但它也不需要你死記硬背多寫多踩坑自然就熟了。