JS作業(yè)三這個標(biāo)題一開始看到我是有點懵的。前兩次作業(yè)都是控制臺里打印九九乘法表、寫個簡易計算器這種基礎(chǔ)題突然冒出個作業(yè)三我以為又是換個姿勢復(fù)習(xí)函數(shù)結(jié)果題目一發(fā)下來直接傻眼了省市區(qū)三級聯(lián)動下拉、動態(tài)表格帶單元格合并、表單校驗里還要判斷字符串包含關(guān)系、頁面里還要有兩個能聯(lián)動的計時器。這哪是作業(yè)這分明是把一周的課濃縮成一道綜合題。不過話說回來這份作業(yè)做完之后我反而覺得收獲特別大很多之前背過但沒懂的知識點比如 rowSpan 合并單元格、setTimeout 返回值的坑、原型鏈上的方法查找都是在寫作業(yè)三的時候才真正想通的。這篇文章就是我完成這份作業(yè)的完整記錄包含我的實現(xiàn)思路、翻車現(xiàn)場、修復(fù)過程和最后提交前整理的自測清單。如果你也在做類似的 JS 綜合練習(xí)或者剛學(xué)完基礎(chǔ)語法準(zhǔn)備上手寫一個像樣的頁面這份記錄應(yīng)該能幫你少走不少彎路。1. 拿到作業(yè)先別碰編輯器把題目里藏著的考點一個個翻出來我第一次看到題目的時候第一反應(yīng)是完了這題我不會。但第二天冷靜下來重新讀題發(fā)現(xiàn)其實題目里每一句話都對應(yīng)著一個已經(jīng)學(xué)過的知識點只是以前是單個地考這次要求把知識點串在同一個頁面里。所以我建議你拿到任何題目后的第一件事不是打開 VS Code而是拿張紙把題目要求拆成功能點再給每個功能點標(biāo)注它對應(yīng)的考點。1.1 從題目文字里提取功能模塊與對應(yīng)考點我拿到的 JS 作業(yè)三是這樣一張卷面不同學(xué)校題目會有差異但核心模塊很相似頁面左側(cè)是一個表單區(qū)域里面有一個姓名輸入框、一個下拉菜單組省/市/區(qū)三級聯(lián)動、一個備注文本域右側(cè)是一個動態(tài)表格區(qū)域初始有一行表頭和兩行示例數(shù)據(jù)要求能通過一個添加行按鈕向表格里插入新數(shù)據(jù)表單里還有一個保存按鈕點擊后要做非空校驗且校驗姓名時忽略大小寫只要名稱包含指定關(guān)鍵字就通過頁面上方還有一個倒計時數(shù)字要求每秒刷新一次。拆完之后就很清楚了這道題其實在考五件事DOM 操作getElementById、querySelector、createElement、appendChild、insertRow、deleteCell事件綁定onchange、onclick、addEventListener 以及它們的觸發(fā)時機(jī)字符串方法includes / indexOf、toLowerCase / toUpperCase、trim、判斷空對象定時器setTimeout / setInterval、清除定時器、this 指向問題數(shù)據(jù)與視圖同步用一個 JS 對象或數(shù)組存儲頁面數(shù)據(jù)再根據(jù)數(shù)據(jù)渲染 DOM我把這張拆解圖貼在顯示器旁邊后面每寫一個模塊就劃掉一個心理壓力小了很多。1.2 搭建一個不會跑不起來的目錄與 HTML 骨架很多同學(xué)作業(yè)三翻車不是因為邏輯不會寫而是代碼寫到一半頁面都沒有建出來。我的建議是最開始就建好標(biāo)準(zhǔn)三個文件并讓 HTML 里先把所有空容器定義好JS 里先用 console.log 測試腳本有沒有正常加載。js作業(yè)三/ ├── index.html ├── css/ │ └── style.css └── js/ └── main.jsindex.html 里我放了下面這樣的骨架。這里有一個關(guān)鍵決定把 script 標(biāo)簽放在了 body 末尾。因為作業(yè)里大量代碼要直接操作 DOM 元素如果 script 放在 head 里且沒有用 defer 或 DOMContentLoaded 包裹腳本執(zhí)行時后面的元素還沒解析出來getElementById 會拿到 null整個頁面就廢了。放在 body 末尾是初學(xué)者最簡單可靠的方案。!DOCTYPE html html langzh-CN head meta charsetUTF-8 titleJS作業(yè)三綜合交互頁面/title link relstylesheet hrefcss/style.css /head body h1信息登記與動態(tài)表格/h1 !-- 表單區(qū) -- section idform-area label forname-input姓名/label input typetext idname-input placeholder請輸入姓名 label forprovince-select省份/label select idprovince-select/select label forcity-select城市/label select idcity-select/select label fordistrict-select區(qū)縣/label select iddistrict-select/select label forremark-input備注/label textarea idremark-input rows2/textarea button idsave-btn保存/button /section !-- 表格區(qū) -- section idtable-area button idadd-row-btn添加行/button table idinfo-table border1 thead tr th序號/th th姓名/th th地區(qū)/th th備注/th /tr /thead tbody idtable-body tr td1/td td示例A/td td北京市-北京市-朝陽區(qū)/td td第一行/td /tr tr td2/td td示例B/td td浙江省-杭州市-西湖區(qū)/td td第二行/td /tr /tbody /table /section !-- 計時器區(qū) -- section idtimer-area p剩余時間span idcountdown60/span 秒/p /section script srcjs/main.js/script /body /html這里的 table 使用 border1 是為了方便觀察單元格合并效果實際項目里會用 CSS 控制邊框但作業(yè)階段怎么直觀怎么來。表頭用 thead動態(tài)數(shù)據(jù)行放 tbody后面講單元格合并時你就知道為什么必須這樣分了——thead 和 tbody 是兩套獨立的行集合操作 tbody 里的行完全不影響表頭。2. 三級聯(lián)動下拉框數(shù)據(jù)結(jié)構(gòu)和綁定時機(jī)決定成敗三級聯(lián)動是這份作業(yè)里最像真實項目的部分。雖然頁面上只是三個 select 框但它的核心其實跟 UI 沒關(guān)系而是數(shù)據(jù)結(jié)構(gòu)。我一開始想用三個各自獨立的數(shù)組分別存省、市、區(qū)寫了一半發(fā)現(xiàn)聯(lián)動時根本找不到這個省有哪些城市的關(guān)系代碼里全是 if else 窮舉寫到廣東省我就想摔鍵盤了。后來換成嵌套對象一切突然變得順理成章。2.1 用嵌套對象組織省-市-區(qū)數(shù)據(jù)我最終使用的數(shù)據(jù)結(jié)構(gòu)長這樣const regionData { 北京市: { 北京市: [東城區(qū), 西城區(qū), 朝陽區(qū), 海淀區(qū), 豐臺區(qū)] }, 浙江省: { 杭州市: [西湖區(qū), 拱墅區(qū), 濱江區(qū), 余杭區(qū)], 寧波市: [海曙區(qū), 江北區(qū), 鄞州區(qū)] }, 廣東省: { 廣州市: [天河區(qū), 越秀區(qū), 白云區(qū)], 深圳市: [福田區(qū), 南山區(qū), 羅湖區(qū)] } };每一級是什么和包含誰都表達(dá)得很明確省份對象里每個 key 對應(yīng)一個城市對象城市對象里每個 key 對應(yīng)一個區(qū)數(shù)組。這樣寫還有一個額外好處——渲染三級下拉的時候循環(huán) key 就足夠不需要額外維護(hù) id 關(guān)聯(lián)表。說實話如果當(dāng)初直接去 CSDN 找一段省市區(qū)完整 JSON 數(shù)據(jù)復(fù)制進(jìn)來后面反而會被海量數(shù)據(jù)搞暈因為作業(yè)只需要演示聯(lián)動邏輯數(shù)據(jù)能體現(xiàn)三層關(guān)系就夠了。接下來是渲染函數(shù)。我寫了三個函數(shù)分別負(fù)責(zé)省、市、區(qū)的填充但它們共用同一個核心邏輯清空舊的 option再從數(shù)據(jù)源循環(huán)創(chuàng)建新的 option。function fillSelect(selectEl, arr) { // 先清空避免重復(fù)累加 selectEl.innerHTML ; const defaultOption document.createElement(option); defaultOption.value ; defaultOption.textContent 請選擇; selectEl.appendChild(defaultOption); arr.forEach(function (item) { const option document.createElement(option); option.value item; option.textContent item; selectEl.appendChild(option); }); }這里選擇重新賦值 innerHTML 而不是逐個 removeChild 舊的 option原因是這段代碼在作業(yè)場景下可讀性更好而且 select 的子節(jié)點只有 option不存在用戶輸入內(nèi)容被當(dāng)作 HTML 解析的安全隱患。但同樣的做法不能直接用在后文要講的動態(tài)表格上——表格里很多內(nèi)容來自用戶輸入用 innerHTML 拼接會讓輸入內(nèi)容里的img srcx onerror...這種字符串變成真實 DOM 節(jié)點這是非常危險的習(xí)慣作業(yè)階段就要建立這個意識。2.2 onchange 事件的綁定順序錯一步全盤崩三級聯(lián)動的事件綁定邏輯看起來很自然省份 change 了填城市城市 change 了填區(qū)縣。但因為區(qū)縣下一次是建立在城市的基礎(chǔ)上的綁定順序就非常敏感。我的做法是在頁面初始化時先只填充省份下拉然后給省份 select 綁定 onchange每次省份改變先重置城市和區(qū)縣再根據(jù)新省份填充城市。同理城市 change 時先重置區(qū)縣再填充新區(qū)縣。const provinceSelect document.getElementById(province-select); const citySelect document.getElementById(city-select); const districtSelect document.getElementById(district-select); function initRegion() { fillSelect(provinceSelect, Object.keys(regionData)); provinceSelect.onchange function () { const province provinceSelect.value; // 關(guān)鍵先清空下級再填充 citySelect.innerHTML option value請選擇/option; districtSelect.innerHTML option value請選擇/option; if (province regionData[province]) { fillSelect(citySelect, Object.keys(regionData[province])); } }; citySelect.onchange function () { const province provinceSelect.value; const city citySelect.value; districtSelect.innerHTML option value請選擇/option; if (province city regionData[province][city]) { fillSelect(districtSelect, regionData[province][city]); } }; } initRegion();這段代碼里最容易被忽視的是先清空下級這一步。如果省份變化時不清空城市列表用戶能看到上一省份的城市而且如果那些城市在新省份里不存在后面取 regionData[province][city] 時會直接 undefined 然后報錯。我調(diào)試時最?？吹降腻e誤就是從Cannot read properties of undefined開始的——它不是某個復(fù)雜算法的問題而是聯(lián)動時沒有把中間狀態(tài)的舊數(shù)據(jù)清掉。還有一個經(jīng)驗是不要一上來就把編輯回顯功能做進(jìn)去。很多人做作業(yè)時想著既然能做聯(lián)動順手把點擊表格行、把數(shù)據(jù)回顯到表單里的功能也做了吧?；仫@本身不難難的是回顯時也要觸發(fā) onchange 來刷新下級下拉——直接給省 select 的 value 賦值不會觸發(fā) onchange 事件必須手動調(diào)用 provinceSelect.onchange()。這個坑我踩了整整一個下午后面寫一篇專門的文章講它。但作為作業(yè)先保證選擇→聯(lián)動→保存這條主鏈路是通的回顯屬于加分項能寫就寫壞掉了千萬別硬撐。3. 動態(tài)表格的創(chuàng)建與單元格合并insertRow 與 rowSpan 的正確姿勢動態(tài)表格是作業(yè)三里最能體現(xiàn) DOM 操作功底的部分。普通添加一行不復(fù)雜難點在于題目要求區(qū)域列要把同一個省市區(qū)的連續(xù)行合并成一個大單元格。這就涉及到 rowSpan 屬性而動態(tài)合并又比靜態(tài) HTML 里手寫 rowSpan 要難一個量級——因為隨時可以添加和刪除行合并狀態(tài)必須根據(jù)最新數(shù)據(jù)重新計算。3.1 添加行數(shù)據(jù)insertRow 從語義上就比 innerHTML 合理我剛寫完三級聯(lián)動的時候?qū)?innerHTML 的依賴還非常重往 tbody 里追加一行下意識就想寫tableBody.innerHTML trtd3/tdtd.../td/tr;這在作業(yè)三里會埋兩個雷。第一這種寫法會丟失已有的 DOM 狀態(tài)比如之前行里綁定的點擊事件會全部失效因為 innerHTML 賦值相當(dāng)于把原來所有子節(jié)點銷毀重建。第二如果你把用戶輸入的姓名直接拼進(jìn)字符串里用戶輸入了b張三/b表格里顯示的就是加粗的張三如果輸入的是帶事件的標(biāo)簽結(jié)構(gòu)瀏覽器會嘗試執(zhí)行它——這就是傳說中的頁面被注入了。用 innerHTML 做模板渲染不是完全不行大型前端框架的底層也在變相使用類似機(jī)制。但作業(yè)三的場景是逐行動態(tài)插入并保持每行的獨立性更合適的是 DOM API?？次业淖龇╟onst addRowBtn document.getElementById(add-row-btn); addRowBtn.onclick function () { const tbody document.getElementById(table-body); const rows tbody.getElementsByTagName(tr); const newIndex rows.length 1; const newRow tbody.insertRow(); // 插入到最后 newRow.insertCell(0).textContent newIndex; // 序號 newRow.insertCell(1).textContent 新同學(xué); // 姓名 newRow.insertCell(2).textContent 浙江省-杭州市-西湖區(qū); newRow.insertCell(3).textContent 動態(tài)插入的一行; };insertRow 和 insertCell 的好處是返回一個活的 tr / td 對象后續(xù)要掛事件、改樣式、做合并都是對這個對象直接操作而不是去找一段字符串里的某個標(biāo)記。注意這里 insertRow() 不傳參數(shù)就是追加到最后一行insertRow(0) 才是插入到第一行作業(yè)里最容易記混。3.2 動態(tài)合并中的 rowSpan先把行去掉兩個再給上一行加屬性單元格合并的語義是一個 td 占住兩行所以它下面的那一行里對應(yīng)的 td 就不再需要存在否則表格會多出一列變形。靜態(tài)表格合并很簡單但動態(tài)表格合并要把這個缺少 td的性質(zhì)保持下去。我研究了一會兒最終采用的做法是——每次渲染表格時都從數(shù)據(jù)數(shù)組重新生成 tbody 的全部內(nèi)容合并也只發(fā)生在臨時渲染邏輯里而不是在現(xiàn)有的 DOM 上行增行刪。這樣思路最清晰無論用戶點擊了多少次添加行我只要保證當(dāng)前數(shù)據(jù)長什么樣渲染函數(shù)就能生成一個正確的、合并好的表格。這其實是數(shù)據(jù)驅(qū)動視圖的雛形你現(xiàn)在覺得繞以后學(xué)框架時會感謝這個作業(yè)。先定義一個數(shù)組存所有行數(shù)據(jù)let tableData [ { name: 示例A, region: 北京市-北京市-朝陽區(qū), remark: 第一行 }, { name: 示例B, region: 浙江省-杭州市-西湖區(qū), remark: 第二行 } ];添加行時 push 到數(shù)組里然后調(diào)用 renderTable()addRowBtn.onclick function () { tableData.push({ name: 新同學(xué), region: 浙江省-杭州市-西湖區(qū), remark: 動態(tài)插入的一行 }); renderTable(); };renderTable 的第一步是清空 tbody第二步是按順序插入行和單元格第三步才是合并。關(guān)鍵代碼在第三步function renderTable() { const tbody document.getElementById(table-body); tbody.innerHTML ; // 清空完全按新數(shù)據(jù)重建 tableData.forEach(function (item, index) { const tr tbody.insertRow(); tr.insertCell(0).textContent index 1; tr.insertCell(1).textContent item.name; tr.insertCell(2).textContent item.region; tr.insertCell(3).textContent item.remark; }); // 合并單元格按地區(qū)分組同組的連續(xù)行中只有第一行保留地區(qū)單元格 const rows tbody.getElementsByTagName(tr); let i 0; while (i rows.length) { const currentRegion rows[i].cells[2].textContent; let spanCount 1; let j i 1; while (j rows.length rows[j].cells[2].textContent currentRegion) { spanCount; j; } if (spanCount 1) { // 只保留第一行的地區(qū)單元格并讓它跨行 rows[i].cells[2].rowSpan spanCount; // 從第 i1 行開始刪掉它們的地區(qū)單元格 for (let k i 1; k j; k) { rows[k].deleteCell(2); } } i j; // 跳過這段連續(xù)區(qū)域 } }這個方法里最容易錯的是循環(huán)變量 i 的更新方式。第一次寫時我把 i 寫成了 i結(jié)果合并完第一組之后 i 落到了被刪過單元格的行里cells[2] 根本不存在直接報錯。正確的做法是合并完一整組跳到這一組的最后一行再繼續(xù)處理下一組——所以使用 i j 而不是 i。刪除單元格時我從 k i 1 循環(huán)到 j - 1也就是把同一地區(qū)下所有后續(xù)行里的第 3 個單元格全部刪掉。這樣表格展現(xiàn)出來就是第一行占兩行高度底下那行對應(yīng)位置是空的視覺上正好是合并效果。這里有個值得提醒的點rowSpan 的值如果設(shè)置過大或者區(qū)域內(nèi)行數(shù)統(tǒng)計錯誤表格會整體錯位甚至表頭跟數(shù)據(jù)列對不上。所以合并邏輯最好在一個純數(shù)據(jù)的表格上測試——先只放兩三行相同地區(qū)的數(shù)據(jù)確認(rèn)合并后 td 總數(shù)和列數(shù)一致再放復(fù)雜數(shù)據(jù)。我用開發(fā)者工具逐個檢查過刪掉單元格之后的 DOM 結(jié)構(gòu)確認(rèn)每一行都恰好剩 4 個 td第一行因為 rowSpan 占了兩份位置所以它只顯示 4 個 td 但視覺上占滿兩行的 4 列這才放心。4. 表單校驗里的字符串功夫忽略大小寫、包含關(guān)系與空的判斷表單校驗這塊以前是最讓我頭大的因為所有邏輯全是字符串處理而我過去總覺得字符串不就等于一串字嘛有什么好處理的。寫完作業(yè)三我才意識到字符串的相等、包含、為空、忽略大小寫后相等這四件事的語義完全不同面試題和實際項目翻來覆去問的也是這些。4.1 判斷字符串是否包含關(guān)鍵字includes 與 indexOf 的取舍作業(yè)題目里有一句話讓我琢磨了很久點擊保存時如果姓名輸入的內(nèi)容忽略大小寫后含有關(guān)鍵詞 js_test則提示校驗成功否則提示失敗。這里有兩個考點包含判斷和忽略大小寫。JS 里判斷字符串包含關(guān)系主要兩招indexOf 和 includes。它們的區(qū)別對初學(xué)者來說很關(guān)鍵方式返回值使用習(xí)慣str.indexOf(關(guān)鍵詞)找不到返回 -1找到返回下標(biāo)0判斷條件寫indexOf(...) ! -1str.includes(關(guān)鍵詞)返回 true / false判斷條件寫includes(...)很多人剛學(xué) indexOf 時死活想不通為什么找到了要返回那串?dāng)?shù)字其實返回值是字符在字符串中的起始位置比如hello.indexOf(ll)結(jié)果是 2而 -1 是這個方法選定的找不到哨兵值。includes 是 ES6 推出的語法糖內(nèi)部實現(xiàn)也依賴類似的查找但對調(diào)用者來說只給出一個布爾值語義更干凈。作業(yè)里兩者都能用但在這個論壇里吵了這么多年我的態(tài)度很明確新代碼優(yōu)先用 includes除非你需要知道具體下標(biāo)位置。原因包括代碼可讀性高、不會出現(xiàn)indexOf() 0這種從下標(biāo) 1 開始找的經(jīng)典 bug很多人誤寫成 0 就漏掉關(guān)鍵字在開頭的情況語義也更接近自然語言。4.2 忽略大小寫先統(tǒng)一大小寫再比較忽略大小寫最樸素也最可靠的方式不是用正則i修飾符雖然正則也能做而是把所有參與比較的字符串統(tǒng)一轉(zhuǎn)成小寫再比較。function validateName(rawValue) { const keyword js_test; // 轉(zhuǎn)小寫后包含判斷 return rawValue.toLowerCase().indexOf(keyword.toLowerCase()) ! -1; }之所以兩邊都調(diào) toLowerCase是為了防止用戶輸入JS_TEST或Js_Test或js_TEST這些變體。如果你只把輸入值轉(zhuǎn)小寫但關(guān)鍵字還是js_test那也是對的因為關(guān)鍵字本身已經(jīng)是小寫了。但養(yǎng)成兩邊統(tǒng)一處理的習(xí)慣更安全——以后碰到從接口返回、或大小寫混合的關(guān)鍵字就不會漏處理。除了 toLowerCase還有個 toLocaleLowerCase 與 toLowerCase 的差異值得知道toLocaleLowerCase 會根據(jù)當(dāng)前系統(tǒng)語言環(huán)境做更徹底的大小寫轉(zhuǎn)換比如土耳其語里的特殊字符toLowerCase 不會處理而 toLocaleLowerCase 會。但在作業(yè)里用 toLowerCase 足夠且它的行為在所有 JS 引擎中完全一致更可控。我一般給同學(xué)的答案是寫作業(yè)用 toLowerCase你永遠(yuǎn)不會因為這個被扣分真要處理多語言文本再考慮 toLocaleLowerCase。4.3 判斷空對象、空字符串和看起來空的字符串作業(yè)里保存前要校驗備注不能為空。最直接的想法是remarkInput.value ! 但這只攔住了完全沒輸入的情況。用戶輸入三個空格value 不是空字符串頁面會放行但數(shù)據(jù)里存的又是三個空格這種沒意義的內(nèi)容。我的做法是先 trim 再判斷。trim 會去掉字符串首尾的空白字符空格、制表符、換行符所以function isBlank(str) { return str.trim().length 0; }類似的坑還有判斷是不是空對象。如果表單數(shù)據(jù)被收集到一個對象里const formData { name: 張三, region: 浙江省-杭州市-西湖區(qū), remark: 備注 };你不能用formData {}判斷它是不是空對象因為對象是引用類型{}每次都是一個新的對象兩個新對象永遠(yuǎn)不相等。正確的判斷方式是Object.keys(formData).length 0。Object.keys 返回對象自身可枚舉屬性的數(shù)組如果長度為 0說明這個對象沒有自己的屬性它就是空的。function isEmptyObject(obj) { return Object.keys(obj).length 0; }至于為什么不用JSON.stringify(formData) {}這種寫法——雖然也能用但遇到對象里有函數(shù)、undefined 值、Symbol 屬性時會失真JSON.stringify 會自動忽略這些而且性能上要先序列化整個對象再比較不如 Object.keys 直接。作業(yè)階段跑不出性能差距但養(yǎng)成用 Object.keys 的習(xí)慣會讓你后面看框架源碼時不至于一頭霧水。5. setTimeout 返回值那道靈魂拷問到底返回什么范圍是什么作業(yè)里有個倒計時模塊要求每隔一秒把頁面上的數(shù)字減 1。這就要用到 setInterval 或 setTimeout 配合遞歸調(diào)用。而我寫完之后一邊調(diào)試一邊想起最近在論壇看到的討論帖js setTimeout 返回值的范圍 有0存在么——說實話這個問題初看很怪但它確實能把定時器機(jī)制挖得很深。5.1 定時器 ID一個正整數(shù)而不是時間值setTimeout 的返回值不是剩余時間也不是有沒有設(shè)定成功的布爾值而是一個正整數(shù) ID。這個 ID 的唯一用途是傳給 clearTimeout 來取消對應(yīng)定時器。let timerId setTimeout(function () { console.log(一秒后執(zhí)行); }, 1000); // 如果中途取消 clearTimeout(timerId);瀏覽器實現(xiàn)中這個 ID 通常從 1 開始遞增且每個頁面環(huán)境下是獨立的。所以嚴(yán)格意義上返回值的范圍就是正整數(shù)肯定不會是 0也不可能出現(xiàn)負(fù)數(shù)。你在 Console 里執(zhí)行 setTimeout 會看到輸出 1、2、3……這就是當(dāng)前頁面第幾個定時器。在 Node.js 里行為類似但返回值類型是對象而不是數(shù)字這點只對服務(wù)端開發(fā)者影響大做作業(yè)不用管。那js setTimeout 返回值的范圍 有0存在么這個問法為什么會出現(xiàn)我猜測是因為很多人把 setTimeout 的第一個參數(shù)當(dāng)成了返回值——比如setTimeout(0)這種寫法其實第一個參數(shù)應(yīng)該是函數(shù)而不是數(shù)字而setTimeout(fn, 0)里的 0 是延遲毫秒數(shù)不是返回值。所以這個問題應(yīng)該拆成兩個延遲時間可以傳 0表示盡快執(zhí)行但仍有最小鉗制值而返回值是定時器 ID范圍是正整數(shù)不會是 0。5.2 倒計時正確姿勢setInterval? 還是 setTimeout 遞歸以及隱藏的小問題倒計時代碼我有兩種方案。第一種是 setInterval代碼最短let remain 60; const countdownEl document.getElementById(countdown); const intervalId setInterval(function () { remain--; countdownEl.textContent remain; if (remain 0) { clearInterval(intervalId); } }, 1000);第二種是 setTimeout 遞歸每次執(zhí)行完再設(shè)定下一次let remain 60; const countdownEl document.getElementById(countdown); function tick() { remain--; countdownEl.textContent remain; if (remain 0) { setTimeout(tick, 1000); } } setTimeout(tick, 1000);兩者都能完成作業(yè)但面試常追問的一個問題是setInterval 和遞歸 setTimeout 有什么區(qū)別。一種常見說法是setInterval 可能丟幀遞歸 setTimeout 更準(zhǔn)確。實際上前者的 tick 與 tick 之間是固定間隔但會受到執(zhí)行時間影響可能累積延遲后者是執(zhí)行完再等下 1000 毫秒能保證上一次真正執(zhí)行完之后再進(jìn)入下一次但總時間可能略長。作業(yè)層面選哪個都不影響功能但如果你希望頁面在切到后臺再回來時倒計時仍然是真實剩余時間那就不該用遞減變量而是記錄一個結(jié)束時間戳用 Date.now() 計算差值。這屬于超綱優(yōu)化但寫了這道題的代碼之后面試官如果追問就能答出用時間戳差值校準(zhǔn)這個優(yōu)化方向印象分會明顯提升。還有一個小坑定時器回調(diào)里如果直接使用 this它指向的不是外部對象而是全局對象瀏覽器里是 window嚴(yán)格模式下是 undefined。這在作業(yè)里最容易出問題的是把定時器和表單數(shù)據(jù)聯(lián)動時想在回調(diào)里調(diào)用 this.xxx 卻拿不到。作業(yè)階段的穩(wěn)妥方案是用箭頭函數(shù)代替普通 function 聲明箭頭函數(shù)沒有自己的 this它會沿用定義時所在作用域的 this。const vm { remain: 60, start() { setInterval(() { this.remain--; console.log(this.remain); }, 1000); } }; vm.start();這里如果把箭頭函數(shù)換成像下面這樣setInterval(function () { this.remain--; // this 是 window不是 vm }, 1000);this.remain 會變成 window.remain結(jié)果就是頁面上完全沒反應(yīng)。這個細(xì)節(jié)我提交作業(yè)前一小時才用 console.log 查出來浪費了不少時間。你要是也寫了 this 而沒反應(yīng)先檢查是不是定時器回調(diào)里的 this 跑丟了。6. 原型與原型鏈這份作業(yè)里最該吃透的超綱題作業(yè)三里沒有任何一行字提到原型鏈但代碼里處處都在用原型鏈。比如數(shù)組有 forEach、push、getElementsByTagName 返回的對象有什么用 onchange 事件的能力、甚至abc.toLowerCase()能執(zhí)行都是因為字符串對象可以從 String.prototype 上繼承到這些方法。我建議每一位做完作業(yè)三的同學(xué)都順手把這個知識點搞懂因為它幾乎是所有前端面試第一輪必問的題而且懂了原型鏈你就看懂了前面寫的所有代碼的底層服務(wù)。6.1 從為什么每個對象都能 toLowerCase開始找原型鏈在控制臺輸入hello.toLowerCase()能返回小寫?？赡悴]有在任何地方給這個字符串定義過 toLowerCase 方法為什么能調(diào)用因為 JS 引擎在查找屬性或方法時如果當(dāng)前對象身上沒有就會沿著一條隱藏的鏈向上找。這條鏈的頂端之一就是 String.prototype而 String.prototype 上有 toLowerCase、trim、toUpperCase 這些方法。當(dāng)你訪問str.toLowerCase時先在 str 自身查沒有順著 str 的[[Prototype]]也就是Object.getPrototypeOf(str)找到 String.prototype上面有 toLowerCase找到了立刻調(diào)用數(shù)組也一樣arr.forEach不是數(shù)組自己的屬性而是 Array.prototype 上定義的方法數(shù)組對象通過原型鏈拿到 Array.prototype 上的 forEach、map、push 等作業(yè)里tbody.getElementsByTagName(tr)返回的是一個 HTMLCollection 對象它能被 forEach 遍歷嗎這里有個經(jīng)典坑HTMLCollection 并不一定從 Array.prototype 繼承只有 NodeList 在部分瀏覽器實現(xiàn)了 forEach。作業(yè)里如果直接對tbody.getElementsByTagName(tr)調(diào)用 forEach可能會報錯。我在合并單元格時就是先const rows tbody.getElementsByTagName(tr);然后想用 rows.forEach結(jié)果運行報錯。后來改成 Array.from(rows) 再遍歷或者用 for 循環(huán)。這個小坑背后的原理就是原型鏈結(jié)構(gòu)不同——不是所有長得像數(shù)組的東西都有 Array.prototype 上的方法判斷標(biāo)準(zhǔn)就是看它的原型鏈上到底有沒有那個方法。6.2 JS 里函數(shù)是對象嗎——是但它是帶特殊能力的對象最近熱詞里還有一個js中函數(shù)是對象嗎這個問題的答案直接關(guān)系到原型鏈理解。函數(shù)確實是對象typeof function 返回 function 而不是 object 是語言層面的特意區(qū)分但函數(shù)擁有對象的全部能力它可以有屬性可以被添加屬性也可以被當(dāng)作值傳來傳去。function add(a, b) { return a b; } add.description 兩個數(shù)相加; console.log(add.description); // 兩個數(shù)相加 console.log(add.length); // 2參數(shù)個數(shù)函數(shù)對象身上默認(rèn)有 length 屬性表示形參個數(shù)有 name 屬性表示函數(shù)名這些在普通對象里是沒有的。函數(shù)與普通對象的核心區(qū)別在于它的特殊內(nèi)部特性[[Call]]這讓它可以被調(diào)用。所以更準(zhǔn)確的說法是函數(shù)是可調(diào)用的對象它既有對象的屬性能力又有函數(shù)的調(diào)用能力。放在作業(yè)里最直觀的例子是 setTimeout 的第一個參數(shù)。你傳進(jìn)去的是一個函數(shù)它本質(zhì)上也是一個對象被定時器保存起來等到時間到了再調(diào)用。如果你傳進(jìn)去的是一個字符串setTimeout(console.log(1), 1000)JS 會隱式把它當(dāng)成代碼去 eval 執(zhí)行但強烈建議不要這么寫既難看又危險能傳函數(shù)對象就傳函數(shù)對象。6.3 原型鏈查詢帶來的兩個作業(yè)級注意事項第一for...in 循環(huán)會遍歷原型鏈上可枚舉的屬性。如果用 for...in 遍歷一個對象你會把 Object.prototype 上所有的可枚舉方法也帶出來結(jié)果打印出莫名其妙的信息。解決辦法是用 hasOwnProperty 過濾這也是判斷是不是空對象問題升級版的工具。for (const key in formData) { if (formData.hasOwnProperty(key)) { console.log(key, formData[key]); } }第二不要隨意修改內(nèi)置原型。比如給 Array.prototype 加一個自定義方法來自嗨。作業(yè)階段也許沒事但當(dāng)你引入多個第三方庫時這些庫都在各自的代碼里假設(shè)數(shù)組沒有其他額外方法你加了之后可能在某處觸發(fā)奇怪的行為。真正的項目里我從來不覆蓋內(nèi)置原型寧可多寫一個工具函數(shù)。7. 提交作業(yè)前的最后一小時我翻車過的細(xì)節(jié)與自測清單作業(yè)三我前后寫了兩個版本。第一版功能全跑通了但提交前檢查時發(fā)現(xiàn)三個低級問題一個是從省切換到請選擇時城市和區(qū)縣恢復(fù)正常了但表格里的數(shù)據(jù)沒跟著變化另一個是倒計時歸零后如果再次點擊保存表單校驗居然還顯示剩余時間 0 秒邏輯上沒毛病但體驗很怪第三個是快速反復(fù)點擊添加行按鈕表格里的序號出現(xiàn)重復(fù)。這些問題都不涉及復(fù)雜算法但很影響整體觀感也直接影響老師對作業(yè)的評價。7.1 我踩過的三個低級錯誤問題一事件重復(fù)綁定 我最初把添加行的 onclick 寫在初始化函數(shù)里初始化函數(shù)又在某個條件下被調(diào)用了兩次結(jié)果點擊一次按鈕執(zhí)行了兩次渲染邏輯表格一次加兩行。后來用 console.log 統(tǒng)計執(zhí)行次數(shù)才發(fā)現(xiàn)。定位這類問題最快的方式在按鈕事件回調(diào)的第一行打印一條日志如果點一次出現(xiàn)兩條日志百分之百是事件被綁定了兩次。問題二增刪行時忘記同步數(shù)組 表格數(shù)據(jù)存在 tableData 數(shù)組里手動新增和刪除都要修改數(shù)組而不是直接操作 DOM。我第一版寫了一個刪除選中行的功能直接調(diào)用row.remove()數(shù)組里卻沒過濾對應(yīng)數(shù)據(jù)結(jié)果表格整體重渲染時被刪掉的行又復(fù)活了。這其實再次說明一個核心觀念DOM 是視圖數(shù)組是數(shù)據(jù)永遠(yuǎn)先改數(shù)據(jù)再讓視圖跟著數(shù)據(jù)變。問題三定時器沒有清理 如果用戶在倒計時過程中又觸發(fā)了一次開始比如重置按鈕新的 setInterval 與舊的并存兩個 interval 同時減少 remain倒計時速度直接翻倍。修復(fù)方法開啟新定時器前先用 clearInterval 清掉舊的或者用一個狀態(tài)變量做鎖。7.2 提交前必看的 12 項自測清單我在作業(yè)三提交之前做了一張自查表每檢查完一項就打勾。這里直接分享給你可以照抄去檢查你自己的作業(yè)檢查項預(yù)期結(jié)果首次加載頁面無報錯控制臺 Console 干凈省份下拉默認(rèn)只有請選擇不預(yù)填城市省份變化后城市清空再填充沒有殘留舊數(shù)據(jù)城市變化后區(qū)縣清空再填充同上連續(xù)快速切換省份不報錯沒有 undefined 相關(guān)異常添加行后表格序號連續(xù)與當(dāng)前行數(shù)一致相鄰?fù)械貐^(qū)的行能正確合并 rowSpan視覺上是一整塊合并發(fā)生后再添加不同地區(qū)行新的不相同行不參與合并姓名忽略大小寫校驗通過JS_TEST、js_test、Js_Test 都放行備注輸入全空格時提示為空trim 后長度 0倒計時每秒減 1 且歸零停止不出現(xiàn)負(fù)數(shù)定時器回調(diào)里的 this 可以正確訪問外部對象用箭頭函數(shù)或保存 this做完這 12 項檢查我基本可以放心把作業(yè)交上去了。上面列的每一項都是我用 console.log 和開發(fā)者工具的斷點逐條驗證過的雖然過程有點煩瑣但正因為如此我對這份作業(yè)里涉及的 DOM 操作和數(shù)據(jù)流有了比課堂上深得多的理解。最后再分享一個寫作業(yè)三時養(yǎng)成的小習(xí)慣每完成一個小功能立刻在瀏覽器里手動點一遍不要攢到最后一次性測試。我第一版把所有功能寫完才開始測結(jié)果屏幕上二十多個報錯堆在一起根本不知道先修哪個。改成每寫完三級聯(lián)動就測三級聯(lián)動每寫完表格合并就測表格合并之后每個模塊出錯的成本都降到了分鐘級。這個習(xí)慣一直帶到了我后來實習(xí)寫的真實項目里幫我躲過了不少上線前的驚喜。如果你現(xiàn)在正卡在某個模塊報錯也別急——在自己代碼里打斷點或者加 console.log把出錯的那一行打印出來通常比盯著代碼猜要快得多。希望這份作業(yè)三的記錄能幫你順利交差也順帶把背后的知識點真正學(xué)扎實。