學(xué)JS學(xué)到第三個(gè)階段最大的感受是基礎(chǔ)語法只是門檻真正決定你能不能獨(dú)立寫業(yè)務(wù)邏輯的是函數(shù)、原型鏈、事件循環(huán)這一層的東西。這篇學(xué)習(xí)筆記三整理的是我這周從字符串與數(shù)組的高頻操作包含判斷、忽略大小寫、排序、遍歷中斷、函數(shù)進(jìn)階、原型鏈、事件循環(huán)再到串起來做的小案例的全過程。如果你也處在“看得懂語法、寫不出邏輯”的階段這篇應(yīng)該能給你一些參考少走點(diǎn)我踩過的彎路。1. 字符串與數(shù)組先把最容易踩坑的兩個(gè)基礎(chǔ)夯實(shí)字符串和數(shù)組是JS里用得最頻繁的兩類數(shù)據(jù)結(jié)構(gòu)但正因?yàn)樘Ｓ梅炊泻芏嗉?xì)節(jié)被一帶而過。這周我集中把幾個(gè)高頻操作翻出來重新捋了一遍才發(fā)現(xiàn)之前的代碼里藏著不少隱患。1.1 判斷字符串包含includes、indexOf與正則誰更合適判斷一個(gè)字符串里有沒有另一個(gè)子串日常見到的大概有四種寫法includes、indexOf、search、正則的test。我之前的習(xí)慣是拿起indexOf就用后來才發(fā)現(xiàn)它們之間差異還挺大。const str Hello JavaScript World; // includes返回布爾值語義最直白 str.includes(JavaScript); // true str.includes(javascript); // false大小寫敏感 // indexOf返回下標(biāo)找不到返回 -1 str.indexOf(Script); // 7 str.indexOf(script); // -1 // search接受正則返回下標(biāo) str.search(/Script/); // 7 str.search(/script/i); // 7 // RegExp.test正則匹配返回布爾值 /JavaScript/.test(str); // true這里有個(gè)容易翻車的點(diǎn)includes和indexOf不能直接傳正則傳進(jìn)去會(huì)被當(dāng)成普通字符串處理。比如str.includes(/Script/)實(shí)際查詢的是字符串/Script/結(jié)果永遠(yuǎn)是false。如果匹配規(guī)則稍微復(fù)雜一點(diǎn)比如忽略大小寫、匹配多個(gè)關(guān)鍵詞直接用正則的test或者search更合理。還要留意indexOf的判空邏輯。新手最容易寫出if (str.indexOf(abc))這種判斷當(dāng)子串恰好出現(xiàn)在下標(biāo)0的位置時(shí)indexOf返回0被轉(zhuǎn)成false判斷就反了。正確寫法是if (str.indexOf(abc) ! -1)。這個(gè)坑看著小線上代碼里真不少見我們項(xiàng)目里就出過一次搜索關(guān)鍵詞排在第一位時(shí)死活不進(jìn)業(yè)務(wù)邏輯。1.2 忽略大小寫統(tǒng)一大小寫和正則/i兩種思路各有適應(yīng)場(chǎng)景熱搜詞里那個(gè)“js忽略大小寫”我猜是指判斷字符串時(shí)不想?yún)^(qū)分大小寫。做法有兩種一種是把兩邊都轉(zhuǎn)成同樣的大小寫再比較另一種是正則加i標(biāo)志。// 方式一統(tǒng)一轉(zhuǎn)小寫 const a Hello; const b hello; a.toLowerCase() b.toLowerCase(); // true // 方式二正則忽略大小寫 /^hello$/i.test(Hello); // true實(shí)際項(xiàng)目中哪種方式更好取決于場(chǎng)景。如果是兩個(gè)變量之間的比較比如用戶名去重、關(guān)鍵詞匹配統(tǒng)一轉(zhuǎn)小寫最直觀不會(huì)引入正則的額外心智負(fù)擔(dān)。如果是表單校驗(yàn)比如驗(yàn)證郵箱、手機(jī)號(hào)格式用帶i的正則更靈活因?yàn)榭梢皂槑О迅袷揭黄痱?yàn)證了。有一個(gè)性能上的經(jīng)驗(yàn)如果在一個(gè)大循環(huán)里反復(fù)做忽略大小寫的比較盡量提前把要比較的字段轉(zhuǎn)換好而不是每次循環(huán)里調(diào)用toLowerCase。比如一萬條數(shù)據(jù)做查重循環(huán)里臨時(shí)轉(zhuǎn)換會(huì)產(chǎn)生大量中間字符串GC壓力會(huì)增加不少。我自己寫過一段導(dǎo)出篩選功能明明就是個(gè)大小寫匹配的問題剛開始沒注意一次性處理兩萬行數(shù)據(jù)時(shí)頁面直接卡頓改成預(yù)處理后才順暢。1.3 數(shù)組排序sort的字典序陷阱和幾種手寫排序數(shù)組排序估計(jì)每個(gè)人都寫過但sort()的默認(rèn)行為很容易讓人措手不及。JS的sort默認(rèn)把元素轉(zhuǎn)成字符串按UTF-16碼元順序排不是按數(shù)值大小排。const nums [3, 30, 10, 2]; nums.sort(); // 結(jié)果 [10, 2, 3, 30]因?yàn)槭前醋址诺?nums.sort((a, b) a - b); // 結(jié)果 [2, 3, 10, 30]比較函數(shù)返回負(fù)值、零、正值分別代表a排在b前、不變、a排在b后。這里我習(xí)慣寫(a, b) a - b而不是(a b ? 1 : -1)因?yàn)榍罢吒?jiǎn)潔也不容易漏掉相等時(shí)返回0的情況。ES2019之后引擎的sort是穩(wěn)定排序相同元素的相對(duì)位置不會(huì)變?nèi)ブ鼗蚨闻判驎r(shí)可以放心用。除了sort我還把幾種基礎(chǔ)排序手寫了一遍不是為了項(xiàng)目里用是為了理解排序的底層邏輯。// 冒泡排序 function bubbleSort(arr) { const result [...arr]; for (let i 0; i result.length - 1; i) { for (let j 0; j result.length - 1 - i; j) { if (result[j] result[j 1]) { [result[j], result[j 1]] [result[j 1], result[j]]; } } } return result; } // 快速排序簡(jiǎn)化版 function quickSort(arr) { if (arr.length 1) return arr; const pivot arr[0]; const left arr.slice(1).filter(item item pivot); const right arr.slice(1).filter(item item pivot); return [...quickSort(left), pivot, ...quickSort(right)]; }手寫排序最大的價(jià)值是理解復(fù)雜度。比如冒泡是O(n2)數(shù)據(jù)量一大就秒掛快排平均O(n log n)但簡(jiǎn)化版每次filter會(huì)新建數(shù)組空間占用偏高。實(shí)際開發(fā)中絕大多數(shù)場(chǎng)景直接用sort就好不需要自己實(shí)現(xiàn)。有一類情況例外排序時(shí)依賴某個(gè)異步結(jié)果或者排序規(guī)則需要從接口動(dòng)態(tài)獲取那時(shí)候就得自己寫排序邏輯或者先拉數(shù)據(jù)再排序。順手說一個(gè)洗牌算法。熱搜里有“js撲克牌”其實(shí)就是在問隨機(jī)打亂。很多人會(huì)寫成arr.sort(() Math.random() - 0.5)這種做法雖然能用但分布不均勻V8引擎早就有人驗(yàn)證過。要均勻洗牌用Fisher-Yatesfunction shuffle(arr) { const result [...arr]; for (let i result.length - 1; i 0; i--) { const j Math.floor(Math.random() * (i 1)); [result[i], result[j]] [result[j], result[i]]; } return result; }1.4 forEach打斷return不行那就some、every或者干脆換循環(huán)“js foreach 打斷”這個(gè)熱搜算是初學(xué)者集體困惑榜前列了。forEach里寫break會(huì)直接報(bào)錯(cuò)Illegal break statement寫return只是跳過當(dāng)前這一次迭代并沒有真正中斷循環(huán)。很多人試過之后產(chǎn)生一個(gè)誤解forEach不能中斷。準(zhǔn)確說是JavaScript原生forEach沒有提供中斷機(jī)制因?yàn)樵O(shè)計(jì)上它就是for循環(huán)的簡(jiǎn)化版故意不支持break。想中斷遍歷有幾個(gè)常見方案// 方案一用for...of這是最直接的替代 for (const item of list) { if (item.id targetId) break; } // 方案二用some回調(diào)返回true就停止 list.some(item { if (item.id targetId) return true; }); // 方案三用every回調(diào)返回false就停止 list.every(item { if (item.id targetId) return false; return true; }); // 方案四用find找到直接拿值 const found list.find(item item.id targetId);我自己的習(xí)慣是只需要遍歷副作用就優(yōu)先考慮for...of需要拿第一個(gè)符合條件的元素就用find/findIndex。some/every雖然能中斷但語義讀起來有點(diǎn)繞——some的本意是“是否存在一個(gè)”拿它當(dāng)中斷工具會(huì)讓同事困惑。還有用try/catch拋異常中斷的寫法理論可行但會(huì)讓代碼看起來很怪除非特殊場(chǎng)景否則不推薦。2. 函數(shù)進(jìn)階回調(diào)、this與閉包難啃但繞不過去函數(shù)是JS的一等公民理解到不到位直接決定你能不能看懂別人的代碼。這一周我重點(diǎn)補(bǔ)了this指向、閉包和定時(shí)器回調(diào)發(fā)現(xiàn)很多困惑其實(shí)是這幾個(gè)概念疊加在一起造成的。2.1 函數(shù)聲明、箭頭函數(shù)和this指向別等調(diào)錯(cuò)才回頭看this的指向問題可以說是JS新手的第一個(gè)勸退點(diǎn)。我之前一直靠“誰調(diào)用就指向誰”來記后來發(fā)現(xiàn)不夠用尤其碰到箭頭函數(shù)。const obj { name: demo, log() { console.log(this.name); // 普通函數(shù)this指向obj }, arrowLog: () { console.log(this.name); // 箭頭函數(shù)this指向外層這里可能是undefined或globalThis } };普通函數(shù)的this在調(diào)用時(shí)才確定箭頭函數(shù)則是在定義時(shí)捕獲外層作用域的this之后無論怎么調(diào)用都不會(huì)變。這個(gè)特性在實(shí)際項(xiàng)目中很有用比如在setInterval回調(diào)里想訪問外層對(duì)象的屬性class Timer { constructor() { this.count 0; // 用箭頭函數(shù)this永久指向Timer實(shí)例 setInterval(() { this.count; }, 1000); } }如果這里用普通函數(shù)this會(huì)變成全局對(duì)象或undefined嚴(yán)格模式下count就更新不了了。以前老項(xiàng)目里常見解決方案是var self this;然后把self存起來用箭頭函數(shù)普及后這個(gè)方案基本退役了。另外別搞混call/apply/bind。三者都能手動(dòng)指定thiscall和apply是立即調(diào)用區(qū)別只在傳參方式bind則是返回一個(gè)綁定了this的新函數(shù)不立即執(zhí)行。方法需要作為回調(diào)傳給別處時(shí)bind最常見。function greet(greeting) { console.log(greeting this.name); } const user { name: Tom }; greet.call(user, Hello); // Hello Tom greet.apply(user, [Hi]); // Hi Tom const bound greet.bind(user, Hey); bound(); // Hey Tom2.2 閉包就是函數(shù)記住了外部變量防抖、節(jié)流和循環(huán)陷阱閉包這個(gè)概念被包裝得有點(diǎn)神秘說白了就是函數(shù)定義時(shí)所在的詞法作用域被保存下來了外部變量不會(huì)隨函數(shù)執(zhí)行結(jié)束而消失。最典型的使用場(chǎng)景是防抖和節(jié)流。function debounce(fn, delay 300) { let timer null; return function(...args) { if (timer) clearTimeout(timer); timer setTimeout(() { fn.apply(this, args); }, delay); }; } // 用法 const onSearch debounce(keyword { console.log(請(qǐng)求搜索, keyword); }, 500);每次調(diào)用onSearch時(shí)內(nèi)部的timer不會(huì)重新初始化因?yàn)殚]包已經(jīng)把上一次的timer記住了這就是閉包在實(shí)戰(zhàn)里最常見的形式。節(jié)流也類似只是邏輯從“重置延時(shí)”變成“判斷是否已經(jīng)觸發(fā)過”。閉包也有代價(jià)就是內(nèi)存占用。一個(gè)被閉包引用的變量即使外部函數(shù)執(zhí)行完了只要閉包還在變量就不會(huì)被GC回收。我之前寫過一個(gè)頁面動(dòng)態(tài)創(chuàng)建了大量DOM并綁定了各自的閉包回調(diào)結(jié)果每個(gè)回調(diào)都把整個(gè)父級(jí)作用域掛在身上頁面切了幾十次之后內(nèi)存蹭蹭漲。后來改成事件委托用統(tǒng)一回調(diào)配合data屬性區(qū)分目標(biāo)內(nèi)存問題就消失了。做長(zhǎng)列表或者頻繁銷毀重建的場(chǎng)景一定要留意閉包引用鏈。還有一個(gè)經(jīng)典坑結(jié)合循環(huán)和定時(shí)器最容易被考到for (var i 0; i 3; i) { setTimeout(() { console.log(i); }, 100); } // 輸出 3 3 3而不是 0 1 2原因很簡(jiǎn)單var沒有塊級(jí)作用域三個(gè)閉包共享同一個(gè)i定時(shí)器觸發(fā)時(shí)循環(huán)已經(jīng)結(jié)束i變成3。把var改成let就能得到0 1 2因?yàn)槊看窝h(huán)都會(huì)創(chuàng)建一個(gè)獨(dú)立的i。這是閉包和事件循環(huán)交叉的考題原理清楚了以后類似問題基本不會(huì)再錯(cuò)。2.3 setTimeout調(diào)用函數(shù)時(shí)的參數(shù)傳遞和引用丟失setTimeout不只是用來延時(shí)的很多人寫代碼時(shí)忽略了它調(diào)用回調(diào)的機(jī)制。直接傳函數(shù)名有一個(gè)微妙的坑如果函數(shù)內(nèi)部引用了this調(diào)用時(shí)this已經(jīng)不是原來的對(duì)象了。另一個(gè)坑是傳參方式。function greet(name) { console.log(Hello, name); } // 不要用字符串方式相當(dāng)于eval不規(guī)范 setTimeout(greet(Tom), 100); // 推薦寫法第三個(gè)參數(shù)起作為回調(diào)參數(shù)傳入 setTimeout(greet, 100, Tom); // 但有時(shí)候只想傳參數(shù)、不想改變this可以包一層箭頭函數(shù) setTimeout(() greet(Tom), 100);我傾向于用箭頭函數(shù)包一層雖然多多少少破壞了裝飾器風(fēng)格但意圖更明確調(diào)試的時(shí)候肉眼就能看出要執(zhí)行什么。如果定時(shí)器回調(diào)里要用到外層的this比如更新組件狀態(tài)箭頭函數(shù)能安全捕獲this用普通函數(shù)加參數(shù)的方式this會(huì)丟還得額外bind。3. 原型和原型鏈對(duì)象繼承的根基原型鏈?zhǔn)荍S里最容易被囫圇吞掉的部分。說真的如果只背“__proto__指向prototype”這句話遇到實(shí)際問題照樣懵。這周我花了大半天重新畫了一遍原型鏈的圖才算真正理解。3.1 prototype、__proto__與constructor三者關(guān)系要理清先厘清概念。每個(gè)JS函數(shù)都有一個(gè)prototype屬性它指向一個(gè)對(duì)象這個(gè)對(duì)象會(huì)被作為“模板”在new的時(shí)候關(guān)聯(lián)到新實(shí)例上。每個(gè)對(duì)象都有一個(gè)__proto__屬性內(nèi)部是[[Prototype]]指向它構(gòu)造函數(shù)的prototype。constructor是prototype里的一個(gè)屬性指回構(gòu)造函數(shù)本身。function Dog(name) { this.name name; } Dog.prototype.bark function() { console.log(this.name 叫了); }; const d1 new Dog(旺財(cái)); d1.__proto__ Dog.prototype; // true Dog.prototype.constructor Dog; // true畫了個(gè)簡(jiǎn)化的鏈條d1 的 __proto__ → Dog.prototype Dog.prototype 的 __proto__ → Object.prototype Object.prototype 的 __proto__ → null原型鏈就是從這個(gè)鏈條的末端開始查找屬性訪問d1.bark時(shí)先看d1自己有沒有沒有就順著__proto__往上在Dog.prototype里找到。再到Object.prototype里找再往上就是null找不到就返回undefined。這就是“繼承”的本質(zhì)子對(duì)象自己沒有的屬性沿著鏈條找父對(duì)象要。注意箭頭函數(shù)沒有自己的prototype所以不能當(dāng)構(gòu)造函數(shù)。class語法本質(zhì)上也是基于原型鏈實(shí)現(xiàn)的只是披了一層好用的語法糖。學(xué)習(xí)時(shí)不要被class迷惑class只是讓你少寫prototype樣板代碼底下的原型鏈機(jī)制一點(diǎn)都沒變。3.2 繼承的幾種方式和使用場(chǎng)景ES6之前寫繼承最正統(tǒng)的是寄生組合式繼承但現(xiàn)在有了class和extends個(gè)人覺得完全沒必要自己手搓。class Animal { constructor(name) { this.name name; } eat() { console.log(this.name 在吃東西); } } class Cat extends Animal { constructor(name, color) { super(name); this.color color; } meow() { console.log(this.name 在喵喵叫); } } const cat new Cat(花卷, orange); cat.eat(); // 花卷 在吃東西 cat.meow(); // 花卷 在喵喵叫extends做的事其實(shí)就是建立Cat.prototype到Animal.prototype的原型鏈讓Cat的實(shí)例能沿著鏈找到Animal的方法。用class寫繼承代碼可讀性遠(yuǎn)高于手動(dòng)操作prototype出bug的概率也低得多。理解原型鏈還有一個(gè)實(shí)際價(jià)值instanceof的原理。instanceof判斷的是“右側(cè)構(gòu)造函數(shù)的prototype是否出現(xiàn)在左側(cè)對(duì)象的原型鏈上”而不是字面上“對(duì)象是誰創(chuàng)建的”。cat instanceof Cat; // true cat instanceof Animal; // true cat instanceof Object; // true這就是為什么所有對(duì)象instanceof Object都是true。有些面試題喜歡在這個(gè)位置繞搞懂原型鏈自然就通了。另外也提醒一句不要隨便修改內(nèi)置對(duì)象的prototype比如Array.prototype上掛自定義方法這在團(tuán)隊(duì)項(xiàng)目里影響面很大命名一旦和其他庫(kù)沖突排查成本極高。4. 事件循環(huán)與setTimeout執(zhí)行順序里藏著半個(gè)JS引擎JS是單線程語言但很多初學(xué)者疑惑既然是單線程為什么頁面還能同時(shí)處理點(diǎn)擊、滾動(dòng)、網(wǎng)絡(luò)請(qǐng)求答案就是事件循環(huán)。這周我把事件循環(huán)和一些定時(shí)器細(xì)節(jié)認(rèn)真捋了一遍有幾個(gè)之前完全沒注意到的問題。4.1 setTimeout的返回值范圍那個(gè)“有0存在么”的問題熱搜里那個(gè)“js settimeout 返回值的范圍 有0存在么”我當(dāng)時(shí)看到也愣了一下因?yàn)槠綍r(shí)壓根沒注意過setTimeout返回什么。返回的是一個(gè)定時(shí)器ID傳給clearTimeout用來取消。關(guān)鍵是這個(gè)ID可以是0嗎從規(guī)范角度說HTML標(biāo)準(zhǔn)沒有強(qiáng)制ID從1開始只是說返回一個(gè)非負(fù)整數(shù)long類型?，F(xiàn)代主流瀏覽器Chrome、Firefox、Safari的實(shí)現(xiàn)都是從1開始遞增所以正常情況下你拿到的ID都是正整數(shù)不會(huì)見到0。但在一些舊版本的瀏覽器內(nèi)核、嵌入式的WebView環(huán)境里或者某些自動(dòng)化和腳本工具中第一個(gè)定時(shí)器ID確實(shí)可能是0。這里真正的坑是如果你習(xí)慣用if (timerId)來判斷一個(gè)定時(shí)器是否存在而環(huán)境里timerId恰好為00是假值判斷就失效了。靠timerId清掉定時(shí)器的代碼可能不會(huì)執(zhí)行。更穩(wěn)的寫法是顯式判斷if (timerId ! undefined timerId ! null)。在生產(chǎn)代碼里尤其是要兼容多種瀏覽器內(nèi)核的場(chǎng)景別把timerId當(dāng)布爾值用。另外setTimeout的最小延遲時(shí)間也不是0。HTML規(guī)范里嵌套層數(shù)超過5層后最小延遲會(huì)被強(qiáng)制設(shè)為4毫秒。所以setTimeout(fn, 0)也不是真的零延遲至少要排在當(dāng)前執(zhí)行棧之后具體多少取決于嵌套層級(jí)。如果項(xiàng)目里有對(duì)這個(gè)延遲敏感的邏輯要么改設(shè)計(jì)要么就別糾結(jié)那幾毫秒。4.2 宏任務(wù)與微任務(wù)執(zhí)行順序的完整流程事件循環(huán)里最核心的規(guī)則是執(zhí)行完一個(gè)宏任務(wù)后把微任務(wù)隊(duì)列清空再取下一個(gè)宏任務(wù)。宏任務(wù)包括setTimeout、setInterval、I/O操作微任務(wù)包括Promise.then、MutationObserver、queueMicrotask。console.log(start); setTimeout(() { console.log(timeout); }); Promise.resolve().then(() { console.log(promise); }); console.log(end); // 輸出順序start → end → promise → timeout為什么promise在timeout之前因?yàn)橥酱a執(zhí)行完先查看微任務(wù)隊(duì)列Promise回調(diào)在這里而setTimeout屬于宏任務(wù)本輪循環(huán)還沒輪到它。只有微任務(wù)隊(duì)列清空后事件循環(huán)才會(huì)從宏任務(wù)隊(duì)列里取出下一個(gè)任務(wù)執(zhí)行。這個(gè)規(guī)則在真實(shí)場(chǎng)景里影響很大。比如在一個(gè)循環(huán)里連續(xù)創(chuàng)建Promise和setTimeout或者fetch請(qǐng)求返回后再做一堆操作理解微任務(wù)先執(zhí)行的規(guī)律才不會(huì)對(duì)輸出結(jié)果感到莫名其妙。React或Vue里很多源碼層面的狀態(tài)更新調(diào)度也用到了微任務(wù)的機(jī)制搞懂這一塊讀框架源碼也輕松點(diǎn)。還有一個(gè)很多人問的setInterval和setTimeout誰先執(zhí)行嚴(yán)格說沒有固定答案取決于誰先被加入隊(duì)列還要考慮延遲時(shí)間和微任務(wù)的影響。與其背結(jié)論不如建立“先執(zhí)行棧、再微任務(wù)、再宏任務(wù)”的模型再?gòu)?fù)雜的情況也能推理出來。5. 綜合實(shí)戰(zhàn)把知識(shí)串起來的小案例光記概念沒有用得動(dòng)手。這周我拿三個(gè)小需求練手把前面整理的知識(shí)點(diǎn)串起來發(fā)現(xiàn)比悶頭看書有效得多。5.1 URL有效性校驗(yàn)構(gòu)造函數(shù)和正則選哪種熱搜里有“js驗(yàn)證url有效性”這個(gè)場(chǎng)景很常見比如用戶填寫個(gè)人主頁、上傳圖片地址時(shí)前端就要做校驗(yàn)否則后端傳回來的錯(cuò)誤提示又慢又難看。// 方式一用URL構(gòu)造函數(shù)最推薦 function isValidUrl(str) { try { new URL(str); return true; } catch { return false; } } // 方式二正則校驗(yàn)只適合簡(jiǎn)單場(chǎng)景 const urlPattern /^https?:\/\/[\w\-](\.[\w\-])[/#?]?.*$/; function isValidUrlByRegex(str) { return urlPattern.test(str); }URL構(gòu)造函數(shù)的優(yōu)勢(shì)是它能識(shí)別各種合法URL包括帶端口、帶路徑、帶query、帶哈希的甚至相對(duì)路徑的規(guī)則也能處理。正則想覆蓋完整的合法URL非常困難一個(gè)不小心就會(huì)把合法鏈接攔下來或者放過了不該放過的。之前我們線上遇到“網(wǎng)頁不能訪問”的問題查到最后是正則寫得太嚴(yán)格把帶參數(shù)的鏈接誤判成非法鏈接直接導(dǎo)致跳轉(zhuǎn)被攔住了。從那以后我們組內(nèi)定了個(gè)規(guī)矩校驗(yàn)URL一律用URL構(gòu)造函數(shù)不再寫正則。不過URL構(gòu)造函數(shù)兼容性最早支持到很古老的環(huán)境基本可以放心用。還有個(gè)小細(xì)節(jié)new URL(ftp://xxx)也是合法的如果你只允許http和https需要再判斷一下protocol。5.2 三級(jí)聯(lián)動(dòng)數(shù)據(jù)結(jié)構(gòu)和事件綁定的組織三級(jí)聯(lián)動(dòng)省/市/區(qū)是前端很經(jīng)典的練習(xí)。我第一次寫的時(shí)候被DOM操作繞暈了后來發(fā)現(xiàn)核心不是DOM而是數(shù)據(jù)結(jié)構(gòu)設(shè)計(jì)。const areaData { 廣東省: { 廣州市: [天河區(qū), 越秀區(qū), 海珠區(qū)], 深圳市: [南山區(qū), 福田區(qū), 羅湖區(qū)] }, 浙江省: { 杭州市: [西湖區(qū), 余杭區(qū), 濱江區(qū)], 寧波市: [海曙區(qū), 鄞州區(qū)] } };頁面結(jié)構(gòu)是三個(gè)select省、市、區(qū)。選省時(shí)根據(jù)省的key去areaData里取對(duì)應(yīng)的城市列表重新渲染市的options選市時(shí)再取區(qū)列表。這里最關(guān)鍵的是change事件的處理以及每次更新時(shí)先清空舊的options不然會(huì)出現(xiàn)重復(fù)選項(xiàng)或殘留選項(xiàng)。我看很多新手會(huì)寫三個(gè)change事件處理函數(shù)每個(gè)函數(shù)里一堆DOM拼接。我的做法是寫一個(gè)通用的renderSelect函數(shù)function renderSelect(selectEl, options) { selectEl.innerHTML ; options.forEach(text { const option document.createElement(option); option.textContent text; option.value text; selectEl.appendChild(option); }); }這樣三個(gè)select的更新邏輯統(tǒng)一了代碼量少了一大半。事件綁定上用事件委托也可以但三級(jí)聯(lián)動(dòng)結(jié)構(gòu)簡(jiǎn)單直接綁定也無妨。這個(gè)小案例很好地體現(xiàn)了“先組織數(shù)據(jù)再做DOM操作”的順序數(shù)據(jù)不對(duì)后面全是白忙。5.3 動(dòng)態(tài)創(chuàng)建表格的單元格合并從行數(shù)據(jù)模型開始另一個(gè)練手是動(dòng)態(tài)創(chuàng)建表格并合并單元格。熱搜原話是“js動(dòng)態(tài)創(chuàng)建的表格合并怎么弄成一個(gè)”我理解為動(dòng)態(tài)生成表格時(shí)相鄰相同內(nèi)容的單元格要合并成一個(gè)用rowSpan或colSpan屬性來實(shí)現(xiàn)。直接操作DOM去合并很痛苦我踩了一次坑后總結(jié)的經(jīng)驗(yàn)是先構(gòu)造成數(shù)據(jù)再渲染DOM最后根據(jù)數(shù)據(jù)特征設(shè)置rowSpan。比如從接口拿回來的數(shù)據(jù)有多行重復(fù)分類先遍歷統(tǒng)計(jì)每個(gè)分類出現(xiàn)的次數(shù)再在渲染時(shí)給起始行設(shè)置rowSpan屬性后續(xù)相同分類的行直接跳過。// 假設(shè)data是接口返回的原始數(shù)據(jù)其中category有重復(fù) const data [ { category: A, value: 1 }, { category: A, value: 2 }, { category: B, value: 3 }, ]; // 統(tǒng)計(jì)每個(gè)category的出現(xiàn)次數(shù) const categoryCount {}; data.forEach(item { categoryCount[item.category] (categoryCount[item.category] || 0) 1; }); // 渲染時(shí)根據(jù)統(tǒng)計(jì)結(jié)果決定是否設(shè)置rowspan const table document.createElement(table); const tbody document.createElement(tbody); const seen {}; data.forEach(item { const tr document.createElement(tr); if (!seen[item.category]) { const td document.createElement(td); td.textContent item.category; td.rowSpan categoryCount[item.category]; tr.appendChild(td); seen[item.category] true; } const tdValue document.createElement(td); tdValue.textContent item.value; tr.appendChild(tdValue); tbody.appendChild(tr); }); table.appendChild(tbody); document.body.appendChild(table);核心思路是用對(duì)象統(tǒng)計(jì)合并的跨度用seen記錄哪些分類已經(jīng)渲染過后續(xù)同類行就跳過分類單元格只渲染數(shù)值單元格。如果數(shù)據(jù)沒有規(guī)律合并邏輯會(huì)更復(fù)雜但思路不變——盡量在數(shù)據(jù)層做預(yù)處理別在渲染層反復(fù)改DOM結(jié)構(gòu)。這里也順便用上了forEach的遍歷中斷技巧categoryCount統(tǒng)計(jì)時(shí)沒有中斷需求但seen標(biāo)記的方式本質(zhì)上就是一種遍歷控制。6. 階段性體會(huì)和踩坑清單寫完這些最大的感受是JS的問題往往不是孤立的一點(diǎn)語法而是作用域、this、異步、原型鏈這四件事交叉影響的結(jié)果。單個(gè)概念看著都懂組合在一起就懵。比如閉包陷阱里的循環(huán)問題同時(shí)涉及作用域和事件循環(huán)prototype和extends涉及原型鏈和對(duì)象模型。學(xué)的時(shí)候一定要把彼此之間的關(guān)系串起來而不是一個(gè)一個(gè)孤立地背。我把自己這個(gè)階段踩過的坑列成一張清單也方便你自查場(chǎng)景錯(cuò)誤寫法正確做法判斷子串位置if(str.indexOf(a))if(str.indexOf(a) ! -1)數(shù)字排序arr.sort()arr.sort((a,b)a-b)forEach中斷forEach里寫break用for...of循環(huán)或some()定時(shí)器回調(diào)傳參setTimeout(fn(1), 100)setTimeout(fn, 100, 1)推薦箭頭函數(shù)定時(shí)器ID判空if(timerId)if(timerId ! undefined timerId ! null)URL校驗(yàn)手寫復(fù)雜正則用new URL()加try/catch閉包內(nèi)存動(dòng)態(tài)創(chuàng)建大量DOM綁閉包事件委托統(tǒng)一回調(diào)下一步我準(zhǔn)備結(jié)合Vue框架看看這些JS基礎(chǔ)在組件化體系里是怎么被組織起來的到時(shí)候再更新后續(xù)的學(xué)習(xí)筆記。也在考慮整理一份自己用著順手的前端腳手架配置把開發(fā)時(shí)常用的構(gòu)建、調(diào)試、目錄結(jié)構(gòu)沉淀成模板會(huì)一并記錄下來。