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