JS基礎(chǔ)這一塊我估計是每個前端人都繞不過去的坎。哪怕你后面用了再多的框架Vue、React、Angular繞來繞去最后啃的其實還是原生JavaScript這顆硬骨頭。我在帶團隊的時候發(fā)現(xiàn)一個規(guī)律基礎(chǔ)語法扎實的人看框架源碼就像看小說遇到bug也能快速定位基礎(chǔ)不牢的光一個this指向問題就能折騰一上午。這篇筆記是我自己整理的核心知識點加上這些年踩過的坑希望能幫新手捋順思路也能幫進階的朋友查漏補缺。1. 數(shù)據(jù)類型與類型判斷從底層邏輯到面試高頻坑1.1 基礎(chǔ)數(shù)據(jù)類型詳解JavaScript里數(shù)據(jù)類型分兩大類原始類型Primitive和引用類型Reference。原始類型有七種string、number、boolean、null、undefined、symbol、bigint。引用類型主要就是object包括array、function、date、regexp、map、set這些。這里有個非常容易踩坑的點typeof null返回的是object這是個歷史遺留bug從ES1時代就存在官方也沒打算修。所以判斷null不能依賴typeof要用Object.prototype.toString.call()或者直接 null。再說說number類型。它不是純粹的整數(shù)或浮點數(shù)是雙精度64位二進制浮點格式。最經(jīng)典的坑就是0.1 0.2 ! 0.3這個不用多講了。實際開發(fā)中遇到金額計算我一般建議用整數(shù)分來算或者引入decimal.js這類庫。NaN也很特殊typeof NaN返回number但NaN NaN是false。判斷NaN我用Number.isNaN()而不是全局的isNaN()因為后者會把字符串也轉(zhuǎn)換了再判斷容易誤判。1.2 typeof與instanceof的適用邊界typeof適合判斷原始類型但區(qū)分不了具體對象類型。instanceof適合判斷引用類型但有個問題它能沿著原型鏈往上找。所以如果你有跨iframe的場景instanceof可能失效。我給個經(jīng)驗結(jié)論判斷字符串、數(shù)字、布爾、undefined、symbol、bigint用typeof判斷null用value null判斷數(shù)組用Array.isArray(value)判斷純對象用Object.prototype.toString.call(value) [object Object]判斷日期用value instanceof Date配合!isNaN(value.getTime())1.3 動態(tài)類型與隱式轉(zhuǎn)換的避坑指南JS是動態(tài)類型語言變量可以隨意賦不同類型的值。這帶來靈活性的同時也帶來一堆隱式轉(zhuǎn)換的坑。核心規(guī)則運算符如果任一側(cè)是字符串就做字符串拼接其他運算符盡量會把兩邊轉(zhuǎn)成數(shù)字。會做類型轉(zhuǎn)換不做。我強烈建議項目里全局禁用ESLint規(guī)則eqeqeq打開省去一堆破事。還有一個常見場景if判斷里0、空字符串、null、undefined、NaN、false都會被轉(zhuǎn)成false。所以if (someString)這種寫法要小心空字符串也會走false分支。嚴謹?shù)呐袛鄳?yīng)該是if (typeof someString string someString.length 0)。2. 函數(shù)與作用域理解閉包和執(zhí)行上下文的本質(zhì)2.1 函數(shù)聲明、函數(shù)表達式與立即執(zhí)行函數(shù)函數(shù)有三種常見的定義方式它們之間有微妙差異。函數(shù)聲明會提升hoisting函數(shù)表達式不會。提升的意思是在代碼執(zhí)行前解析階段就把函數(shù)名和函數(shù)體綁到了當前作用域頂部。所以可以這樣// 函數(shù)聲明可以提前調(diào)用 sayHello(); // 正常運行 function sayHello() { console.log(hello); } // 函數(shù)表達式會報錯sayHi是undefined sayHi(); // TypeError: sayHi is not a function var sayHi function() { console.log(hi); };因為var聲明的變量會提升聲明但不會提升賦值所以調(diào)用時是undefined自然報錯。立即執(zhí)行函數(shù)IIFE的寫法我常用兩種(function(){ ... })()和(function(){ ... }())。作用就一個創(chuàng)建一個獨立的作用域不污染外部?，F(xiàn)在有了塊級作用域let和constIIFE用得少了但在一些老代碼和某些工具庫封裝里還是會見到。2.2 閉包的形成機制與應(yīng)用場景閉包是JS中一個繞不開的概念。簡單說如果一個函數(shù)能訪問其外部函數(shù)作用域中的變量那么這個函數(shù)和它引用變量的組合就是閉包。形成閉包有幾個必要條件函數(shù)嵌套函數(shù)、內(nèi)部函數(shù)引用外部變量、內(nèi)部函數(shù)被保留下引用。比如function counter() { let count 0; return function() { count; return count; }; } const c1 counter(); const c2 counter(); console.log(c1()); // 1 console.log(c1()); // 2 console.log(c2()); // 1c1和c2各自獨立的count這里最有意思的細節(jié)是每調(diào)用一次counter()會創(chuàng)建一份全新的作用域count不再共享。這也是為什么閉包常被用來做數(shù)據(jù)私有化。閉包有個性能隱患就是變量無法被垃圾回收因為引用鏈一直存在。所以如果一個閉包長期掛在全局變量上它捕獲的對象會一直存活。我一般會建議用完的閉包引用置為null幫GC一把。2.3 作用域鏈與let/const/var的本質(zhì)差異作用域鏈的查找規(guī)則是當前作用域找不到就向上一級找直到全局。全局再找不到非嚴格模式就隱式創(chuàng)建全局變量這會污染window嚴格模式直接報錯。var是函數(shù)作用域let和const是塊級作用域。塊級作用域包括if、for、while這些{}包裹的區(qū)域。if (true) { var a 1; let b 2; } console.log(a); // 1 console.log(b); // ReferenceError: b is not definedvar還有個坑在for循環(huán)里用var聲明的循環(huán)變量會泄漏到循環(huán)外面而且所有異步回調(diào)共享同一個變量。用let就沒這個問題因為每次迭代都會創(chuàng)建新的綁定。這是閉包經(jīng)典面試題的本質(zhì)解法。2.4 this指向規(guī)則與箭頭函數(shù)的例外this的指向在普通函數(shù)里由調(diào)用方式?jīng)Q定有五種規(guī)則默認綁定獨立調(diào)用非嚴格模式指向全局對象嚴格模式是undefined隱式綁定作為對象方法調(diào)用時指向這個對象顯式綁定call、apply、bind指定thisnew綁定構(gòu)造函數(shù)里this指向新創(chuàng)建的對象綁定優(yōu)先級new 顯式 隱式 默認箭頭函數(shù)沒有自己的this它繼承外層作用域的this。這個特性讓它特別適合用在回調(diào)函數(shù)里不用再寫var self this那套了。const obj { name: demo, init() { setTimeout(() { console.log(this.name); // demo箭頭函數(shù)繼承init的this }, 100); } };但如果箭頭函數(shù)在全局作用域定義this就是全局對象嚴格模式下也是全局對象。這個要注意區(qū)分。3. 運算符與流程控制表達式計算的優(yōu)先級陷阱3.1 算術(shù)、比較、邏輯運算符的實際運用算術(shù)運算符里最復(fù)雜涉及字符串拼接和數(shù)字相加的判斷。和--有前后綴差異前綴先自增再返回值后綴先返回值再自增。這個在寫循環(huán)或者計數(shù)器的時候容易出邊界問題。比較運算符有個經(jīng)典場景比較對象時會先調(diào)用對象的valueOf()或toString()方法再比較。所以兩個對象不管內(nèi)容是否一樣用或比較都是false因為比較的是內(nèi)存引用地址。邏輯運算符返回的不一定是布爾值它返回的是操作數(shù)的值。和||是短路運算const result a || defaultValue; // 如果a是假值返回defaultValue const value obj obj.name; // 如果obj是空返回undefined避免報錯??空值合并運算符是ES2020新增的它只在左側(cè)是null或undefined時返回右側(cè)值不會像||那樣把0、空字符串也替換掉。這個區(qū)別很實用。3.2 保留兩位小數(shù)與運算符優(yōu)先級處理浮點數(shù)保留兩位小數(shù)我之前常被問。toFixed(2)是最簡單的但有個坑它返回的是字符串且四舍五入行為和預(yù)期可能不一致底層是浮點數(shù)精度問題。如果只是展示用還好做計算還是得小心。更穩(wěn)妥的做法function roundToTwo(num) { return Math.round((num Number.EPSILON) * 100) / 100; }Number.EPSILON是用來修正浮點數(shù)誤差的加上它再四舍五入結(jié)果更符合直覺。運算符優(yōu)先級方面最容易出問題的是優(yōu)先級高于||賦值運算符優(yōu)先級極低。還有三元運算符?:的嵌套可讀性很差我一般建議嵌套超過兩層就改寫為if分支。表達式里的分號自動插入ASI機制也值得提一句。雖然JS引擎會自動補分號但某些場景它的策略和你想的不一樣。比如function demo() { return { ok: true }; } // 實際返回undefined因為return后面自動補了分號這種“return換行導(dǎo)致bug”的問題我踩過好機會后來習慣在return后把{放在同一行。3.3 解構(gòu)賦值與展開運算符的進階用法解構(gòu)賦值真的是提升代碼可讀性的利器。數(shù)組解構(gòu)支持默認值、跳過元素、剩余元素const [first, , third, ...rest] [1, 2, 3, 4, 5]; console.log(first); // 1 console.log(third); // 3 console.log(rest); // [4, 5]對象解構(gòu)支持重命名和默認值const { name: username default, age 18 } person;展開運算符可以用來做淺拷貝const copy [...arr]、const objCopy {...obj}。但記住只是淺拷貝嵌套對象還是共享引用。有個小技巧合并對象時Object.assign({}, a, b)和{...a, ...b}在功能上等價但后者更簡潔。如果屬性值是undefined前者會忽略后者也會忽略在對象字面量展開時。4. 事件機制從DOM事件流到委托與自定義事件4.1 DOM事件流的三個階段事件在瀏覽器里從window出發(fā)經(jīng)過目標元素再返回window形成三個階段捕獲階段、目標階段、冒泡階段。addEventListener的第三個參數(shù)如果傳true或{ capture: true }就是在捕獲階段觸發(fā)默認是false在冒泡階段觸發(fā)。我實際工作中大部分場景都在冒泡階段處理事件因為它更符合一般的交互直覺。但focus、blur等事件是不冒泡的如果需要在捕獲階段處理就要用addEventListener配合true。4.2 事件委托的性能與正確姿勢事件委托核心原理是利用事件冒泡把事件監(jiān)聽器掛到父元素上通過event.target判斷實際觸發(fā)元素。這有兩個好處性能好監(jiān)聽器少、動態(tài)元素無需重復(fù)綁定。document.querySelector(#list).addEventListener(click, (event) { const target event.target.closest(li); if (!target) return; console.log(target.dataset.id); });這里用closest(li)而不是target.tagName LI是為了處理用戶點到li里面的span這類子元素的情況。closest會向上查找匹配選擇器更健壯。4.3 Event對象常用屬性與自定義事件event對象里我經(jīng)常用的屬性target實際事件源、currentTarget當前綁定監(jiān)聽器的元素、eventPhase當前階段、preventDefault()阻止默認行為、stopPropagation()阻止冒泡、stopImmediatePropagation()阻止冒泡且阻止同元素上其他監(jiān)聽器執(zhí)行。自定義事件開發(fā)中很有用尤其做組件通信const event new CustomEvent(refresh, { detail: { id: 1 } }); element.dispatchEvent(event);配合detail字段傳數(shù)據(jù)比全局事件總線干凈得多。4.4 瀏覽器事件循環(huán)setTimeout與Promise的執(zhí)行順序事件循環(huán)是理解異步代碼執(zhí)行順序的鑰匙。宏任務(wù)macrotask和微任務(wù)microtask是兩個隊列。每次執(zhí)行完一個宏任務(wù)都會清空微任務(wù)隊列再取下一個宏任務(wù)。setTimeout(() console.log(timeout), 0); Promise.resolve().then(() console.log(promise)); console.log(sync); // 輸出順序sync - promise - timeout微任務(wù)包括Promise.then、MutationObserver、queueMicrotask。渲染和事件處理都發(fā)生在宏任務(wù)之間。所以如果你有數(shù)據(jù)變化的通知放在微任務(wù)里能保證在下次渲染前執(zhí)行。注意事項嵌套的setTimeout層層加深度可能觸發(fā)瀏覽器的嵌套定時器最小間隔限制5ms但Promise的微任務(wù)沒有這個限制所以某些循環(huán)用微任務(wù)效率更高。5. 異步編程從回調(diào)地獄到Promise和async/await5.1 Promise的三種狀態(tài)與鏈式調(diào)用Promise對象有三種狀態(tài)pending進行中、fulfilled已完成、rejected已失敗。狀態(tài)只能從pending轉(zhuǎn)變到其他兩個一旦轉(zhuǎn)變就不可逆。鏈式調(diào)用的核心規(guī)矩then或catch都會返回新的Promise所以可以無限鏈下去。then回調(diào)里如果拋異常會被下一個catch捕獲如果返回普通值會被下一個then接收。一個容易被忽略的點如果then回調(diào)里返回一個Promise下一個then會等這個Promise resolve后再執(zhí)行相當于展平了一層異步嵌套。5.2 async/await錯誤處理的關(guān)鍵技巧async函數(shù)其實就是生成器加Promise的語法糖。await會暫停函數(shù)執(zhí)行等待Promise settled后再繼續(xù)。它讓異步代碼看起來像同步代碼但要注意并發(fā)問題。我見過很多項目在請求數(shù)據(jù)時多個相互獨立的請求用了串聯(lián)的await白白浪費了大量等待時間。正確做法是用Promise.allconst [users, posts] await Promise.all([ fetch(/users), fetch(/posts) ]);錯誤處理方面try/catch配合await是基本操作。但還有個技巧await一個被rejected的Promise異常會被拋出如果沒有try/catch包裹會變成unhandledrejection可能靜默失敗。所以規(guī)范做法是每個await路徑都要有兜底或者在函數(shù)內(nèi)部統(tǒng)一catch后轉(zhuǎn)成正常返回值。5.3 并發(fā)控制與Promise.allSettledPromise.all有個缺陷只要有一個rejected整個Promise直接變成rejected其他結(jié)果都拿不到。如果某個請求失敗你就全丟了。這時候用Promise.allSettled更適合const results await Promise.allSettled([p1, p2, p3]); // results里每項是 {status: fulfilled, value} 或 {status: rejected, reason}還有Promise.race只取最快的那個結(jié)果常用于超時控制const withTimeout Promise.race([ fetch(/data), new Promise((_, reject) setTimeout(() reject(new Error(timeout)), 5000)) ]);注意timer要clearTimeout清理不然定時器還會觸發(fā)只是reject被忽略了而已。6. 運行時報錯排查與console調(diào)試技巧6.1 常見運行時錯誤分類前端錯誤大致分幾類語法錯誤代碼無法解析整個腳本都不會執(zhí)行引用錯誤ReferenceError變量未定義或不在作用域類型錯誤TypeError訪問了undefined的屬性、調(diào)用了不是函數(shù)的東西范圍錯誤RangeError數(shù)組長度非法、棧溢出自定義錯誤類可以用throw new Error(xxx)主動拋出有一個高頻錯誤Cannot read properties of undefined (reading xxx)。排查思路是找到哪個對象是undefined往上回溯它的賦值來源。我會在懷疑點用console.log或debugger打斷點逐步確認。6.2 console全家桶的實用姿勢console.log就不說了。其他幾個很有用console.log(%c..., color:#f00;font-size:20px)帶顏色輸出排查分組信息很方便console.table(arr)把數(shù)組或?qū)ο笠员砀裥问酱蛴】唇Y(jié)構(gòu)化數(shù)據(jù)一目了然console.time/console.timeEnd測代碼塊執(zhí)行時間console.trace()打印調(diào)用棧比log更強大能查到函數(shù)是哪里被調(diào)用的console.assert(false, msg)條件為false時打印消息適合在循環(huán)里做斷言6.3 瀏覽器開發(fā)者工具Sources斷點調(diào)試用斷點調(diào)試比console.log效率高很多。在Sources面板里點擊行號即可打斷點。然后重點關(guān)注幾個面板Scope面板查看當前作用域變量、閉包變量Call Stack面板查看完整調(diào)用棧有助于定位調(diào)用源頭Watch面板添加你關(guān)注的表達式實時變化一目了然條件斷點很實用比如想要在count大于5時才斷住右鍵斷點編輯條件count 5即可省去大量手動跳過干擾步驟。7. 常用開發(fā)工具與瀏覽器API擴展7.1 嚴格模式與ESLint的必要性文件頂部寫use strict;或者通過ESM模塊天然啟用嚴格模式后JS會避免一些靜默錯誤未聲明變量直接賦值會報錯、this在全局不再指向window、delete不可刪除屬性會報錯。配合ESLint建議規(guī)則集equeeq禁用、no-var禁用var、no-unused-vars禁未使用變量、prefer-const優(yōu)先const。這些規(guī)則能攔截很多低級錯誤。7.2 JSON序列化與深拷貝的實現(xiàn)處理JSON字符串時有個經(jīng)典坑JSON.stringify遇到undefined、函數(shù)、symbol值會直接跳過這些屬性。NaN和Infinity會變成null。所以不能把JSON當普通對象的通用序列化方式。深拷貝除了引庫或JSON.parse(JSON.stringify(obj))外有局限不支持Date、RegExp、循環(huán)引用可以用structuredClone支持循環(huán)引用和更多類型。它是瀏覽器原生API能在window和worker之間傳遞數(shù)據(jù)對性能要求高的場景可以開transfer列表。7.3 瀏覽器存儲方案對比cookies、localStorage與IndexedDB本地存儲常用的三種特性localStoragesessionStoragecookie大小約5MB約5MB約4KB生命周期永久除非清除標簽頁關(guān)閉即清除根據(jù)expires/Max-Age請求自動攜帶否否是同域數(shù)據(jù)格式字符串字符串字符串cookie會自動附加到請求頭所以盡量只存會話標識不要存業(yè)務(wù)數(shù)據(jù)。localStorage是同步的寫入大量數(shù)據(jù)時可能阻塞主線程。IndexedDB是異步的適合存儲結(jié)構(gòu)化大對象。讀取localStorage有個注意點鍵不存在時返回null讀取的結(jié)果要用JSON.parse并包一層try/catch因為一旦數(shù)據(jù)損壞或被篡改解構(gòu)會直接拋異常應(yīng)用直接崩潰。8. 瀏覽器兼容性實踐從差異化封裝到構(gòu)建降級8.1 兼容性判斷基礎(chǔ)判斷一個API能不能用標準做法是查Can I Use或直接看MDN的瀏覽器兼容性表。但日常開發(fā)時工具鏈的處理可能更高效Babel把ES6語法轉(zhuǎn)成ES5但要明白語法能轉(zhuǎn)API問題它管不了。Promise、Array.from這些需要polyfill打包工具會把代碼轉(zhuǎn)換成目標瀏覽器能跑的樣子但targets配置對了才有效8.2 特性檢測代替瀏覽器檢測一個正確的思路是“特性檢測”而非“瀏覽器版本檢測”。比如判斷是否支持IntersectionObserver做懶加載if (IntersectionObserver in window) { // 新瀏覽器 } else { // 老瀏覽器 }不推薦用navigator.userAgent判斷因為字符串可以被篡改而且新版本瀏覽器特征一直在變。用特性檢測寫出來的代碼天然就更面向未來。9. Canvas與基礎(chǔ)算法從圖形繪制到性能調(diào)優(yōu)9.1 Canvas基礎(chǔ)繪制流程Canvas的起點很簡單獲取2D上下文然后開始繪制。const canvas document.getElementById(myCanvas); const ctx canvas.getContext(2d); ctx.fillStyle #3498db; ctx.fillRect(50, 50, 100, 100);但有個細節(jié)坑canvas的寬高屬性和CSS寬高不一樣。如果只想用CSS控制顯示大小必須同時設(shè)置canvas.width和height與CSS一致否則會出現(xiàn)畫布內(nèi)容模糊或被拉伸問題。繪制路徑beginPath、moveTo、lineTo、closePath、stroke或fill。beginPath之后別忘了每次重繪時清屏最常見的動畫污染問題是沒調(diào)用clearRect導(dǎo)致上一幀的圖像殘留。用requestAnimationFrame做動畫它比setInterval更平滑且能跟隨顯示刷新率。同時注意requestAnimationFrame在每個宏任務(wù)里只會執(zhí)行一次如果在里面又注冊一幀還能繼續(xù)下一幀循環(huán)。9.2 高頻操作的數(shù)據(jù)結(jié)構(gòu)與算法基礎(chǔ)寫交互組件時數(shù)據(jù)結(jié)構(gòu)的選擇直接影響性能。常見場景大量列表篩選用filter遍歷沒問題但如果超過萬級用Set或Map做索引更快防抖與節(jié)流防抖是等用戶停止輸入再執(zhí)行節(jié)流是固定時間間隔執(zhí)行一次。這兩種都是性能優(yōu)化里非?；A(chǔ)的模式function debounce(fn, wait) { let timer null; return function(...args) { clearTimeout(timer); timer setTimeout(() fn.apply(this, args), wait); }; }深比較如果對象層級復(fù)雜沒必要手寫用JSON.stringify比較粗略可以但屬性順序不同會導(dǎo)致誤判。更嚴謹?shù)氖沁f歸比較每個屬性。9.3 跨平臺開發(fā)中的JavaScript運行環(huán)境差異JavaScript不只跑在瀏覽器里。Node.js環(huán)境里沒有window、document而是有process、Buffer。有些桌面開發(fā)框架中渲染進程和主進程之間通信也和瀏覽器不同。還有一個“運行環(huán)境差異”的典型場景Object的遍歷順序。整數(shù)鍵按升序遍歷字符串鍵按插入順序遍歷symbol鍵最后。這套規(guī)則在Node和瀏覽器里一致但跨引擎如果實現(xiàn)差異就容易出bug。遇到跨環(huán)境代碼建議每個環(huán)境都做一遍冒煙測試尤其注意typeof window undefined的判斷用來區(qū)分瀏覽器和Node。10. 框架與工具鏈視角如何反哺基礎(chǔ)語法10.1 框架外的JavaScript依然要掌握的核心API現(xiàn)在很多開發(fā)者一上來就學框架忽略了原生能力。但無論什么框架底層都依賴這些APIObject.keys/Object.values/Object.entries遍歷對象的三種方式Array.prototype.map/filter/reduce/forEach函數(shù)式操作數(shù)據(jù)String.prototype.includes/startsWith/padStart字符串處理URLSearchParams讀寫URL參數(shù)FormData處理表單提交這些API是框架的基石也是面試里逃不過的重點。刷一遍文檔再結(jié)合小項目用一用基本上就能融會貫通。10.2 組件化開發(fā)中如何利用基礎(chǔ)語法優(yōu)化狀態(tài)管理狀態(tài)管理無論用什么庫本質(zhì)還是JavaScript對象和數(shù)組的變更檢測。有些框架依賴數(shù)據(jù)劫持Vue的reactive有些靠不可變數(shù)據(jù)React的setState。如果你用React理解不可變更新很重要不能直接修改state對象里的屬性要返回新對象。這里用展開運算符就比深拷貝高效setState(prev ({ ...prev, field: newValue }));如果你用Vue要小心響應(yīng)式丟失用索引直接修改數(shù)組項、添加新的對象屬性可能不會被偵測到。正確姿勢是用Vue.set或$set或者干脆整體替換。10.3 框架時代為什么還要夯實基礎(chǔ)我經(jīng)常和新同事說框架能幫你解決80%的重復(fù)勞動但剩下的20%——性能優(yōu)化、復(fù)雜交互、內(nèi)核級調(diào)試——必需原生JavaScript的功底。很多框架的源碼其實都是原生語法的高級運用比如Vue的Object.defineProperty和Proxy的配合、React的鏈表結(jié)構(gòu)調(diào)度。你如果連Object.defineProperty的特性都不清楚讀源碼就像在看天書。另外無論是npm install的依賴升級還是底層API的兼容降級都有可能需要手動處理原生暴露出來的差異?；A(chǔ)語法越扎實處理這些邊界情況時就越從容。寫在最后的一些體會回頭再看這份筆記我刪掉了很多教科書式的贅述盡量把每個知識點都和我實際寫代碼時踩過的坑掛鉤。尤其是數(shù)據(jù)類型判斷、事件委托、異步并發(fā)、Canvas寬度設(shè)置、Object.defineProperty響應(yīng)式這些幾乎每個月都會在項目里遇到相關(guān)的問題。基礎(chǔ)語法從來不是背出來的是在寫代碼、出bug、修bug的過程中慢慢內(nèi)化的。如果這份筆記能幫你少走幾個彎路或者在工作里理清某個模糊點我就覺得值了。JS這條路很長保持好奇多敲多練才是唯一的捷徑。