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