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