開年第四份面經(jīng)總算抽出時間把這次前端開發(fā)實習(xí)生的面試過程完整記錄下來。之前三份都寫在日記里沒發(fā)出來這一份是因為面試完感觸特別深既有常規(guī)八股也有不少平時容易忽略的細節(jié)。如果你正打算投前端開發(fā)實習(xí)生崗位或者已經(jīng)在海投階段這篇面經(jīng)里的面試題、追問邏輯、我踩過的坑應(yīng)該能幫你少走一段彎路。先說下面試的基本盤投的是前端開發(fā)實習(xí)生崗位面試一共三輪兩輪技術(shù)一輪HR。技術(shù)面不是那種純背題的風(fēng)格面試官會順著你的回答一路往下挖挖到你說不出來為止。整個過程大概一小時出頭手寫題兩道項目深挖占了很大比重還有不少工程化、規(guī)范相關(guān)的問題。整體感受是基礎(chǔ)扎實比會多少框架更重要但只會基礎(chǔ)不聊工程化也很難走到最后。1. 前端實習(xí)生面試的整體結(jié)構(gòu)與準備思路1.1 一次前端開發(fā)實習(xí)生面試的完整流程先把這次面試的流程擺出來給大家一個整體認知。第一輪技術(shù)面大概四十五分鐘開頭是自我介紹緊接著是JavaScript基礎(chǔ)、瀏覽器原理、網(wǎng)絡(luò)協(xié)議這些常規(guī)內(nèi)容中間穿插兩道手寫題最后十分鐘留給我反問。第二輪技術(shù)面更偏項目和工程化面試官直接拿著我簡歷上的項目逐行問包括當時為什么這么設(shè)計、有沒有考慮過其他方案、上線之后有沒有遇到問題。第三輪是HR面聊的時間不長但會確認實習(xí)時長、到崗時間、團隊協(xié)作方式這些細節(jié)。有一個細節(jié)值得注意每一輪面試官都會在最后問“你還有什么想問我的”這不是走過場。我第一輪問的是團隊目前用的技術(shù)棧和規(guī)范第二輪問的是新人對代碼評審的參與程度HR面問的是實習(xí)生轉(zhuǎn)正的考核標準。這三個問題都不是臨時想的而是提前根據(jù)面試輪次準備的。第一次面試的時候我傻乎乎地說“沒有問題”后來復(fù)盤才意識到反問環(huán)節(jié)實際上是展示你思考深度和求職誠意的機會。1.2 我如何確定自己的復(fù)習(xí)優(yōu)先級面經(jīng)看得再多復(fù)習(xí)效率才是關(guān)鍵。我用了一個很笨但很有效的辦法把前端開發(fā)面試題按出現(xiàn)頻率和自己的薄弱程度打分然后只復(fù)習(xí)得分高的組合。高頻基礎(chǔ)題包括事件循環(huán)、閉包、原型鏈、this指向、Promise、瀏覽器緩存、跨域、虛擬DOM。這些幾乎是前端開發(fā)實習(xí)生面試繞不開的內(nèi)容。中頻題包括Vue響應(yīng)式原理、組件通信、路由模式、打包工具的基本配置。低頻但加分項包括性能優(yōu)化、前端工程化規(guī)范、代碼設(shè)計模式。為什么這樣排因為實習(xí)生崗位的核心考察點不是你會多少高級特性而是你的基礎(chǔ)能不能支撐團隊日常開發(fā)。面試官問Vue響應(yīng)式原理你如果能一級一級講到依賴收集、派發(fā)更新講清楚Object.defineProperty和Proxy的區(qū)別那說明你平時寫代碼不是單純復(fù)制粘貼。如果連事件循環(huán)里的微任務(wù)宏任務(wù)順序都說不明白那即使Vue API背得很熟面試官也很難相信你能獨立處理線上問題。2. 八股之外那些追問背后真正想考的東西2.1 工程化與規(guī)范意識從“能跑”到“能協(xié)作”這次面試里有一個問題讓我印象很深面試官問“你寫Vue項目的時候有沒有用過ESLint和Prettier如果團隊要求提交前必須過lint你一般怎么處理”這問題不難但我意識到他真正想考察的不是工具本身而是你有沒有經(jīng)歷過團隊協(xié)作的開發(fā)流程。很多自學(xué)的同學(xué)自己寫項目代碼能跑就行根本不會去配置規(guī)范。但真實團隊里代碼規(guī)范直接決定了一個項目的可維護性。面試官追問“如果同事提交的代碼格式和你不一致你會怎么處理”這個問題背后的潛臺詞是你遇到?jīng)_突時是抱怨還是主動溝通你有沒有統(tǒng)一規(guī)范、用工具自動化的意識。我當時的回答是確認團隊已經(jīng)使用的規(guī)范體系ESLint Prettier husky lint-staged安裝husky后在pre-commit鉤子里跑lint-staged保證只有暫存區(qū)的代碼被檢查如果和同事的規(guī)則沖突先在本地跑一遍同一版本的依賴排除版本不一致問題再在團隊里發(fā)起一次規(guī)范的調(diào)整討論遇到緊急修復(fù)時允許對個別規(guī)則加eslint-disable注釋但會備注原因。這個回答的作用不只是展示你會配置工具更是向面試官傳遞一個信息你知道代碼是寫給團隊看的不是只寫給機器看的。前端開發(fā)進入團隊協(xié)作后規(guī)范意識幾乎是第一課這一點在小團隊面試中尤其加分。前端開發(fā)規(guī)范里Vue項目的配置也有一些細節(jié)值得提前熟悉vue/multi-word-component-names規(guī)則要求組件名多個單詞避免和原生HTML標簽沖突vue/require-default-prop要求非必填prop給默認值vue/attribute-hyphenation統(tǒng)一模板中屬性寫法。如果你在面試里能隨口說出兩三條Vue相關(guān)lint規(guī)則面試官會覺得你真的在項目中踩過坑而不是只看了文檔。2.2 JavaScript函數(shù)細節(jié)...arg這類語法背后的能力面試官問了這樣一個問題“實現(xiàn)一個函數(shù)參數(shù)的個數(shù)不確定怎么傳入你平時寫過類似...arg的代碼嗎”我當時的第一反應(yīng)是這問題太基礎(chǔ)了直接說rest參數(shù)用法就行function foo(...arg) { return arg; }。但面試官沒有停在這里他繼續(xù)追問“...arg拿到的是一個數(shù)組還是類數(shù)組如果一個普通對象要用同樣的方式傳參怎么處理如果想要剩余參數(shù)和普通參數(shù)混用rest參數(shù)能不能寫在中間”這一串追問下來其實已經(jīng)不只是考運算符了而是在考“參數(shù)處理”這個真實業(yè)務(wù)場景的綜合能力。一個合格的前端開發(fā)寫組件封裝的時候幾乎天天要和參數(shù)打交道。rest參數(shù)、默認參數(shù)、解構(gòu)賦值、arguments、展開運算符這些不是孤立的知識點。我當時把回答展開成一份要點清單rest參數(shù)只能作為最后一個參數(shù)否則報錯rest參數(shù)本身是數(shù)組實例arguments是類數(shù)組需要Array.from或展開運算符轉(zhuǎn)數(shù)組默認參數(shù)結(jié)合解構(gòu)可以處理“空對象導(dǎo)致函數(shù)報錯”的防御性問題展開運算符可以用在函數(shù)調(diào)用、數(shù)組字面量、對象字面量中但注意對象展開只拷貝第一層多層嵌套仍然是引用。面試官對最后一點的反應(yīng)很積極說明他等的就是“淺拷貝”這個知識點。很多同學(xué)說到...arg就只會說“收集參數(shù)”但如果能往下接到“數(shù)組扁平化、淺拷貝深拷貝、函數(shù)柯里化”面試官會覺得你是真正理解了JS的數(shù)據(jù)流而不只是背了一個語法糖。這一小節(jié)的收獲是遇到語法細節(jié)題別停留在“它是什么”多想想“它用在哪些場景、有什么邊界條件”。3. 手寫題、項目深挖與工具鏈實戰(zhàn)3.1 兩道高頻手寫題防抖與深拷貝每個前端實習(xí)生面試基本都會遇到手寫題這次碰上的是防抖和深拷貝。防抖算是老朋友了但面試官提了一個細節(jié)“防抖函數(shù)返回的這個新函數(shù)如果被當作事件監(jiān)聽器怎么保證this指向正確怎么拿到event參數(shù)”如果只是簡單寫一個setTimeout包裹this指向會丟event參數(shù)也拿不到。我當時寫的是function debounce(fn, wait 300) { let timer null; return function (...args) { const context this; clearTimeout(timer); timer setTimeout(() { fn.apply(context, args); }, wait); }; }注意這里用箭頭函數(shù)包了一層內(nèi)部用apply綁定context這樣事件對象event會隨著args傳入this的指向也正確了。寫完后面試官問“如果希望第一次點擊立刻執(zhí)行之后才進入防抖節(jié)流怎么改”這就是leading edge的變種。我在原有基礎(chǔ)上加了一個immediate變量判斷首次是否立即調(diào)用。這類追問的意義在于考察你是否只有“背代碼”的肌肉記憶還是真能靈活調(diào)整邏輯。深拷貝那道題也踩了一個小坑。我一開始寫的是遞歸版本但面試官問“如果對象里有數(shù)組和Date對象怎么處理”我第一版只考慮了普通對象和數(shù)組Date對象直接被遞歸拆成了空對象。后來補了一版帶類型判斷的版本function deepClone(target) { if (target null || typeof target ! object) return target; if (target instanceof Date) return new Date(target.getTime()); if (target instanceof RegExp) return new RegExp(target.source, target.flags); if (Array.isArray(target)) { return target.map((item) deepClone(item)); } const result {}; for (const key in target) { if (Object.prototype.hasOwnProperty.call(target, key)) { result[key] deepClone(target[key]); } } return result; }這里我故意用了for...in配合hasOwnProperty沒有直接用Object.keys是因為for...in會遍歷到原型鏈上的可枚舉屬性雖然多數(shù)場景用Object.keys更合理但這樣寫能引出“原型鏈屬性是否應(yīng)該被拷貝”的討論。面試官果然追問了這一點我把“深拷貝應(yīng)該只拷貝自有屬性”這個原則講清楚后他點了點頭。手寫題考的從來不只是代碼能不能跑而是邊界情況和設(shè)計取舍。3.2 從hzero這類中后臺框架反推項目經(jīng)驗這次面試有個很特殊的環(huán)節(jié)面試官提到他們團隊有的項目是基于hzero前端框架開發(fā)的問我有沒有接觸過中后臺低代碼平臺。說實話我在校項目基本就是Vue3 Element Plus自己搭管理后臺沒有真正在hzero這種企業(yè)級框架上做過開發(fā)。但我沒有直接說“不會”而是把問題拆解成自己已有的知識和能遷移的部分。我先說明自己理解的中后臺框架核心痛點權(quán)限模型、菜單路由配置、表單渲染、代碼生成、多租戶隔離。hzero作為漢得開源的中后臺開發(fā)平臺本質(zhì)上是把常見的CRUD頁面、審批流、組織權(quán)限這些重復(fù)勞動抽象成配置和組件。我向面試官表達的觀點是框架可以快速上手但核心是理解它背后的“約定優(yōu)于配置”思想。就算沒實際用過hzero在Vue項目里寫路由守衛(wèi)、動態(tài)添加路由、根據(jù)后端返回的權(quán)限碼過濾按鈕顯示這些思路是通用的。面試官對這個回答接受度很高還補充了一句“框架只是殼關(guān)鍵是理解為什么要抽象出這一層”。如果有同學(xué)想提前了解這類中后臺框架建議在本地跑一個hzero的demo注意看幾個點前后端分離模式下前端如何拿到用戶信息和權(quán)限標識路由表如何根據(jù)權(quán)限動態(tài)生成通用查詢表單如何通過配置生成而非手寫每個搜索條件新頁面從零到上線需要改哪幾個文件。哪怕只跑通一個最簡單的列表頁對“企業(yè)級前端”都會建立真實的體感。說到trea這類“開發(fā)前端的后端”工具也沒什么玄的核心就是平臺把接口定義、數(shù)據(jù)模型、頁面模板打包在一起前端工程師學(xué)會讀平臺生成的代碼結(jié)構(gòu)比學(xué)會用平臺的每一個按鈕更重要。4. 前端AI開發(fā)面試新變量4.1 大模型輔助編程到底改變了什么面試官在第二輪快結(jié)束的時候問了一個很“未來向”的問題“你現(xiàn)在寫代碼會用AI工具嗎它給你帶來了什么改變”這是個好問題同時也是個陷阱題?；卮稹安挥谩憋@得你的工作流很落后回答“完全依賴”又會讓面試官擔心你沒有獨立思考能力。我當時的回答是AI工具寫代碼時主要承擔的是“快速生成模板代碼”和“解釋報錯”的角色比如讓我寫一個多級聯(lián)動表單組件我會先用AI生成一版框架然后逐行檢查狀態(tài)管理和接口聯(lián)調(diào)部分是否符合項目規(guī)范。原因是AI生成代碼看似完整實際在處理業(yè)務(wù)邊界條件時很容易出現(xiàn)“看起來對但邏輯錯”的情況。面試官又追問“如果AI生成的代碼有bug你一般怎么定位”我把排查思路分了三步先看報錯堆棧確定是運行時邏輯錯誤還是類型錯誤再結(jié)合項目里的日志或本地打印復(fù)現(xiàn)輸入數(shù)據(jù)最后把疑似出錯的函數(shù)單獨抽出來測試。重點強調(diào)“AI是加速器不是避風(fēng)港”寫出這行代碼的人要對它負責。這里其實想補充一個觀點現(xiàn)在前端AI開發(fā)工具已經(jīng)很多了Coplit、通義靈碼、Cursor底層模型能力都在線但團隊項目中使用它們有一個隱性成本——代碼風(fēng)格和規(guī)范一致性問題。如果團隊成員各自用AI補全代碼風(fēng)格會變得非常割裂。實習(xí)生在團隊里如果能看到這個問題并主動提出用lint和代碼評審來約束會是一個很加分的亮點。4.2 我如何用AI準備面試又不被AI帶偏這個算是給讀者的附加經(jīng)驗。準備面試的時候我會用AI生成一份“前端開發(fā)面試題”清單但不會直接背答案。我的做法是對每一道題目先自己回答一遍再用AI生成參考答案逐條對比差異找出自己回答里遺漏的知識點。舉個例子事件循環(huán)這道題AI會給出完整的宏任務(wù)微任務(wù)執(zhí)行順序。但實際面試時面試官更想聽你結(jié)合例子講。我自己造了一個混合setTimeout、Promise、async/await的執(zhí)行順序例子然后一步步推導(dǎo)輸出結(jié)果。AI給出的答案太“教科書化”一旦面試官加一個額外條件就可能翻車。我建議所有人準備面試題時都做一次“脫稿推演”把每個知識點用自己的話講一遍最好是能畫出一個流程或者給出一道變種題。另外AI整理的面經(jīng)經(jīng)常把題目按“雜、全、偏”分類其中一些偏題在實習(xí)生面試里出現(xiàn)概率極低比如手寫一個完整的Promise.allSettled、實現(xiàn)一個EventEmitter、手寫Vue3的reactive。這些內(nèi)容屬于加分項但如果基礎(chǔ)題都答不利索建議別把時間耗在這里。我在復(fù)習(xí)時會在AI給出的題目列表旁邊標注優(yōu)先級高頻基礎(chǔ)題務(wù)必滾瓜爛熟中頻框架題要能推導(dǎo)原理低頻偏題只做了解。5. 常見問題與排查技巧實錄5.1 面試中我踩過的三個坑第一個坑發(fā)生在第一輪技術(shù)面。面試官問“瀏覽器緩存有哪幾種”我第一時間想到的是localStorage和sessionStorage直接脫口而出。面試官停頓了一下又問“HTTP層面的緩存呢”我這才反應(yīng)過來他說的是強緩存和協(xié)商緩存。這個失誤提醒我前端開發(fā)面試題里的“緩存”有兩個完全不同的維度一個是瀏覽器存儲API一個是HTTP緩存策略。我當時趕緊把強緩存Expires、Cache-Control和協(xié)商緩存Last-Modified、ETag的流程補了一遍才算挽回一點印象分。第二個坑是算法題沒問清楚需求就開始寫。面試官給了“字符串去重”這道題我以為是普通的字符去重直接寫了Set版本。結(jié)果面試官補充“保留第一次出現(xiàn)的字符并且順序不能變。”Set版本其實也能滿足這個要求但如果沒問清楚很容易在輸出格式上出錯。后來我學(xué)到的教訓(xùn)是拿到題目先確認輸入輸出尤其是數(shù)據(jù)范圍和邊界情況然后在白板上寫出測試用例再動手。第三個坑和自我介紹有關(guān)。大一大二積累的很多校園項目其實和前端沒太大關(guān)系我把其中一個偏后端的數(shù)據(jù)分析項目講得太詳細面試官后來問“你這個項目里前端寫了哪些東西”的時候場面一度很尷尬。復(fù)盤之后我明白了面經(jīng)里的自我介紹環(huán)節(jié)不是讓你把二十多年的人生經(jīng)歷講完而是讓面試官在最快時間內(nèi)確認“這個人能直接上手干活”。所以介紹里應(yīng)該突出的是技術(shù)棧、項目中的前端部分、遇到的技術(shù)難點和解決過程其他內(nèi)容一律按需補充。5.2 一套可復(fù)用的面試題自檢清單面完之后我把這次面試涉及到的所有問題整理成了一份自檢清單這里分享給大家可以拿去對照復(fù)習(xí)?；A(chǔ)JS能力能說出事件循環(huán)的執(zhí)行順序并舉例驗證能區(qū)分淺拷貝和深拷貝并手寫至少一種深拷貝實現(xiàn)能解釋閉包的形成原理、內(nèi)存影響和使用場景能說明...arg和相關(guān)參數(shù)處理方式在真實組件封裝中的使用能實現(xiàn)防抖和節(jié)流并說明兩者區(qū)別Vue相關(guān)能畫出響應(yīng)式原理的數(shù)據(jù)流能說明v-if和v-show的適用場景能說出至少五種組件通信方式及適用邊界能解釋nextTick的作用和實現(xiàn)機制了解常見Vue lint規(guī)則工程化與協(xié)作能說明ESLint和Prettier的分工知道husky lint-staged的配置流程了解一個中后臺項目的前端目錄結(jié)構(gòu)理解動態(tài)路由和權(quán)限控制的基本思路AI工具與開發(fā)流程能說出自己用AI工具輔助開發(fā)的具體場景能說明如何定位AI生成代碼的bug理解AI生成代碼和團隊代碼規(guī)范的沖突點很多同學(xué)面試完只是機械地背下當時的錯題但這樣下一次換一個問法還是會出錯。我建議每次面試后都按照這個格式整理錯題原題是什么、我當時怎么答的、標準思路是什么、我漏了哪一層知識。這樣堅持幾場面試之后你會發(fā)現(xiàn)自己對同一個知識點的理解會越來越接近“系統(tǒng)級”而不是“碎片級”。5.3 給準備投前端實習(xí)生崗位的同學(xué)一些建議最后這段不是總結(jié)是我的切身體會。前端這個方向看起來入門門檻低隨便看幾天教程就能寫出頁面但真要走到面試環(huán)節(jié)區(qū)分度恰恰藏在那些“看起來不起眼”的地方。本次面試里讓我拉開差距的不是某一道難倒人的算法題而是面試官多次追問后我依然可以保持思路清楚、把底層原理講透的那些基礎(chǔ)問題。準備階段的時間分配我認為至少是五比三比二五成給JavaScript基礎(chǔ)和瀏覽器原理三成給Vue或React框架原理兩成給項目復(fù)盤和工程化。如果時間有限優(yōu)先把JavaScipt基礎(chǔ)砸實因為框架更新很快但語言和瀏覽器層面的底層邏輯一直是那些東西。還有一個小技巧找人模擬面試。不用找資深大佬找一個也在準備前端面試的朋友互相提問就行。關(guān)鍵是模擬真實的追問節(jié)奏這個比一個人悶頭背題有效得多。我當時和朋友模擬了三輪每一輪都會暴露新的知識盲區(qū)而且通過“講出來”的方式很多你以為自己會了但實際講不明白的知識點會被迅速暴露出來。希望大家都能拿到心儀的前端開發(fā)實習(xí)生offer。如果面完之后有問題想討論歡迎在評論區(qū)把具體題目拋出來我看到會盡量逐個回復(fù)。