2019年校招季前端崗的筆試堪稱“千軍萬馬過獨木橋”。我當時幫公司出了兩套前端筆試題又陸續幫朋友內推的同學復盤了十幾份卷子對校招筆試的門道算是摸得比較透。前端筆試的題目表面上考的是JavaScript、CSS、算法實際看的是你在大學四年里有沒有建立扎實的計算機基礎以及遇到陌生問題時能不能快速找準思路。這篇文章就把2019年那一批典型題目拿出來從題型設計、考點邏輯到答題策略逐一拆解。如果你正在準備前端校招或者剛帶新人想找一套靠譜的摸底題這篇內容可以幫上不少忙。1. 整體設計與思路拆解為什么前端校招筆試長這樣2019年前端筆試的格局基本是“計算機基礎 JS語言 一兩道手寫代碼 框架認知”四件套。這套組合不是出題人拍腦袋定的而是由前端崗位的真實工作場景倒推出來的。那時候的前端開發已經從“切頁面寫腳本”進化到了工程化階段。Vue 2.x 和 React 16.x 是市場主流webpack 4 是標配構建工具TypeScript 還沒完全普及但已經在社區里冒頭。社招看重項目經驗校招沒項目可看只能看基礎功底。所以筆試題里大量出現的作用域、閉包、事件循環、原型鏈本質上是在替面試官回答一個問題這個人沒寫過真實業務但給他一個復雜組件他能不能靠扎實的語言功底快速上手另一個容易被忽略的設計意圖是崗位篩選。前端筆試往往和Java、C筆試題放在同一場甚至共用一部分計算機基礎題。很多公司會把“數組和指針的區別”“Linux常用命令”“內存分配方式”這類題放進前端卷就是為了篩選出計算機科班出身、有完整知識體系的人。非科班同學如果只刷過JS框架在這類題上會非常吃虧。所以你在復習時千萬別只盯著框架要把數據結構、操作系統、計網的基礎知識補起來。再從公司角度看筆試的性價比其實很高。一場筆試能同時覆蓋幾百上千人成本比一輪輪面試低得多。為了在有限時間內測出水平出題人必須讓題目有區分度。太簡單的題大家都會太偏的題大家都不會理想的筆試題是“60%基礎分 30%中等分 10%拔高題”。比如一道防抖函數的實現寫完的人能拿基礎分能主動考慮this綁定和參數傳遞的人拿中等分能順手加上cancel方法和立即執行選項的人拿拔高題分。所以準備筆試題的正確姿勢不是背題而是理解每個題型的考察目標用目標反推自己缺什么。接下來我按考點分類把2019年考得最頻繁的內容一個個拆開講。2. 核心考點拆解與實操要點2.1 JavaScript語言基礎筆試的重頭戲JavaScript基礎是所有前端筆試題里占比最高的部分沒有之一。2019年的題目尤其喜歡在“this指向”“閉包”“事件循環”“原型鏈”這幾個點上做文章。原因是這幾個點直接反映候選人有沒有真正理解JS的運行機制而不是停留在“會用API”的層面。以this指向為例經典考法是這樣的const obj { name: frontend, getName: function() { return this.name; } }; const fn obj.getName; console.log(fn()); // 輸出什么答案是 undefined而不是 frontend。因為fn被賦值后在全局環境調用this指向window嚴格模式下是undefined。很多人栽在這個題上不是不知道規則而是沒有形成“看調用位置不看定義位置”的條件反射。我當時帶新人時發現只要把“this指向調用者”這句話反復強調再配合 call/apply/bind 的對比題正確率能明顯提上來。事件循環也是高頻考點。2019年筆試題里經常出現這樣的代碼setTimeout(() console.log(timeout), 0); Promise.resolve().then(() console.log(promise)); console.log(sync);正確輸出順序是 sync、promise、timeout。這里的關鍵在于微任務和宏任務的執行時機同步代碼先執行然后清空微任務隊列最后才輪得到宏任務。筆試時我建議不僅要寫出順序還要在注釋里標注“微任務”“宏任務”的字樣這樣即使答案順序寫錯了面試官也能看到你知道這個概念多少會給點分。閉包是另一個必考點。出題形式很多樣但萬變不離其宗。一道典型題是for (var i 0; i 3; i) { setTimeout(() console.log(i), 0); }輸出是三個3而不是0、1、2。原因就是var聲明的變量是函數作用域循環結束后i已經變成3三個閉包引用的是同一個i。改成let聲明或者用立即執行函數包裹一層就能得到0、1、2。這道題考察的是對作用域、閉包、異步的綜合理解看似簡單實際很能拉開差距。原型鏈的考法相對直接常見的是實現一個繼承、比較 instanceof 和 prototype.isPrototypeOf 的區別或者讓你畫出某個構造函數和實例之間的原型鏈關系。準備這類題時我建議自己動手畫一遍 obj - obj.proto- Function.prototype - Object.prototype 這條鏈畫明白了基本就不會亂。2.2 手寫代碼與算法題最拉分的板塊2019年校招前端筆試題里手寫代碼題的數量比前兩年明顯增多。這和行業對“前端工程師”定位的變化有關只會調庫的時代過去了大家開始要求前端具備一定的算法功底和代碼設計能力。出鏡率最高的幾道手寫題我列一下數組去重防抖和節流深拷貝數組扁平化手寫 Promise.all實現一個簡單的發布訂閱先說數組去重。2019年ES6已經普及直接寫[...new Set(arr)]是最簡潔的答案。但很多人忽略了一點Set去重無法處理對象去重而且面試官往往緊接著會問“如果數組里是對象怎么做去重”。這時候就要補充 Map 或 reduce 的方案按對象的某個唯一屬性去重。筆試時建議先答最簡單方案再主動擴展說明邊界情況這樣能展示思考深度。防抖和節流是必背題我幾乎沒有見過哪套前端卷子不考這個。防抖的核心是每次觸發重置定時器function debounce(fn, delay) { let timer null; return function(...args) { clearTimeout(timer); timer setTimeout(() { fn.apply(this, args); }, delay); }; }注意fn.apply(this, args)這行很多人寫漏了this綁定和參數透傳結果在測試時發現丟失上下文。節流同理核心是用一個標記位判斷是否在冷卻期function throttle(fn, interval) { let canRun true; return function(...args) { if (!canRun) return; canRun false; setTimeout(() { fn.apply(this, args); canRun true; }, interval); }; }我在批改試卷時發現絕大多數人能寫出大體框架能寫對this綁定的人只有三成左右。所以這個點一定要當心。深拷貝也是一道經典題。簡單版是遞歸判斷屬性類型復雜版要處理數組、Date、RegExp、循環引用。2019年的題目一般只要求實現對象和數組的深拷貝但如果你能主動提到“用WeakMap解決循環引用問題”分數會明顯不一樣。我一直覺得手寫題的核心不只是“寫出來”而是“寫出讓面試官愿意繼續跟你聊下去的實現方式”。算法題方面2019年前端筆試的難度整體低于后端。常見的是鏈表反轉、二叉樹層序遍歷、斐波那契數列、字符串翻轉之類的題目。刷題時沒必要死磕困難題把 LeetCode 的簡單到中等題刷完基本足夠。重點要掌握的是復雜度分析因為很多筆試題會要求你寫出時間復雜度和空間復雜度這一項往往是被忽略的送分點。2.3 計算機基礎與擴展知識前端崗位的“隱藏關卡”計算機基礎是2019年校招筆試題里最有意思的部分因為它經常讓純前端方向的同學措手不及。大題記里搜“數組和指針筆試題”“linux筆試題”“java筆試題”熱度都非常高說明這不是個別公司的偏好而是行業的普遍要求。數組和指針的區別是C語言里的經典題出現在前端卷子里主要是考察候選人的計算機功底。核心區別要能說清數組名是常量指針不能自增自減數組用下標訪問是直接尋址指針通過移動位置訪問數組的大小在編譯期確定指針本身占8字節64位系統或4字節32位系統。你要是沒學過C語言這些概念確實容易懵但復試階段很多公司也接受你用JavaScript里的“引用值”概念對比說明畢竟前端實際用的是JS。Linux筆試部分考得最多的是文件操作命令、端口查看、日志檢索和權限管理。我見過的高頻題包括用命令查找某個進程并殺掉、查看某個端口是否被占用、統計日志文件行數、從日志里篩選出現最多的IP。典型答案查進程ps -ef | grep nginx殺進程kill -9 進程號查端口netstat -tunlp | grep 8080統計行數wc -l app.log查出現次數最多的IPawk {print $1} app.log | sort | uniq -c | sort -nr | head -n 10Linux在筆試題里的地位有點微妙。它不會像JS題那樣占大塊篇幅但一道題就能篩掉一批沒接觸過服務器的候選人。我當時給公司的建議是前端卷子放一道Linux命令題就夠了重點不在考多深而是看候選人有沒有具備“代碼寫完得自己能部署”的意識。2019年前端工程化已經普及不懂部署的前端確實不太好找工作。至于Java筆試題的熱度高也和前端崗位招聘的變化有關。很多公司的技術筆試是統一出題前端后端共用一個題庫只是各取一部分。前端卷子里偶爾會出現幾道類似“Java和JavaScript的區別”的題。答這類題時不用深入Java語法把“Java是編譯型靜態類型語言JavaScript是解釋型動態類型語言”“Java跑在JVM上JS跑在瀏覽器或Node.js上”“Java類是面向對象的核心JS基于原型鏈”幾個核心差異寫清楚就行。2.4 網絡、安全與工程化技術認知的試金石除了語言基礎和計算機基礎網絡、安全和工程化也是2019年前端筆試題的?？?。這些題不會直接考你寫代碼卻最能反映候選人對“前端開發工程師”這個崗位的理解深度。網絡題的最高頻考點是“從輸入URL到頁面渲染的完整過程”。這道題幾乎是大廠必考也是我個人非常喜歡的一道題因為它能把候選人拉到同一個水平線上看知識面。標準答案一般包括七步DNS解析獲取IP建立TCP連接發起HTTP請求服務器處理并返回響應瀏覽器解析HTML生成DOM樹解析CSS生成CSSOM并合成渲染樹最后布局繪制。2019年流行的追加問法是“HTTPS的握手過程和HTTP/2的新特性”能答出TLS證書校驗和二進制幀的人通常網絡基礎都不會差。HTTP狀態碼也是高頻小題。?？嫉挠?00成功、301永久重定向、302臨時重定向、304協商緩存命中、400請求錯誤、401未認證、403無權限、404找不到資源、500服務器內部錯誤、502網關錯誤、503服務不可用。2020年以后多了一個協議升級的101但2019年還很少考。我建議一次把狀態碼分成“2xx成功、3xx重定向、4xx客戶端錯誤、5xx服務端錯誤”四類記憶考試時就算碰到沒見過的狀態碼也能靠分類推測含義。安全題主要是XSS、CSRF、SQL注入三個方向。前端卷子里考得最多的是XSS和CSRF的區別。核心答題思路XSS是攻擊者往頁面注入惡意腳本危害是竊取用戶信息CSRF是攻擊者誘導用戶發起非本意請求危害是以用戶身份執行操作。防范手段要寫具體XSS用對用戶輸入轉義和CSP策略CSRF用同源檢測、Token校驗和自定義Header。這些點即使不是直接工作內容但也是高級前端的基本素養。工程化題在2019年逐漸變多尤其是webpack相關。常見問題有Loader和Plugin的區別、tree-shaking原理、如何做代碼分割。Loader是文件處理Plugin是構建流程鉤子兩者不是同類事物不能混為一談。tree-shaking依賴ES6模塊的靜態分析把沒有用到的導出代碼在打包時去掉。能把這些說清楚說明你至少看過webpack文檔寫過配置文件這在當時已經超過不少候選人了。3. 一套可參考的2019年前端筆試題實錄3.1 試卷結構與題目列表紙上談兵了半天我直接給出一套基于2019年真實考情編排的模擬卷子題量和難度按一線互聯網公司的標準來。題量控制在60分鐘內完成也就是校招筆試常見的題量。一、單選題每題4分共20分typeof null的結果是 A. object B. null C. undefined D. number執行下面的代碼輸出順序是setTimeout(() console.log(A), 0); Promise.resolve().then(() console.log(B)); console.log(C);A. A B C B. C B A C. C A B D. B C A下面哪個操作會改變原數組 A. slice() B. concat() C. splice() D. join()HTTP狀態碼304代表什么含義 A. 請求成功 B. 資源未修改使用緩存 C. 重定向 D. 服務端錯誤let和var在以下哪個方面不同 A. 作用域 B. 變量類型 C. 是否支持字符串 D. 是否存在于全局對象二、填空題每空3分共15分在瀏覽器中全局變量a可以通過訪問___對象下的屬性來獲取。實現數組降維的ES6方法叫做 ___。Promise 的三種狀態分別是 pending、___ 和 rejected。和的區別在于后者不僅比較值還比較 ___。Vue 中用于在模板中綁定事件的指令是 ___。三、編程題每題10分共30分寫一個防抖函數要求在連續觸發時不執行停止觸發300ms后執行且能正確綁定this。給定數組[1, [2, [3, [4]], 5]]用任意方式將數組扁平化要求寫出兩種實現方法。實現一個函數輸入一個對象輸出它的深拷貝不需要考慮函數和循環引用。四、簡答題共35分簡述從瀏覽器地址欄輸入 URL 到頁面展示的完整過程并說明其中哪些環節會影響頁面性能。15分簡述 XSS 和 CSRF 的原理與防范方式。10分寫出至少三個 Linux 常用命令并說明其用途如查看進程、查看端口、查看日志。10分3.2 答案解析與得分點這套題的覆蓋邏輯很簡單選擇題考語言細節填空題考知識面編程題考動手能力簡答題考認知深度。下面逐個說得分點。第1題選A。typeof null 返回 object 是JS的歷史遺留bug但這道題沒難度純粹是送分題答錯說明基礎不太牢。第2題選B。同步代碼C先執行Promise微任務B其次setTimeout宏任務A最后。得分點只在于順序但如果你在解析里寫了“微任務先于宏任務執行”可以酌情加1分有助于提醒你在后面的編程題里也注意這個邏輯。第3題選C。splice會直接修改原數組slice和concat返回新數組join返回字符串。這道題其實是在變相考察數組API的返回值類型答案是硬記型的但理解“可變”和“不可變”的概念更重要。第4題選B。304表示協商緩存生效服務器告訴瀏覽器“你可以直接用本地緩存”。2019年這道題正確率不算高很多候選人一看到4開頭的狀態碼就以為是錯誤記憶技巧是“4xx是瀏覽器的問題3xx是資源轉移304算重定向分支里的特例”。第5題選A和D。這是個多選題A是作用域var函數作用域、let塊級作用域D是let不會掛載到window上var會。出多選題是為了增加區分度這里能全對的人說明對ES6的理解比較透徹。第6題填window。在非嚴格模式下全局var聲明的變量會掛在window上。嚴格模式下var全局聲明依然掛載window但在模塊作用域內不是這樣。這道題和前面的第5題有聯動關系。第7題填flat。數組扁平化的原生方法ES2019才正式發布。2019年校招時這個方法剛普及很多人不知道所以會要求手寫實現。這也是為什么第12題要你寫兩種方法至少一種要手寫遞歸或者reduce遞歸。第8題填fulfilled。這個術語和resolved經?；煊玫珮藴室幏独锸莊ulfilled。筆試閱卷時會接受resolved但建議平時習慣用fulfilled看起來更專業。第9題填數據類型。嚴格比較先比較類型再比較值。一道2分的填空題其實蠻能暴露基本功的。第10題填v-on或者等價寫法。Vue指令是當時前端主流框架的常識題。選React卷子的版本可能會問JSX的key屬性有什么用崗位方向不同題面不同。編程題第11題是防抖。完整評分點有三個存在timer變量3分、cleartimeout重置3分、正確綁定this并透傳參數4分。很多人卡在第三點說明對函數上下文理解不夠。推薦答案在2.2節已經寫過了這里不再重復。第12題數組扁平化。兩種實現思路分別給分第一種用ES6的遞歸function flatten(arr) { return arr.reduce((acc, cur) Array.isArray(cur) ? acc.concat(flatten(cur)) : acc.concat(cur), []); }第二種用ES10的 flatconst flatten arr arr.flat(Infinity);只要能把兩種都寫出來這題基本滿分。如果還能提到“flat默認只扁平化一層傳Infinity才能全展開”說明你注意過API的邊界行為可以額外加分。第13題深拷貝。最簡單可用function deepClone(obj) { if (typeof obj ! object || obj null) return obj; const clone Array.isArray(obj) ? [] : {}; for (let key in obj) { if (obj.hasOwnProperty(key)) { clone[key] deepClone(obj[key]); } } return clone; }得分點是判斷基本類型3分、判斷數組和對象的區別3分、用hasOwnProperty過濾原型屬性2分、遞歸處理嵌套屬性2分。如果你在這個版本之外主動提到“JSON.parse(JSON.stringify())有丟失undefined和函數的隱患”這道題的回答質量就會明顯高于平均水平。第14題是送分題中的拉分題。拿到12分起步的標準是寫出DNS解析、TCP連接、HTTP請求、服務器返回、瀏覽器渲染這五段。想拿更高分數需要補充三段構建DOM樹和CSSOM、合成渲染樹、布局與繪制。如果想拿滿分我教你一個獨家技巧把影響性能的環節單獨標出來。比如“DNS解析可以走DNS緩存預解析”“TCP連接可以考慮HTTP/2的多路復用”“JS腳本會阻塞DOM解析需要加defer或async”。2019年的時候能寫出這些的候選人幾乎都能順利進到后面的技術面試。第15題XSS和CSRF的設計意圖是想看看你有沒有前端安全防護的意識。XSS的核心是輸入不可信防范重點在轉義和CSPCSRF的核心是請求身份偽造防范重點在Token和同源校驗。兩者概念不用寫多么復雜但一定要分開表述很多人寫混了直接被扣掉一半分數。第16題Linux命令是熱詞里關注度比較高的部分。給分點就看命令是否常用、解釋是否到“用途”層面。就寫“ps -ef 查看進程”“netstat -tunlp 查看端口”“tail -f 跟蹤日志”每寫對一個命令加3分解釋清晰再加1分。能寫出“grep 管道 sort uniq”組合篩選日志的這題基本就是滿分了。4. 常見問題與排查技巧實錄4.1 候選人心態與時間管理避坑我閱過不少2019年的筆試答卷也見過很多候選人出的“低級錯誤”。最大的問題不是知識不會而是時間分配不合理。前端筆試題一般是60到90分鐘單選題和填空題看著分數小但往往數量多。如果你按順序死磕一道不熟悉的選擇題后面編程題可能來不及寫。我的建議是先花2分鐘掃一遍所有題目判斷題目的難度分布先做會做的編程題只要有了大概思路可以先快速寫出來框架再回頭補細節。不要為一道2分的選擇題糾結超過2分鐘編程題的十分一檔遠比選擇題值錢。第二個常見問題是代碼格式混亂。筆試系統里寫代碼縮進亂、分號缺失、變量名用a/b/c都會讓面試官對你印象打折扣。平時練習時就要養成規范寫代碼的習慣尤其是手寫題一條條邏輯寫清楚、注釋標注關鍵步驟等于直接給閱卷人遞答案。我見過有候選人編程題思路完全正確但寫在卷面上沒有換行閱卷老師愣是沒看懂最后只給了基礎分。第三個問題是環境不熟。很多筆試平臺用的是在線編輯器沒有代碼補全和語法高亮。你平時在IDE里寫代碼有提示到了筆試環境可能連括號都找不到。建議考試前專門去牛客網或者公司指定的筆試平臺練幾道題熟悉在線編輯器的交互避免因為編輯器不好用而影響速度。4.2 面試官視角的評分邏輯站在出題人的角度閱卷時我首先看的是“這位候選人有沒有完成度意識”。完成度意識體現在這幾點第一選擇題寧可跳過去也不要亂猜。跳過的題不會扣分亂猜的題大概率錯誤且浪費了時間還會讓閱卷人覺得你基礎不穩。第二編程題哪怕寫不出來完整代碼也要寫出思路。寫“先用遞歸遍歷對象的屬性如果是對象就繼續遞歸否則直接賦值”這樣的說明文字也能拿兩三分。第三簡答題能列點就不要寫大段文字。列點說明你結構化思維強閱卷人也更容易找到得分點。另一個容易被忽略的規則是“字跡”。在線筆試雖然不存在字跡但代碼的格式跟字跡是一個道理。規范的縮進、合理的變量命名、清晰的分段都會在閱卷時產生正向的“暈輪效應”。說白了面試官也是人看到干凈的代碼主觀上就愿意多給你幾分。4.3 刷題自查清單我把2019年真題練習時的核心清單整理一下按重要性排列JavaScriptthis指向、閉包、事件循環、原型鏈、數組常用方法、Promise、async/await。Web APIDOM事件流、localStorage與sessionStorage區別、fetch與axios區別。手寫代碼防抖、節流、深拷貝、數組去重、數組扁平化、手寫Promise、發布訂閱。計算機基礎數組與指針的區別、棧與堆、TCP三次握手、HTTP與HTTPS、狀態碼。Linux查看進程、查看端口、查看日志、文件權限、文本檢索?？蚣芘c工程化Vue生命周期、data為什么必須是函數、webpack的Loader與Plugin、tree-shaking。安全與性能XSS、CSRF、輸入URL到頁面渲染、重排與重繪、懶加載。這套清單覆蓋了90%以上的考點。你可以一條條對照著去自查哪塊薄弱就補哪塊。刷題方法上我特別推薦“三遍法”。第一遍裸做不看書不查資料測試自己的真實水平第二遍帶著答案回顧把每一道題涉及的知識點拓展開來寫在題目旁邊第三遍合上答案重做一遍篩選出仍然卡殼的題這些就是你的知識盲區要重點突破。三遍下來一套題的效果能頂刷三套題。我在帶新人的時候反復強調筆試不是學習的終點而是查漏補缺的起點。2019年的這些題目放到今天來看基礎的JavaScript考點依然沒過時ES6仍然是面試的主戰場手寫題也依然是大廠篩人的硬指標。按這套思路踏踏實實準備不管題目怎么換你都能穩住基本盤。