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