2023年小滿春招第三批筆試這四個(gè)字放在一起信息量其實(shí)不小。“2023”意味著春招徹底恢復(fù)了線下節(jié)奏崗位競(jìng)爭(zhēng)烈度比前兩年明顯回暖“第三批”則更直白——前兩批已經(jīng)篩過(guò)一輪人到第三批筆試時(shí)剩余的候選池基本面已經(jīng)清楚了題目難度和考察深度往往會(huì)刻意再上一個(gè)臺(tái)階。HR流程越走越深筆試題的使命就從“過(guò)濾”變成了“分級(jí)”。這篇文章就拿這場(chǎng)筆試當(dāng)引子把前端校招筆試?yán)锏目疾爝壿?、核心考點(diǎn)、答題節(jié)奏和容易翻車的細(xì)節(jié)從頭到尾拆一遍。內(nèi)容同樣適用于準(zhǔn)備暑期實(shí)習(xí)、秋招提前批或者想跳槽但基本功不牢的前端同學(xué)。我盡量只講實(shí)操層面的東西哪些題必考、怎么寫才不會(huì)被扣分、時(shí)間怎么分配、哪些坑是每年都有人踩的。1. 春招第三批筆試的定位與考察邏輯1.1 “第三批”背后的招聘節(jié)奏與心理博弈春招一般從3月持續(xù)到5月很多公司會(huì)把崗位按批次拆開(kāi)第一批先撈簡(jiǎn)歷最亮眼的一撥人第二批補(bǔ)充一些項(xiàng)目經(jīng)歷扎實(shí)的到了第三批名額通常已經(jīng)所剩不多但簡(jiǎn)歷池里依然躺著大量備選。這種情況下筆試承擔(dān)的不再是單純的信息量測(cè)試更像一個(gè)公平的“雷達(dá)”——在面試官還沒(méi)見(jiàn)到你本人之前用一張卷子判斷你的基本功、思維習(xí)慣和工程意識(shí)。從候選人角度看第三批筆試有一種“末班車”心理前面有人已經(jīng)拿了offer自己還在流程里難免焦慮。但我見(jiàn)過(guò)太多反例——有人第一批就筆試結(jié)果準(zhǔn)備不足草草交卷有人第三批才進(jìn)場(chǎng)反而因?yàn)榍懊娣e累了大量面經(jīng)復(fù)習(xí)方向更精準(zhǔn)最后拿下offer。批次靠后不等于機(jī)會(huì)更小筆試成績(jī)是硬指標(biāo)誰(shuí)分高誰(shuí)進(jìn)和批次沒(méi)有直接關(guān)系。需要留意的是第三批筆試因?yàn)閸徫豢沼嗌偻ㄟ^(guò)線往往會(huì)比前兩批略高。這不一定體現(xiàn)在題目更難而是打分更嚴(yán)格同樣的代碼第一批可能看思路就給分第三批就會(huì)追問(wèn)實(shí)現(xiàn)細(xì)節(jié)、邊界處理和代碼風(fēng)格。說(shuō)白了錄取名額少的時(shí)候容錯(cuò)率就低。1.2 筆試的真正目的不是考倒你而是分級(jí)前端校招筆試覆蓋面很廣但單題難度其實(shí)并不會(huì)到競(jìng)賽級(jí)別。我拆過(guò)不少校招真題第一感受是出題人并不是想讓你考零分而是想通過(guò)題目組合把候選人快速分成三檔——只會(huì)用、懂原理、能落地?！爸粫?huì)用”的候選人能把Vue/React的API背得滾瓜爛熟但要他手寫一個(gè)深拷貝寫到循環(huán)引用就卡住“懂原理”的候選人能在選擇題里準(zhǔn)確判斷事件循環(huán)輸出順序卻寫不出一個(gè)健壯的并發(fā)控制函數(shù)“能落地”的候選人不一定每道題都完美但他對(duì)輸入輸出、邊界條件、異常情況都有意識(shí)代碼風(fēng)格干凈注釋到位。筆試成績(jī)還會(huì)直接決定面試走向。一面面試官拿到的筆試卷面是他追問(wèn)的技術(shù)地圖你錯(cuò)在哪他就問(wèn)哪你寫得粗糙的地方他會(huì)讓你現(xiàn)場(chǎng)重構(gòu)。所以筆試不是考完就結(jié)束的關(guān)卡它的人影響會(huì)延續(xù)到整個(gè)面試周期。很多候選人以為筆試只是敲門磚其實(shí)它是后續(xù)面試的劇本。2. 核心考點(diǎn)全景解析從語(yǔ)言基礎(chǔ)到工程化能力2.1 JavaScript基礎(chǔ)筆試的絕對(duì)主體前端筆試?yán)颙avaScript從來(lái)不是“一個(gè)板塊”而是占據(jù)半張卷子的核心主線。選擇題、手寫題、開(kāi)放題幾乎處處都能看到JS的身影。從歷年真題看?？嫉闹R(shí)點(diǎn)集中在五個(gè)方向作用域與閉包、this指向、異步與事件循環(huán)、數(shù)組方法、原型與繼承。作用域與閉包的經(jīng)典考法是一道for循環(huán)配合setTimeout的輸出順序。很多人第一次做都會(huì)錯(cuò)for (var i 0; i 5; i) { setTimeout(() console.log(i), 100); } // 輸出5 5 5 5 5換成let之后輸出變成0 1 2 3 4原理在于var聲明提升到函數(shù)作用域、循環(huán)結(jié)束i已經(jīng)變成5而let每次迭代都會(huì)創(chuàng)建一個(gè)新的詞法環(huán)境綁定。這個(gè)考點(diǎn)每隔幾年換層皮出現(xiàn)但它想考察的本質(zhì)一直沒(méi)變你是否理解變量作用域與閉包捕獲時(shí)機(jī)。this指向是另一個(gè)送命題集中地。普通函數(shù)調(diào)用、對(duì)象方法調(diào)用、構(gòu)造函數(shù)、箭頭函數(shù)四種場(chǎng)景下this的指向各不相同。筆試?yán)镒畛Ｒ?jiàn)的組合是先用call/apply/bind改變this再疊加一層箭頭函數(shù)最后問(wèn)輸出。能答對(duì)的人說(shuō)明對(duì)this綁定規(guī)則不是死記硬背而是真正理解了調(diào)用點(diǎn)決定this的原則。事件循環(huán)與Promise幾乎是必考的。別再只記“宏任務(wù)微任務(wù)誰(shuí)先執(zhí)行”的結(jié)論要能一步步推導(dǎo)setTimeout(() console.log(timeout)); Promise.resolve().then(() console.log(promise)); console.log(sync); // 輸出sync - promise - timeout這里的關(guān)鍵在于JS執(zhí)行同步代碼后先檢查微任務(wù)隊(duì)列再取出宏任務(wù)。微任務(wù)包括Promise回調(diào)、MutationObserver、queueMicrotask宏任務(wù)包括setTimeout、setInterval、I/O事件。兩個(gè)隊(duì)列各排各的微任務(wù)清空一次后才執(zhí)行一個(gè)宏任務(wù)然后繼續(xù)循環(huán)。很多人把“微任務(wù)先于宏任務(wù)”背成了結(jié)論遇到嵌套Promise和多個(gè)setTimeout就推錯(cuò)。2.2 HTML/CSS看似簡(jiǎn)單失分最多前端筆試?yán)镒钊菀妆惠p視的就是HTML和CSS。原因是前端同學(xué)容易覺(jué)得“這倆我天天寫還會(huì)考倒我”但實(shí)際上CSS的失分率往往比JavaScript還高。盒模型是萬(wàn)年?？蜆?biāo)準(zhǔn)盒模型的width指content寬度IE怪異盒模型的width包含contentpaddingborder。box-sizing: border-box的意義就在于我們?nèi)粘２季謺r(shí)希望width就是你視覺(jué)上的總寬而不是一層層累加。筆試?yán)锍Ｑ由斐觥敖o一個(gè)div設(shè)置width:200px; padding:20px; border:5px; content實(shí)際多寬”這樣的計(jì)算題看似簡(jiǎn)單但真的有人算錯(cuò)。BFC塊級(jí)格式化上下文是另一個(gè)高頻考點(diǎn)。題目通常這樣出父元素里有子元素設(shè)置了margin-top結(jié)果父子一起往下掉——這就是margin塌陷。解法是給父元素構(gòu)建BFC比如加overflow: hidden或display: flow-root。BFC還能解決浮動(dòng)高度塌陷、阻止元素被浮動(dòng)元素覆蓋。我建議把BFC理解為一塊獨(dú)立的“布局小世界”它內(nèi)部的元素跟外部互不干擾很多布局問(wèn)題的解法本質(zhì)都是建立隔離。flex和grid布局每年必有一道?？挤ㄒ词恰皩懗鲎屪釉卮怪彼骄又械拇a”要么是“實(shí)現(xiàn)一個(gè)兩欄布局左邊固定200px右邊自適應(yīng)”。flex居中三行代碼就能寫完但要注意flex主軸和交叉軸的方向——justify-content作用在主軸align-items作用在交叉軸主軸方向會(huì)隨flex-direction變化很多人一改方向就搞混。CSS選擇器優(yōu)先級(jí)也是一道常客!important 內(nèi)聯(lián)style id class/屬性/偽類 元素/偽元素同級(jí)別看數(shù)量。筆試?yán)锍Ｒ?jiàn)組合題比如div#app .item:hover是什么優(yōu)先級(jí)。規(guī)則不難但要寫對(duì)就得靜下心逐段數(shù)。2.3 框架與工程化從“會(huì)寫頁(yè)面”到“會(huì)寫應(yīng)用”到了框架與工程化板塊筆試考察的就不再是單個(gè)API好不好用而是你有沒(méi)有“應(yīng)用思維”——也就是把組件化、通信、構(gòu)建這些都串起來(lái)的能力。Vue和React二選一或都考不同公司的側(cè)重點(diǎn)不一樣。但有一個(gè)規(guī)律只要考生命周期就一定不是單純背名字。常見(jiàn)問(wèn)法是“在哪個(gè)生命周期發(fā)請(qǐng)求”“父子組件的生命周期執(zhí)行順序”“Vue3的setup替代了哪些鉤子”。這類題目背后的潛臺(tái)詞是你寫頁(yè)面時(shí)是否清楚什么時(shí)候該做什么事。比如在created里拿數(shù)據(jù)和在mounted里拿數(shù)據(jù)的區(qū)別很多人說(shuō)不清其實(shí)區(qū)別在于created階段組件實(shí)例已創(chuàng)建但DOM還未掛載數(shù)據(jù)請(qǐng)求與DOM無(wú)關(guān)時(shí)可以提前但依賴DOM尺寸的初始化就必須等到mounted。組件通信也是高頻props和事件、provide/inject、事件總線、vuex/pinia、Redux/Context每種方式適合什么場(chǎng)景筆試?yán)锍Ｒ?jiàn)的設(shè)計(jì)題是“封裝一個(gè)彈窗組件需要考慮哪些通信點(diǎn)”——打開(kāi)關(guān)閉的狀態(tài)由誰(shuí)控制、回調(diào)怎么傳、全局唯一還是局部實(shí)例。這道題沒(méi)有標(biāo)準(zhǔn)答案但答得好的人會(huì)提到“通過(guò)事件或狀態(tài)管理控制顯隱而不是讓彈窗自己管理”這就是組件設(shè)計(jì)的分水嶺。工程化方向的題Webpack是出題重災(zāi)區(qū)loader和plugin有什么區(qū)別構(gòu)建流程大概分幾步配置過(guò)哪些常見(jiàn)優(yōu)化項(xiàng)很多人只會(huì)npm run build于是這類題直接懵。我給一個(gè)穩(wěn)妥的回答思路loader本質(zhì)是文件轉(zhuǎn)換器把非JS模塊處理成JS能識(shí)別的模塊比如babel-loader把ES6轉(zhuǎn)ES5、css-loader解析CSS里的import、style-loader把CSS注入到style標(biāo)簽plugin則是在構(gòu)建生命周期里掛鉤子做額外處理比如HtmlWebpackPlugin生成HTML、MiniCssExtractPlugin提取CSS文件。如果能把“編譯流程解析配置—初始化—編譯—構(gòu)建—輸出”說(shuō)清楚已經(jīng)能贏過(guò)大部分人。2.4 算法與數(shù)據(jù)結(jié)構(gòu)固定的“送分”與“拉分”區(qū)間前端筆試的算法題難度通?？ㄔ凇癓eetCode中等偏下”很少出現(xiàn)難題怪題但考得很實(shí)用。這意味著算法主力準(zhǔn)備期的投入產(chǎn)出比很高把高頻題做熟比盲目刷五百道更有效。常考的類型很集中數(shù)組去重、字符串反轉(zhuǎn)、深拷貝、防抖節(jié)流、排序、斐波那契、爬樓梯。這些題有共同特點(diǎn)——都能在真實(shí)業(yè)務(wù)里找到對(duì)應(yīng)場(chǎng)景。數(shù)組去重對(duì)應(yīng)數(shù)據(jù)處理防抖對(duì)應(yīng)搜索框輸入爬樓梯對(duì)應(yīng)動(dòng)態(tài)規(guī)劃思維的入門。出題人的邏輯是我們不指望前端寫多復(fù)雜的算法但希望你具備把問(wèn)題拆解成小步驟并寫清楚的能力。算法題在筆試?yán)镎嫉姆种挡灰欢ㄗ罡叩鼪Q定了你的卷面上線。選擇題大家都靠記憶手寫題大多數(shù)人都能寫個(gè)大概真正拉開(kāi)差距的是代碼的完整性和邊界感。舉個(gè)例子寫快速排序時(shí)你是否處理了空數(shù)組二分查找時(shí)left (right - left) / 2還是(left right) / 2后者在極端情況下可能整型溢出。這些細(xì)節(jié)才是閱卷人最關(guān)注的“工程素養(yǎng)”信號(hào)。3. 筆試實(shí)操?gòu)?fù)盤拿到卷子后的完整時(shí)間線3.1 開(kāi)考前5分鐘先做戰(zhàn)略層決策很多候選人拿到卷子就開(kāi)始悶頭做這是最大的浪費(fèi)。一張校招筆試卷通常包含選擇題、填空題、手寫代碼題、開(kāi)放問(wèn)答題題型之間沒(méi)有回頭看的分值提示但每一類題目的用時(shí)差異很大。我的習(xí)慣是先用5分鐘通讀全卷明確題型、題量、分值然后把整場(chǎng)時(shí)間按比例切好。這里給一個(gè)可復(fù)用的時(shí)間分配參考假設(shè)筆試總時(shí)長(zhǎng)為90分鐘選擇題和填空題控制在20分鐘內(nèi)平均每題不超過(guò)1分半鐘手寫代碼題留50到60分鐘其中前10分鐘用來(lái)把每道題的思路在注釋里寫出來(lái)再動(dòng)手最后10分鐘通查一遍代碼補(bǔ)邊界條件檢查有沒(méi)有低級(jí)語(yǔ)法錯(cuò)誤。如果手寫題有三道寧可前兩道寫得完整也不要三道都只寫半截因?yàn)榘虢卮a很難給分完整的代碼即使思路樸素也能拿到大部分步驟分。通讀全卷還有一個(gè)額外收獲你會(huì)提前知道最后一道開(kāi)放題問(wèn)的是什么。答題過(guò)程中大腦其實(shí)會(huì)自動(dòng)在后臺(tái)幫你檢索相關(guān)經(jīng)驗(yàn)等做到最后一道題的時(shí)候思路往往已經(jīng)成型了。這就是“提前埋問(wèn)題”的妙處。3.2 選擇題里的“語(yǔ)言陷阱”與排查思路選擇題不是靠背誦就能穩(wěn)拿分的它考察的是精確記憶和快速排除的能力。前端筆試?yán)镉袔讉€(gè)“永恒的陷阱”幾乎每年換著角度出現(xiàn)。我先整理成一份速查供大家考前重點(diǎn)瀏覽題目陷阱正確認(rèn)知易錯(cuò)點(diǎn)typeof null返回object這是歷史遺留bug不是刻意設(shè)計(jì)[1,2] [3,4]返回1,23,4數(shù)組轉(zhuǎn)字符串后做字符串拼接[] ![]返回true兩邊都轉(zhuǎn)成數(shù)字后再比較5 - 3返回2減號(hào)會(huì)強(qiáng)制轉(zhuǎn)為數(shù)字加號(hào)則是字符串優(yōu)先NaN NaN返回false判斷NaN應(yīng)該用Number.isNaN0.1 0.2 0.3返回false浮點(diǎn)精度問(wèn)題穩(wěn)定比較用差值閾值遇到這類題千萬(wàn)不要憑“好像見(jiàn)過(guò)”的記憶來(lái)選要現(xiàn)場(chǎng)推導(dǎo)一遍。比如[] ![]拆解步驟是![]先運(yùn)算得false然后[] false兩邊都轉(zhuǎn)數(shù)字[]轉(zhuǎn)0false轉(zhuǎn)0所以為true。類似的題只要你肯動(dòng)筆拆解錯(cuò)誤率會(huì)大幅下降。排查選擇題還有一個(gè)技巧先排除掉明顯違背常識(shí)的選項(xiàng)再對(duì)剩余選項(xiàng)逐一構(gòu)造反例。比如題目問(wèn)“以下哪個(gè)數(shù)組方法會(huì)改變?cè)瓟?shù)組”map和filter都是返回新數(shù)組forEach返回undefined不改變?cè)瓟?shù)組splice和sort會(huì)改變。如果你不確定就在草稿紙上寫幾行代碼模擬const arr [3,1,2]; arr.sort(); console.log(arr)——輸出結(jié)果一看便知。3.3 手寫代碼題先寫思路注釋再寫實(shí)現(xiàn)手寫代碼題是整場(chǎng)筆試?yán)镒钅苷宫F(xiàn)工程素養(yǎng)的題型。閱卷人看的不只是最終結(jié)果還包括代碼結(jié)構(gòu)、邊界處理和注釋質(zhì)量。有一個(gè)特別實(shí)用的習(xí)慣動(dòng)手前先在注釋里把輸入、輸出、邊界條件和算法思路寫清楚。這既是給自己理清邏輯也是在不會(huì)寫完整代碼時(shí)保住步驟分的關(guān)鍵。以高頻的防抖函數(shù)為例先寫思路注釋/** * 防抖函數(shù) * 輸入func 需要防抖的函數(shù), wait 等待時(shí)間(ms) * 輸出返回一個(gè)防抖后的新函數(shù) * 邊界需保存 timer且要處理 this 指向和參數(shù)透?jìng)?*/ function debounce(func, wait) { let timer null; return function(...args) { const context this; if (timer) clearTimeout(timer); timer setTimeout(() { func.apply(context, args); }, wait); }; }這道題看似簡(jiǎn)單但很多人會(huì)漏掉this綁定和args透?jìng)?。不加apply(context, args)的話函數(shù)內(nèi)部的this在嚴(yán)格模式下會(huì)是undefined參數(shù)也會(huì)丟失。筆試?yán)镆坏朗謱戭}拿到完整分往往就是贏在這些細(xì)節(jié)。再看深拷貝的常見(jiàn)實(shí)現(xiàn)和它的問(wèn)題const clone1 JSON.parse(JSON.stringify(obj));這個(gè)寫法在面試和筆試?yán)镩L(zhǎng)期被當(dāng)作“簡(jiǎn)便做法”出現(xiàn)但它的缺陷非常明顯遇到undefined、Symbol、函數(shù)會(huì)直接丟掉遇到循環(huán)引用會(huì)拋錯(cuò)Date會(huì)變成字符串。稍微考深一點(diǎn)的題目就會(huì)要求實(shí)現(xiàn)一個(gè)能處理循環(huán)引用的深拷貝。合格版實(shí)現(xiàn)需要用到WeakMap記錄已拷貝對(duì)象function deepClone(obj, map new WeakMap()) { if (obj null || typeof obj ! object) return obj; if (map.has(obj)) return map.get(obj); const clone Array.isArray(obj) ? [] : {}; map.set(obj, clone); for (const key of Object.keys(obj)) { clone[key] deepClone(obj[key], map); } return clone; }這里用WeakMap而不是Map是為了避免在深拷貝大量數(shù)據(jù)時(shí)產(chǎn)生內(nèi)存泄漏——WeakMap的鍵是弱引用外部對(duì)象不再被引用時(shí)它可以被垃圾回收。很多候選人能寫出循環(huán)引用處理但說(shuō)不出為什么用WeakMap這層追問(wèn)才是真正區(qū)分實(shí)力的地方。3.4 開(kāi)放題的“結(jié)構(gòu)化答題法”開(kāi)放題不要求標(biāo)準(zhǔn)答案但閱卷人見(jiàn)過(guò)大量“口語(yǔ)化”的回答所以“結(jié)構(gòu)化”恰恰是拉開(kāi)差距的地方。比如“如何優(yōu)化首屏加載速度”如果把腦海里想到的點(diǎn)子零零散散全倒出來(lái)就顯得沒(méi)條理。我的建議是分維度回答資源體積、請(qǐng)求數(shù)量、渲染路徑、緩存策略。資源體積路由懶加載、代碼分割、Tree Shaking、壓縮混淆、開(kāi)啟gzip請(qǐng)求數(shù)量合并請(qǐng)求、雪碧圖/iconfont、小圖轉(zhuǎn)base64、合理使用CDN渲染路徑減少阻塞渲染的腳本、async/defer加載JS、CSS內(nèi)聯(lián)關(guān)鍵路徑樣式緩存策略強(qiáng)緩存與協(xié)商緩存結(jié)合、配合hash指紋管理靜態(tài)資源版本這樣回答哪怕每一部分都只提到兩三個(gè)點(diǎn)整體結(jié)構(gòu)也完整。更好的是你可以在末尾補(bǔ)充一句“具體方案需要結(jié)合項(xiàng)目的實(shí)際瓶頸比如通過(guò)Performance面板分析是網(wǎng)絡(luò)耗時(shí)還是渲染耗時(shí)”這會(huì)讓閱卷人覺(jué)得你有分析意識(shí)而不是單純背條目。4. 筆試后的技術(shù)復(fù)盤把試卷變成能力地圖4.1 從錯(cuò)題反推知識(shí)盲區(qū)筆試卷子交上去最有價(jià)值的不是你估分多少而是它幫你暴露了哪些不會(huì)的知識(shí)點(diǎn)。我強(qiáng)烈建議每一位候選人做完筆試后趁記憶還熱把題目按“完全不會(huì)、半會(huì)不會(huì)、粗心做錯(cuò)”三檔整理出來(lái)。完全不會(huì)的屬于系統(tǒng)性盲區(qū)需要投入整塊時(shí)間補(bǔ)半會(huì)不會(huì)說(shuō)明原理沒(méi)吃透需要深挖一到兩層粗心做錯(cuò)的則要針對(duì)性提醒自己在審題和邊界檢查上加強(qiáng)。我見(jiàn)過(guò)一個(gè)候選人筆試算法題用let在for循環(huán)里聲明變量但沒(méi)意識(shí)到var提升是另一回事于是選擇題里同類題也錯(cuò)了。他整理錯(cuò)題時(shí)發(fā)現(xiàn)自己所有和變量作用域相關(guān)的錯(cuò)題本質(zhì)都是同一個(gè)盲區(qū)。一次筆試能暴露這樣高價(jià)值的信息比多刷十道題還值得。4.2 筆試與面試的聯(lián)動(dòng)卷面是面試官的追問(wèn)地圖很多人不知道筆試結(jié)束后到面試之間的這段時(shí)間是你“定向復(fù)習(xí)”的黃金窗口。因?yàn)槊嬖嚬俅蟾怕蕰?huì)從你的筆試作答里挑幾個(gè)點(diǎn)展開(kāi)追問(wèn)。你手寫防抖只寫了主邏輯但沒(méi)處理this指向——面試官就會(huì)問(wèn)你“這里this指向誰(shuí)有沒(méi)有問(wèn)題”你選擇題選了typeof null是對(duì)象他可能接著問(wèn)“為什么會(huì)出現(xiàn)這種情況”。所以筆試結(jié)束后除了整理錯(cuò)題還要對(duì)每道答得不夠完整的題目準(zhǔn)備一個(gè)延伸解釋。比如你只會(huì)寫JSON.parse(JSON.stringify(obj))那就去弄清楚它為什么不能拷貝函數(shù)和循環(huán)引用你只會(huì)用flex居中那就去理解flex: 1到底是什么意思它展開(kāi)為flex-grow: 1; flex-shrink: 1; flex-basis: 0%每一個(gè)值的含義是什么。這種“舊題新問(wèn)”的準(zhǔn)備方式能讓你在面試?yán)镲@得特別扎實(shí)。4.3 建立自己的前端知識(shí)清單刷題、筆試、復(fù)盤、面試這一整條鏈路下來(lái)最終沉淀下來(lái)的東西應(yīng)該是一份屬于自己的知識(shí)清單。這份清單不需要很長(zhǎng)但每個(gè)知識(shí)點(diǎn)都應(yīng)該能回答三個(gè)問(wèn)題是什么、為什么需要它、它解決了什么痛點(diǎn)。舉例來(lái)說(shuō)“閉包”這個(gè)詞背熟了不代表你會(huì)用。你需要能說(shuō)閉包是在一個(gè)函數(shù)內(nèi)部創(chuàng)建另一個(gè)函數(shù)內(nèi)層函數(shù)可以訪問(wèn)外層函數(shù)作用域中的變量即使外層函數(shù)已經(jīng)執(zhí)行完畢。它能實(shí)現(xiàn)數(shù)據(jù)私有化比如模塊模式里暴露公共API但隱藏內(nèi)部變量它也會(huì)帶來(lái)內(nèi)存占用問(wèn)題因?yàn)殚]包引用的變量不會(huì)被回收。能講到這個(gè)層次筆試?yán)锏拈]包題基本不會(huì)再丟分。5. 高頻失分點(diǎn)與避坑指南5.1 只看API層面答不出原理追問(wèn)前端筆試?yán)铩氨矨PI”是最容易暴露的短板。比如問(wèn)“Vue3的響應(yīng)式原理”背下來(lái)的答案是ProxyReflect但一到追問(wèn)就崩。要答好這道題至少要知道三個(gè)層次Vue2用Object.defineProperty逐個(gè)劫持屬性所以新增屬性需要用Vue.setVue3用Proxy代理整個(gè)對(duì)象可以監(jiān)聽(tīng)新增和刪除Reflect用來(lái)保證this指針正確性還能讓后續(xù)默認(rèn)操作與代理邏輯共存。背到第一層只能過(guò)選擇題答到第三層才是真正的理解。5.2 忽略了進(jìn)制的“輸入輸出”邊界手寫代碼題得分不滿很多時(shí)候不是算法不會(huì)而是輸入輸出邊界處理不完整。比如寫數(shù)組去重有人用Set一行搞定但題目要求“不能使用Set”就丟分了寫字符串相關(guān)題沒(méi)處理空字符串寫深拷貝沒(méi)處理循環(huán)引用。這背后的核心問(wèn)題是對(duì)邊界條件不敏感這種能力在真實(shí)開(kāi)發(fā)中直接影響代碼質(zhì)量所以閱卷人尤其看重。我的建議是寫完主邏輯后強(qiáng)制自己在代碼末尾補(bǔ)一段邊界注釋標(biāo)注“空值處理”“重復(fù)值處理”“大數(shù)據(jù)量性能”這些要點(diǎn)。哪怕不寫代碼寫了注釋也會(huì)讓閱卷人覺(jué)得你有這個(gè)意識(shí)。5.3 時(shí)間分配失衡一道算法題卡死全局筆試?yán)镒钊菀鬃屓吮罎⒌氖悄车浪惴}卡了30分鐘解不出來(lái)回頭看時(shí)間不夠了后面的簡(jiǎn)單題也沒(méi)寫。這是最虧的失分方式。正確做法是單道題最多卡15分鐘如果完全沒(méi)有思路先跳到下一題把能拿的分全部拿到最后再回來(lái)啃硬骨頭。一個(gè)實(shí)用的技巧遇到完全沒(méi)思路的題先在注釋里寫下你的第一反應(yīng)和大概方向比如“這題看起來(lái)可以用雙指針但細(xì)節(jié)還沒(méi)理清”。在閱卷時(shí)這屬于有效試錯(cuò)至少能讓你拿到思路分。比空白的答題區(qū)域好太多。5.4 筆試題經(jīng)常出現(xiàn)的“隱藏約束”筆試題目里有一些容易被忽視的約束條件往往是得分關(guān)鍵。例如要求“不要修改原數(shù)組”你用了splice直接掛掉要求“盡量降低時(shí)間復(fù)雜度”你寫了個(gè)雙重for循環(huán)的O(n2)解法思路對(duì)但會(huì)被扣分要求“用ES5實(shí)現(xiàn)”你寫了箭頭函數(shù)和const直接違規(guī)。每次拿到題先用筆把題目中所有約束詞圈出來(lái)能不能用內(nèi)置方法、輸入范圍、返回值要求、時(shí)間復(fù)雜度要求。這些都是踩分點(diǎn)也是失分重災(zāi)區(qū)。最后說(shuō)幾句實(shí)在話我在實(shí)際看簡(jiǎn)歷和面試的過(guò)程中發(fā)現(xiàn)一個(gè)規(guī)律筆試分?jǐn)?shù)高的候選人未必是項(xiàng)目經(jīng)歷最漂亮的但一定是對(duì)基礎(chǔ)知識(shí)有“確定感”的人。他不慌因?yàn)槊鎸?duì)任何一道題他都知道考察點(diǎn)是什么知道自己為什么這么寫。這種確定感不是天賦而是大量刷題、復(fù)盤、補(bǔ)盲區(qū)之后磨出來(lái)的。第三批筆試聽(tīng)著像是搭末班車但它也意味著前面很多人已經(jīng)放棄了或者拿到了更好的機(jī)會(huì)。而你還在牌桌上這本身就是好事。把基礎(chǔ)過(guò)一遍、把節(jié)奏調(diào)好、把邊界想全這場(chǎng)筆試就是一次值得的實(shí)戰(zhàn)演練。還有一個(gè)我自己的習(xí)慣每次筆試結(jié)束后不管結(jié)果如何我都會(huì)把試卷里的錯(cuò)題整理成一篇學(xué)習(xí)筆記隔兩周再重做一遍。筆試?yán)餂](méi)有一道題是白做的你踩過(guò)的每一個(gè)坑在后面的項(xiàng)目里都會(huì)以另一種方式再遇到。這就是前端這個(gè)行業(yè)最實(shí)在的公平。