與工程思維全復(fù)盤)
1. 用友校招筆試題的考察邏輯這不是一道題而是一套篩選漏斗老規(guī)矩先聊聊這份題出現(xiàn)的背景。用友作為國內(nèi)老牌的企業(yè)服務(wù)廠商它的校招筆試題一直有個(gè)鮮明特點(diǎn)不追求算法題刷到天昏地暗而是重點(diǎn)關(guān)注基礎(chǔ)功、編碼習(xí)慣和知識面的廣度。2017年這個(gè)時(shí)間點(diǎn)尤其特殊——前端工程化剛剛開始普及Vue 2.0 發(fā)布不到一年React 16 還沒出來ES6 已經(jīng)大面積落地但好多應(yīng)屆生還在寫 var。所以這份筆試題二雖然在今天看來有些基礎(chǔ)題已經(jīng)成了常識但它的命題思路和考察維度對現(xiàn)在準(zhǔn)備校招、社招的人依然有很強(qiáng)的參考意義。整套筆試題的考察邏輯可以拆成三個(gè)層次。第一層是語言基礎(chǔ)主要是 JavaScript 的核心機(jī)制比如作用域、閉包、原型鏈、this 指向這種跑不掉的考點(diǎn)這一層篩掉的是背過 API 但沒理解原理的人。第二層是瀏覽器與頁面開發(fā)涉及 DOM 操作、事件機(jī)制、CSS 布局與兼容性這一層篩掉的是只會(huì)在框架里寫業(yè)務(wù)脫離框架就不知道怎么干活的人。第三層是綜合能力典型的表現(xiàn)形式是一道需求描述模糊的編程題你不僅要寫對還要考慮健壯性、擴(kuò)展性這一層篩掉的是能跑就行從不思考工程質(zhì)量的人。有趣的是用友筆試題并不是純粹意義上的難它考的很多是你在實(shí)際項(xiàng)目中經(jīng)常遇到、但未必深究過的細(xì)節(jié)。比如你天天用 addEventListener但你有沒有想過同一個(gè)元素上綁定的多個(gè)事件按什么順序執(zhí)行你天天寫 CSS 實(shí)現(xiàn)水平垂直居中但讓你列出三種以上方案并說明每種方案的適用場景你會(huì)不會(huì)突然卡殼這種題考察的不是刷題量而是有沒有真正用心寫過代碼。這篇文章我就以筆試題二這份卷子為主線把它可能覆蓋的知識點(diǎn)和實(shí)際開發(fā)中的關(guān)聯(lián)做一次完整復(fù)盤。不管你是正在準(zhǔn)備校招的應(yīng)屆生還是想自查基礎(chǔ)功是否扎實(shí)的在職前端這份拆解都值得花幾分鐘過一遍。2. JavaScript 核心考點(diǎn)this 指向、閉包與原型鏈的連環(huán)追問2.1 this 指向題四種調(diào)用方式一個(gè)都不能混筆試題里最常見的 with 系列題之一就是給出幾段代碼問你輸出是什么然后解釋為什么。這類題的底層邏輯其實(shí)就是 this 的四種綁定規(guī)則默認(rèn)綁定非嚴(yán)格模式下獨(dú)立函數(shù)調(diào)用 this 指向 window瀏覽器環(huán)境嚴(yán)格模式下 this 為 undefined。隱式綁定作為對象方法調(diào)用時(shí)this 指向該對象。顯式綁定通過 call、apply、bind 調(diào)用時(shí)this 指向傳入的第一個(gè)參數(shù)。new 綁定通過 new 調(diào)用構(gòu)造函數(shù)時(shí)this 指向新建的實(shí)例對象。優(yōu)先級上new 綁定 顯式綁定 隱式綁定 默認(rèn)綁定。實(shí)話說第一條和第四條大部分人都記得牢容易翻車的是隱式綁定和顯式綁定的組合題以及隱式綁定丟失這個(gè)經(jīng)典陷阱。var name global; var obj { name: obj, getName: function() { return function() { return this.name; }; } }; console(obj.getName()()); // 輸出什么這段代碼輸出 global。原因很簡單obj.getName()返回的是一個(gè)普通函數(shù)當(dāng)這個(gè)函數(shù)被獨(dú)立調(diào)用時(shí)this 已經(jīng)和 obj 沒有任何關(guān)系了走的是默認(rèn)綁定規(guī)則。很多人在這里會(huì)下意識認(rèn)為閉包會(huì)保留 this 的指向這是完全錯(cuò)誤的。閉包保留的是變量作用域不是 this 綁定。如果面試官繼續(xù)追問怎么讓它輸出 obj答案無非是三個(gè)在外層var self thisES6 之前最常用的方式或者用箭頭函數(shù)箭頭函數(shù)沒有自己的 this繼承定義時(shí)的詞法作用域或者返回前顯式.bind(this)。這個(gè)考點(diǎn)在實(shí)際項(xiàng)目里的映射特別典型。比如你寫一個(gè) Vue 組件在 methods 里用了setTimeout或者注冊了某個(gè)回調(diào)函數(shù)如果回調(diào)用的是普通 function里面的 this 就會(huì)丟。2017 年那會(huì)兒好多剛從 jQuery 轉(zhuǎn) Vue 的開發(fā)者都在這個(gè)問題上踩過坑——jQuery 里大量使用回調(diào)函數(shù)this 又頻繁被 jQuery 內(nèi)部改寫指向 DOM 元素和 Vue 的 this 語義完全不同。所以這道題考的不是一個(gè)孤立的語法知識點(diǎn)而是你能不能理解 this 是函數(shù)調(diào)用時(shí)確定的而不是定義時(shí)確定的 這句話的真正含義。2.2 閉包會(huì)做題只是入門能說清實(shí)踐價(jià)值才叫懂閉包題基本上所有前端筆試題的標(biāo)配用友也不例外。典型題目是給出一段循環(huán)加 setTimeout 的代碼for (var i 0; i 5; i) { setTimeout(function() { console.log(i); }, 100); }輸出結(jié)果是五個(gè) 5這個(gè)大多數(shù)人都知道。但筆試題的進(jìn)階版往往會(huì)要求你能寫出修復(fù)方案并說明每種方案背后的機(jī)制。修復(fù)方式至少有三種。第一種是立即執(zhí)行函數(shù) 傳參for (var i 0; i 5; i) { (function(j) { setTimeout(function() { console.log(j); }, 100); })(i); }這相當(dāng)于在每次循環(huán)時(shí)創(chuàng)建了一個(gè)新的函數(shù)作用域setTimeout 回調(diào)通過閉包捕獲了每次傳入的 j。第二種是 ES6 的 letfor (let i 0; i 5; i) { setTimeout(function() { console.log(i); }, 100); }let 在 for 循環(huán)的塊級作用域中每次迭代都會(huì)創(chuàng)建一個(gè)新的綁定回調(diào)閉包捕獲的是當(dāng)次迭代的 i。第三種是 bind for (var i 0; i 5; i) { setTimeout(console.log.bind(console, i), 100); }這個(gè)方案其實(shí)挺取巧的直接把 i 作為參數(shù)預(yù)先傳給 console.log不再依賴閉包捕獲變量。我當(dāng)年看到這種題的時(shí)候就在想實(shí)際開發(fā)中到底有用嗎答案是太有用了。比如你要給一組異步請求的結(jié)果做批量渲染或者在一個(gè)循環(huán)里給每個(gè)元素綁定事件處理器凡是遇到循環(huán)中創(chuàng)建異步回調(diào)的場景這個(gè)考點(diǎn)就會(huì)從筆試題變成線上 bug。我記得有一個(gè)真實(shí)案例同事在 for 循環(huán)里批量創(chuàng)建了上傳請求回調(diào)里用了循環(huán)變量作為文件索引結(jié)果全部上傳完成后取索引取到的全是最后一個(gè)。排查到的原因就一句話閉包捕獲的是變量本身而不是變量當(dāng)前的值。2.3 原型鏈構(gòu)造函數(shù)、實(shí)例、原型對象的三角關(guān)系原型鏈的考題花樣比較多但核心就一張三角關(guān)系圖構(gòu)造函數(shù)有 prototype 屬性指向原型對象原型對象有 constructor 屬性指回構(gòu)造函數(shù)實(shí)例內(nèi)部有一個(gè)__proto__現(xiàn)在推薦用 Object.getPrototypeOf指向原型對象。用友筆試?yán)镞@類題容易出現(xiàn)的形式是function Person(name) { this.name name; } Person.prototype.sayName function() { console.log(this.name); }; var p new Person(Tom); console.log(p instanceof Person); // true console.log(p instanceof Object); // true console.log(p.constructor Person); // true console.log(Person.prototype.constructor Person); // true每一行輸出你都能答對只能算及格。真正的加分項(xiàng)是你能不能當(dāng)場畫出來 p、Person、Person.prototype 三者之間的引用關(guān)系并且解釋清楚instanceof的機(jī)制——它是沿著__proto__鏈逐級查找看左側(cè)對象的原型鏈上有沒有右側(cè)構(gòu)造函數(shù)的 prototype 對象。再進(jìn)一步如果面試官在此基礎(chǔ)上問你Person.prototype { name: default, sayName: function() { console.log(this.name); } }; var p2 new Person(Jerry); console.log(p2.constructor Person); // false console.log(p2.constructor Object); // true這就是筆試中一個(gè)比較深的考點(diǎn)當(dāng)你直接給 Person.prototype 整體賦值一個(gè)新對象時(shí)這個(gè)新對象沒有 constructor 屬性了所以順著原型鏈找到了 Object。很多框架源碼里會(huì)做這樣一行修正Person.prototype.constructor Person;為什么要這么干因?yàn)楹芏喙ぞ邘?、類型判斷、組件實(shí)例化機(jī)制會(huì)依賴 constructor 屬性來反向獲取構(gòu)造函數(shù)。你平時(shí)用 Vue 的時(shí)候感覺不到這回事但如果你自己寫組件庫或者用 mixin 方式擴(kuò)展類這種細(xì)節(jié)就會(huì)直接影響代碼正確性。3. 瀏覽器與事件機(jī)制從冒泡/捕獲到事件委托的實(shí)戰(zhàn)延伸3.1 事件傳播的三個(gè)階段與 addEventListener 的第三個(gè)參數(shù)前端筆試特別愛考事件模型。DOM 事件的完整傳播路徑包含三個(gè)階段捕獲階段從 window 沿 DOM 樹向下到目標(biāo)元素、目標(biāo)階段到達(dá)目標(biāo)元素、冒泡階段從目標(biāo)元素沿 DOM 樹向上回到 window。div idouter div idinner點(diǎn)擊我/div /divvar outer document.getElementById(outer); var inner document.getElementById(inner); outer.addEventListener(click, function() { console.log(outer 冒泡); }); inner.addEventListener(click, function() { console.log(inner 冒泡); }); outer.addEventListener(click, function() { console.log(outer 捕獲); }, true); inner.addEventListener(click, function() { console.log(inner 捕獲); }, true);如果把這段代碼放到瀏覽器里點(diǎn)擊 inner控制臺的輸出順序是outer 捕獲 → inner 捕獲 → inner 冒泡 → outer 冒泡。注意在目標(biāo)階段事件監(jiān)聽器的觸發(fā)順序取決于注冊順序而不是捕獲/冒泡標(biāo)志。如果希望在事件到達(dá)目標(biāo)元素時(shí)只觸發(fā)一次可以用{ capture: true }加{ once: true }或者直接在函數(shù)內(nèi)部調(diào)用stopPropagation。但這里有個(gè)隱藏的坑stopPropagation只是阻止事件繼續(xù)傳播并不會(huì)阻止同元素上其他監(jiān)聽器的執(zhí)行如果你需要阻止后續(xù)監(jiān)聽器得用stopImmediatePropagation。這個(gè)知識點(diǎn)是 2017 年筆試?yán)锉容^細(xì)節(jié)控的題目放到實(shí)際工作中它直接對應(yīng)的是表單驗(yàn)證、動(dòng)態(tài)組件事件隔離等場景。3.2 事件委托筆試?？嫉嬲煤玫娜瞬欢嗍录械脑硎抢檬录芭菰诟冈厣辖y(tǒng)一監(jiān)聽事件通過判斷 target 來決定執(zhí)行哪個(gè)邏輯。筆試常考方式有兩種一是問你下列代碼ul上綁定的 click 事件如何得知點(diǎn)擊的是哪個(gè)li二是讓你實(shí)現(xiàn)一個(gè)通用的委托函數(shù)。var list document.getElementById(list); list.addEventListener(click, function(e) { var target e.target; while (target ! null target ! list) { if (target.tagName LI) { console.log(target.textContent); break; } target target.parentNode; } });這里用 while 循環(huán)是因?yàn)?e.target 可能不是li而是li內(nèi)部的某個(gè) span 或者 a 標(biāo)簽必須向上查找。另一種更簡潔的做法是使用closest方法list.addEventListener(click, function(e) { var li e.target.closest(li); if (li list.contains(li)) { console.log(li.textContent); } });closest在 2017 年那會(huì)兒兼容性還沒有現(xiàn)在這么好但現(xiàn)在已經(jīng)是現(xiàn)代瀏覽器的標(biāo)配了。閉卷筆試一般不會(huì)讓你寫closest因?yàn)榭嫉氖窃?。但如果你在試卷上用了closest并解釋清楚它和 while 循環(huán)的等價(jià)關(guān)系就能體現(xiàn)你對新 API 的掌握程度。事件委托的價(jià)值在于如果在一個(gè)列表上有 1000 個(gè) li 每個(gè)都綁定事件處理器內(nèi)存開銷和初始化耗時(shí)都是不可忽視的用委托方案只需要在父元素上綁定一個(gè)處理器新增子節(jié)點(diǎn)也無需重新綁定。這在動(dòng)態(tài)渲染列表、表格、菜單這類高頻使用場景中非常普遍。Vue 的事件監(jiān)聽和 React 的合成事件系統(tǒng)本質(zhì)上都借鑒了事件委托的思路——React 會(huì)在根容器上統(tǒng)一綁定事件再按照虛擬 DOM 的路徑分發(fā)。所以這道題答得好不好代表的不只是你會(huì)不會(huì)用 addEventListener而是你有沒有從瀏覽器機(jī)制的角度去理解主流框架的設(shè)計(jì)。3.3 事件循環(huán)基礎(chǔ)題和壓軸題的分水嶺JavaScript 是單線程語言事件循環(huán)機(jī)制決定了異步代碼的執(zhí)行順序。2017 年的筆試題已經(jīng)出現(xiàn) setTimeout、Promise、async/await 混合的題型了雖然那時(shí)候 async/await 還不像現(xiàn)在這么普及但 Promise 已經(jīng)是?？汀onsole.log(script start); setTimeout(function() { console.log(setTimeout); }, 0); Promise.resolve() .then(function() { console.log(promise1); }) .then(function() { console.log(promise2); }); console.log(script end);輸出順序是script start → script end → promise1 → promise2 → setTimeout。這個(gè)結(jié)果背后的規(guī)則是Promise.then屬于微任務(wù)會(huì)在當(dāng)前宏任務(wù)結(jié)束、下一個(gè)宏任務(wù)開始之前執(zhí)行setTimeout屬于宏任務(wù)即使延遲時(shí)間設(shè)置為 0也要等到當(dāng)前調(diào)用棧清空且微任務(wù)隊(duì)列清空后才執(zhí)行。所以setTimeout 0并不是立刻執(zhí)行而是要排到所有微任務(wù)之后。這個(gè)考點(diǎn)對后續(xù)理解前端性能優(yōu)化非常重要——如果你把一些關(guān)鍵邏輯放在微任務(wù)里它可以比 setTimeout 更早執(zhí)行但如果在微任務(wù)里又產(chǎn)生了大量微任務(wù)就會(huì)造成長任務(wù)阻塞渲染。用友筆試如果考到這里通常還會(huì)附加追問process.nextTickNode 環(huán)境和Promise.then誰先執(zhí)行答案是process.nextTick在 Node 里比微任務(wù)還要優(yōu)先。但如果你是在瀏覽器環(huán)境開發(fā)一般你只需要掌握瀏覽器的事件循環(huán)就夠用了。4. CSS 布局與兼容性從盒子模型到多方案居中的完整拆解4.1 盒子模型標(biāo)準(zhǔn)模型和 IE 模型的區(qū)別必須背到骨子里CSS 的盒子模型題目在筆試中幾乎是送分題但也最容易丟分。標(biāo)準(zhǔn)盒子模型中元素占據(jù)的總寬度 contentcontent-box寬度 padding border而 IE 盒子模型box-sizing: border-box中元素指定的寬度已經(jīng)包含了 padding 和 border。如果你寫了一個(gè)寬度為 100px、padding 為 20px、border 為 5px 的標(biāo)準(zhǔn)盒子實(shí)際占用的寬度是 150px而換成 border-box元素的實(shí)際內(nèi)容區(qū)只有 50px。用友作為面向企業(yè)服務(wù)的廠商對兼容性的關(guān)注度歷來很高所以這道題背后藏著一個(gè)實(shí)際生產(chǎn)問題老項(xiàng)目里充滿各種被 padding 撐爆的布局 bug。2017 年那會(huì)兒移動(dòng)端適配流行REM border-box的方案核心原因就是 border-box 讓布局計(jì)算更直觀你定了 100px它就是 100px不管里面怎么加 padding。所以現(xiàn)在幾乎所有組件庫的全局樣式都會(huì)加這么一句*, *::before, *::after { box-sizing: border-box; }這不算什么高深的技巧但如果你是 2017 年參加筆試的應(yīng)屆生能主動(dòng)說出這句重置代碼并解釋為什么組件庫普遍這么做這就是加分項(xiàng)。4.2 水平垂直居中的三種方案必須知道為什么筆試?yán)锞又蓄}的另一大考法是給你一個(gè)父容器和子元素要求寫出至少三種水平垂直居中方案并說明各自的適用場景。以下是我在項(xiàng)目里最常用的幾種:方案一flex 布局.parent { display: flex; justify-content: center; align-items: center; }這是目前最推薦的方式代碼簡潔語義清晰。缺點(diǎn)是對老舊瀏覽器IE10 以下支持不好但 2017 年之后做企業(yè)級系統(tǒng)一般也只需要兼容 IE11。方案二絕對定位 transform.parent { position: relative; } .child { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }使用 transform 做偏移不會(huì)影響文檔流也不需要知道子元素的寬高。但如果子元素內(nèi)部有文本縮放或使用了某些特效transform 偶爾會(huì)帶來渲染精度問題比如文字輕微模糊。它還有一種變體是利用 margin 負(fù)值但要求子元素寬高固定所以反而不太推薦。方案三grid 布局.parent { display: grid; place-items: center; }一行搞定2017 年筆試基本不會(huì)要求這個(gè)因?yàn)榧嫒菪赃€不行但現(xiàn)在做內(nèi)部系統(tǒng)或現(xiàn)代瀏覽器環(huán)境是完全沒問題的。如果將來面試官問grid 和 flex 怎么選你就說 grid 擅長二維布局flex 擅長一維布局居中只是它們的子集能力。這類題目真正想考察的不是你能不能背出這三種方案而是你會(huì)不會(huì)根據(jù)場景做取舍。如果你回答一律用 flex說明你考慮得不夠全面如果你能主動(dòng)說明如果子元素寬度不定、高度由內(nèi)容撐開transform 方案最穩(wěn)如果有大量文本需要換行則推薦 flex text-align: center這才是加分答案。4.3 移動(dòng)端適配與常見兼容性陷阱用友這類企業(yè)級應(yīng)用2017 年已經(jīng)有不少移動(dòng)端 H5 項(xiàng)目了所以 CSS 里大概率會(huì)有一道移動(dòng)端適配題。常見的考點(diǎn)是 viewport 設(shè)置meta nameviewport contentwidthdevice-width, initial-scale1.0 /以及在什么情況下會(huì)出問題如果 initial-scale 設(shè)置成小于 1 的值會(huì)導(dǎo)致排版視口變寬頁面整體被縮小。很多團(tuán)隊(duì)的模板里會(huì)刻意地寫成這樣meta nameviewport contentwidthdevice-width, initial-scale1.0, maximum-scale1.0, user-scalableno /禁止縮放確實(shí)在某些場景下能避免頁面錯(cuò)亂但是對無障礙訪問非常不友好所以現(xiàn)在的主流實(shí)踐已經(jīng)不再強(qiáng)制 user-scalableno 了。如果用友筆試考到這個(gè) meta 字段你可以順勢說明 accessibility 的考量這會(huì)讓面試官覺得你不是背答案而是真的在思考用戶體驗(yàn)。兼容性陷阱里還有一個(gè)高頻考點(diǎn)inline-block 元素之間的空白間隙。兩個(gè) span 或兩個(gè) li 如果中間有換行或空格渲染出來會(huì)有一個(gè)約 4px 的間隙解決辦法包括去掉空格、給父容器設(shè)置 font-size: 0、使用 flex、或者用 margin 負(fù)值。筆試如果結(jié)合代碼讓你解釋為什么兩個(gè) inline-block 布局的盒子中間多了一小段空白你一定要答出這是因?yàn)?HTML 源碼中的空白字符被渲染成了空格而不是什么神秘的 bug。這個(gè)問題的實(shí)際發(fā)生頻率遠(yuǎn)超你的想象——尤其是在 CMS 后臺管理系統(tǒng)某個(gè)列表的按鈕之間莫名多了間距排查半天發(fā)現(xiàn)是模板引擎渲染時(shí)在元素之間插入了換行符。5. ES6 語法進(jìn)階與編碼題實(shí)戰(zhàn)箭頭函數(shù)、解構(gòu)賦值、Promise 與數(shù)組算法5.1 箭頭函數(shù)不是函數(shù)簡寫那么簡單箭頭函數(shù)在 2017 年的筆試題里已經(jīng)是必考重點(diǎn)了它和普通函數(shù)的核心區(qū)別包括沒有自己的 this箭頭函數(shù)中的 this 是在定義時(shí)從外層詞法作用域繼承的。不能用作構(gòu)造函數(shù)換句話說不能對它使用 new。沒有 arguments 對象如果需要使用類數(shù)組參數(shù)得用 rest 參數(shù)。不能使用 yield所以不能作為生成器函數(shù)。常見考題有var obj { name: obj, getName: () { return this.name; } }; console.log(obj.getName()); // 輸出什么輸出結(jié)果取決于外層作用域如果這段代碼直接運(yùn)行在全局環(huán)境中嚴(yán)格模式下 this 是 undefined非嚴(yán)格下是 windowwindow.name 大概是空字符串。因?yàn)榧^函數(shù)的 this 跟 obj 沒關(guān)系它是在定義時(shí)綁定了外層詞法作用域。有不少人以為對象方法里用箭頭函數(shù)就能讓 this 指向?qū)ο筮@是完全的誤解。實(shí)際開發(fā)中箭頭函數(shù)最常見的應(yīng)用場景就是事件回調(diào)和異步回調(diào)比如button.addEventListener(click, () { // 這里的 this 不會(huì)因?yàn)槭?click 回調(diào)而改變 });但也有反例需要警惕如果動(dòng)態(tài)綁定 this 是你的核心訴求比如在 Vue 的 methods 里使用箭頭函數(shù)定義方法就會(huì)導(dǎo)致內(nèi)部的 this 無法指向組件實(shí)例。這是 2017 年從 jQuery 轉(zhuǎn) Vue 的人最常犯的錯(cuò)誤之一。5.2 解構(gòu)賦值、擴(kuò)展運(yùn)算符與模板字符串筆試的默寫題這些題目往往不會(huì)非常難但需要答得準(zhǔn)、答得快。比如解構(gòu)賦值交換兩個(gè)變量[a, b] [b, a]注意不需要臨時(shí)變量。擴(kuò)展運(yùn)算符復(fù)制數(shù)組與對象合并const arr2 [...arr1]、const merged { ...obj1, ...obj2 }。模板字符串中嵌入表達(dá)式hello ${name}。實(shí)際筆試中考解構(gòu)賦值最常見的坑是變量聲明的缺省值和函數(shù)參數(shù)默認(rèn)值function foo({ x 10, y 20 } {}) { console.log(x, y); } foo(); // 10 20 foo({ x: 1 }); // 1 20如果函數(shù)參數(shù)沒有默認(rèn)值 {}直接調(diào)用foo()就會(huì)因?yàn)榻鈽?gòu) undefined 而報(bào)錯(cuò)。這個(gè)細(xì)節(jié)可以作為筆試題的加分點(diǎn)很多應(yīng)屆生知道解構(gòu)但不知道給參數(shù)整體一個(gè)默認(rèn)空對象。在企業(yè)級應(yīng)用里函數(shù)常常接收一個(gè)配置對象尤其是組件封裝時(shí)function createWidget(options {})這種防御式寫法非常常用。5.3 Promise 的實(shí)現(xiàn)層次從會(huì)用到會(huì)鏈?zhǔn)秸{(diào)用再到會(huì)手寫Promise 幾乎是所有前端筆試的必考點(diǎn)。用友的筆試題二如果只考到Promise 有幾種狀態(tài)狀態(tài)是否可以逆轉(zhuǎn)那屬于基礎(chǔ)題。狀態(tài)有 pending、fulfilled、rejected 三種一旦從 pending 變到其他狀態(tài)就不能再變了。但如果繼續(xù)加強(qiáng)度就會(huì)變成這樣一道題var p1 new Promise((resolve, reject) { setTimeout(() resolve(p1), 1000); }); var p2 new Promise((resolve, reject) { setTimeout(() resolve(p2), 500); }); Promise.all([p1, p2]).then((res) { console.log(res); // [p1, p2]等待所有 Promise 完成后才執(zhí)行 });以及它的變體Promise.race([p1, p2]).then((res) { console.log(res); // p2因?yàn)?p2 先 resolve });Promise.all有一個(gè)重要特點(diǎn)只要有一個(gè) Promise reject整體就 reject并且當(dāng)有一個(gè) reject 時(shí)它并不會(huì)取消其他 Promise 的執(zhí)行。很多實(shí)際開發(fā)中的 bug 就來自這里——你用了 Promise.all 發(fā)起三個(gè)請求其中一個(gè)失敗另外兩個(gè)請求仍然在跑甚至可能產(chǎn)生副作用。如果你在筆試題里能主動(dòng)提到失敗時(shí)不建議繼續(xù)等待其余請求這就是經(jīng)驗(yàn)的價(jià)值。更進(jìn)一步如果面試官問如何實(shí)現(xiàn)一個(gè)帶并發(fā)限制的 Promise 調(diào)度器那就是在考察你是否理解異步控制流。這種題在我做過的校招簡歷里很少見能答完整的但如果能答出來基本上就是 offer 候選人了。5.4 數(shù)組去重與排序一道簡單的題能有多少種解法前端筆試經(jīng)?？紨?shù)組去重因?yàn)樗慕夥ㄌ貏e多每種解法都能暴露你對 JavaScript 核心 API 的熟悉程度。常見解法有// 方法一Set function unique(arr) { return [...new Set(arr)]; } // 方法二filter indexOf function unique(arr) { return arr.filter((item, index) arr.indexOf(item) index); } // 方法三Map 標(biāo)記 function unique(arr) { var map new Map(); return arr.filter((item) { if (!map.has(item)) { map.set(item, true); return true; } return false; }); }如果數(shù)組里有對象Set 和 indexOf 都不能按照對象的內(nèi)容去重因?yàn)閷ο蟊容^的是引用。如果有 NaNarr.indexOf(NaN)返回 -1因?yàn)?indexOf 內(nèi)部使用嚴(yán)格相等NaN ! NaN。但 Set 可以正確去重 NaN。這兩種細(xì)節(jié)都是面試追問的經(jīng)典方向。再配合一道排序題比如手寫快排function quickSort(arr) { if (arr.length 1) return arr; var pivotIndex Math.floor(arr.length / 2); var pivot arr.splice(pivotIndex, 1)[0]; var left []; var right []; for (var i 0; i arr.length; i) { if (arr[i] pivot) { left.push(arr[i]); } else { right.push(arr[i]); } } return quickSort(left).concat([pivot], quickSort(right)); }快排平均時(shí)間復(fù)雜度 O(n log n)最壞情況 O(n^2)退化的原因在于每次選基準(zhǔn)都選到了最大值或最小值導(dǎo)致左右兩部分極不均衡。如果用友筆試讓你手寫排序再用幾句話說明時(shí)間復(fù)雜度那基本就覆蓋了一輪面試的算法考察了。6. 綜合編程題的解題思路需求模糊、邊界不清時(shí)你如何展示工程思維綜合編程題才是這張卷子里最容易拉開差距的部分。它通常不會(huì)寫得太明確而是像真實(shí)需求一樣給你一段描述讓你實(shí)現(xiàn)某個(gè)組件或功能可能是一個(gè) Tab 切換、一個(gè)倒計(jì)時(shí)、一個(gè)簡單的事件總線或者是一個(gè)數(shù)據(jù)格式化函數(shù)。描述里沒有給好完整的 API 設(shè)計(jì)沒有明確邊界條件甚至沒有告訴你是否需要考慮性能。這種題考察的不是你會(huì)不會(huì)寫代碼而是你拿到一個(gè)需求之后腦子里先想什么。正確的做題順序應(yīng)該是先明確輸入輸出。用什么數(shù)據(jù)結(jié)構(gòu)進(jìn)來期望什么結(jié)果出去。再列出邊界條件?？諗?shù)組怎么辦類型不對怎么辦參數(shù)缺省怎么辦然后設(shè)計(jì)核心邏輯。先寫主流程再加防御。最后寫測試用例。哪怕筆試沒有要求測試你自己心里也要過一遍常規(guī)輸入、邊界輸入、異常輸入三組用例。我舉一個(gè)典型的例子實(shí)現(xiàn)一個(gè)flatten函數(shù)把嵌套數(shù)組展開為單層數(shù)組。簡單的寫法是遞歸function flatten(arr) { var result []; for (var i 0; i arr.length; i) { if (Array.isArray(arr[i])) { result result.concat(flatten(arr[i])); } else { result.push(arr[i]); } } return result; }這個(gè)能跑但效率有問題。每一個(gè)遞歸層都創(chuàng)建新數(shù)組、做 concat數(shù)據(jù)量大的時(shí)候開銷不小。你可以在筆試?yán)镉胷educe和擴(kuò)展運(yùn)算符改進(jìn)function flatten(arr) { return arr.reduce((prev, next) { return prev.concat(Array.isArray(next) ? flatten(next) : next); }, []); }但面試官更想看到的可能是你具備先拍平一層再持續(xù)拍平的思路或者直接使用arr.flat(Infinity)——雖然 ES2019 才正式確認(rèn)但 2017 年已經(jīng)在草案中了你能寫出來說明你關(guān)注新特性同時(shí)你會(huì)解釋瀏覽器兼容性如果不支持我再退回到遞歸方案這種策略性思維比功能本身更值錢。再舉個(gè)例子實(shí)現(xiàn)一個(gè)防抖函數(shù)。很多人能寫出基礎(chǔ)版function debounce(fn, wait) { var timer null; return function() { var context this; var args arguments; clearTimeout(timer); timer setTimeout(() { fn.apply(context, args); }, wait); }; }這一步能寫出的人很多真正分出高下的是下面的問題如果希望第一次點(diǎn)擊立即執(zhí)行后續(xù)點(diǎn)擊才做防抖該怎么處理這就要給 debounce 加一個(gè)immediate參數(shù)function debounce(fn, wait, immediate) { var timer null; return function() { var context this; var args arguments; if (immediate !timer) { fn.apply(context, args); } clearTimeout(timer); timer setTimeout(() { timer null; }, wait); }; }這段代碼背后的邏輯是在第一次觸發(fā)且 timer 為空時(shí)立即執(zhí)行然后設(shè)置 timer在 wait 時(shí)間內(nèi)后續(xù)觸發(fā)都會(huì)不斷重置 timer直到 timer 超時(shí)被置空下一次觸發(fā)才會(huì)再次立即執(zhí)行。這類題目不僅考察代碼量更考察是否理解防抖和節(jié)流的本質(zhì)區(qū)別以及immediate 參數(shù)帶來的行為變化。如果你能在試卷的注釋里寫下immediate 模式用于提交按鈕防止雙擊重復(fù)提交這個(gè)注釋就能讓面試官一眼看出你有真實(shí)項(xiàng)目經(jīng)驗(yàn)因?yàn)橹挥姓嬲恢貜?fù)提交 bug 坑過的人才會(huì)關(guān)注這個(gè)參數(shù)。綜合編程題的另一個(gè)方向是用原生 JS 實(shí)現(xiàn)一個(gè)小功能組件比如實(shí)現(xiàn)一個(gè) Tab 切換。這道題考察的不僅是 JS 邏輯還包含 DOM 操作、事件綁定、樣式管理。更合理的是用數(shù)據(jù)驅(qū)動(dòng)的思路來寫var tabs [ { id: tab1, title: Tab 1, content: Content 1 }, { id: tab2, title: Tab 2, content: Content 2 }, { id: tab3, title: Tab 3, content: Content 3 } ]; function render() { var container document.getElementById(app); container.innerHTML div classtabs ${tabs.map((tab, index) button>function formatDate(date) { var y date.getFullYear(); var m date.getMonth() 1; var d date.getDate(); return y - (m 10 ? 0 m : m) - (d 10 ? 0 d : d); }這個(gè)代碼功能沒問題但如果加上參數(shù)校驗(yàn)再改名成padZero輔助函數(shù)可讀性會(huì)明顯提升function padZero(num) { return num 10 ? 0 num : num; } function formatDate(date) { if (!(date instanceof Date)) { throw new TypeError(Expected a Date object); } var y date.getFullYear(); var m padZero(date.getMonth() 1); var d padZero(date.getDate()); return y - m - d; }這種防御式編程風(fēng)格在企業(yè)項(xiàng)目中非常被看重因?yàn)槠髽I(yè)的代碼不是一次性寫給自己看的而是要多人長期維護(hù)的。用友筆試題中往往有意設(shè)置一些看起來能跑但有隱患的題比如讓你讀取對象深層屬性如果你直接寫obj.a.b.c前置判斷一律不做筆試就會(huì)丟分。正確的做法是function get(obj, keyPath, defaultValue) { var keys keyPath.split(.); var result obj; for (var i 0; i keys.length; i) { if (result null) return defaultValue; result result[keys[i]]; } return result ! undefined ? result : defaultValue; }這樣的函數(shù)雖然簡單但考察的是你有沒有真實(shí)處理過接口返回結(jié)構(gòu)不穩(wěn)定的問題。在企業(yè)應(yīng)用里第三方接口返回的數(shù)據(jù)經(jīng)常缺字段你需要一個(gè)安全的取值函數(shù)來避免整頁白屏。2017 年那會(huì)兒 lodash 的_.get還沒有像現(xiàn)在這樣成為大家心目中的標(biāo)配如果你能在筆試中自己實(shí)現(xiàn)一個(gè)就已經(jīng)領(lǐng)先絕大部分應(yīng)試者了。調(diào)試能力的考察往往會(huì)藏在異常處理的題目里。如果你在代碼里寫了console.log來排查問題并且最終把日志留在代碼里沒刪面試官通常會(huì)扣代碼整潔分。如果在筆試中確實(shí)需要調(diào)試建議先用注釋標(biāo)明 TODO: 調(diào)試完畢后移除這展示的是你對代碼質(zhì)量的自我要求而不只是能做題。8. 從這一份筆試題反推的復(fù)習(xí)框架給準(zhǔn)備校招和自查基礎(chǔ)的人如果你現(xiàn)在正在準(zhǔn)備校招或者想評估自己的基礎(chǔ)功是否扎實(shí)建議把這份用友筆試題涉及的考點(diǎn)整理成一張清單按優(yōu)先級排列模塊考點(diǎn)建議掌握程度JavaScript 基礎(chǔ)數(shù)據(jù)類型、類型轉(zhuǎn)換、深拷貝/淺拷貝熟練、能寫出手寫實(shí)現(xiàn)作用域與閉包this 綁定、閉包陷阱、變量提升能解釋原理并說出實(shí)踐場景原型與繼承構(gòu)造函數(shù)、原型鏈、class 繼承能畫圖、能手寫組合式繼承異步編程事件循環(huán)、Promise、async/await能講清執(zhí)行順序、能手寫基礎(chǔ) Promise瀏覽器渲染機(jī)制、重排重繪、事件模型能分析性能瓶頸、能處理事件委托CSS盒模型、定位、Flex、響應(yīng)式能給出多方案并說明取舍ES6let/const、解構(gòu)、模板字符串、模塊化熟練使用并解釋編譯結(jié)果綜合能力防抖節(jié)流、數(shù)組去重、數(shù)據(jù)格式化能手寫、能講清邊界條件復(fù)習(xí)建議給三條第一條不要只刷題。把每一個(gè)知識點(diǎn)都對應(yīng)到你在真實(shí)項(xiàng)目里用到的場景比如閉包對應(yīng)模塊封裝和私有變量原型鏈對應(yīng)組件基類擴(kuò)展事件循環(huán)對應(yīng)頁面性能優(yōu)化。如果做不到這一點(diǎn)你背十套筆試題也只能應(yīng)付筆試過不了后面的面試追問。第二條多寫手寫實(shí)現(xiàn)。bind、call、apply、new、Promise、防抖、節(jié)流、數(shù)組去重、深拷貝、發(fā)布訂閱這些經(jīng)典實(shí)現(xiàn)題在筆試卷里出現(xiàn)的概率極高。每次手寫時(shí)注意邊界條件函數(shù)參數(shù)要不要考慮長度this 要不要穿透目標(biāo)環(huán)境是瀏覽器還是 Node這些細(xì)節(jié)才是拉開分?jǐn)?shù)的關(guān)鍵。第三條練表達(dá)像講課一樣把知識點(diǎn)講給別人聽。前端筆試雖然寫在紙面但真正決定面試結(jié)果的往往是你能不能把解題思路完整地說出來。你在復(fù)習(xí)時(shí)可以給自己出一道題請解釋setTimeout和requestAnimationFrame在動(dòng)畫場景下的區(qū)別請說明position: absolute和position: fixed的定位參考點(diǎn)有什么不同請描述從輸入 URL 到頁面渲染完成的完整過程。這些題目看起來是背誦題但表達(dá)者的邏輯深度面試官一聽就知道。用友 2017 年校招 web 前端筆試題二放在今天看題目本身或許有些舊了但它背后考察的能力模型并沒有過時(shí)基礎(chǔ)是否扎實(shí)、理解是否深入、工程意識是否到位。把這份卷子當(dāng)成一面鏡子仔細(xì)照一照自己比刷十套新題更有價(jià)值。 用友校招筆試題解析：前端基礎(chǔ)與工程思維全復(fù)盤
1. 用友校招筆試題的考察邏輯這不是一道題而是一套篩選漏斗老規(guī)矩先聊聊這份題出現(xiàn)的背景。用友作為國內(nèi)老牌的企業(yè)服務(wù)廠商它的校招筆試題一直有個(gè)鮮明特點(diǎn)不追求算法題刷到天昏地暗而是重點(diǎn)關(guān)注基礎(chǔ)功、編碼習(xí)慣和知識面的廣度。2017年這個(gè)時(shí)間點(diǎn)尤其特殊——前端工程化剛剛開始普及Vue 2.0 發(fā)布不到一年React 16 還沒出來ES6 已經(jīng)大面積落地但好多應(yīng)屆生還在寫 var。所以這份筆試題二雖然在今天看來有些基礎(chǔ)題已經(jīng)成了常識但它的命題思路和考察維度對現(xiàn)在準(zhǔn)備校招、社招的人依然有很強(qiáng)的參考意義。整套筆試題的考察邏輯可以拆成三個(gè)層次。第一層是語言基礎(chǔ)主要是 JavaScript 的核心機(jī)制比如作用域、閉包、原型鏈、this 指向這種跑不掉的考點(diǎn)這一層篩掉的是背過 API 但沒理解原理的人。第二層是瀏覽器與頁面開發(fā)涉及 DOM 操作、事件機(jī)制、CSS 布局與兼容性這一層篩掉的是只會(huì)在框架里寫業(yè)務(wù)脫離框架就不知道怎么干活的人。第三層是綜合能力典型的表現(xiàn)形式是一道需求描述模糊的編程題你不僅要寫對還要考慮健壯性、擴(kuò)展性這一層篩掉的是能跑就行從不思考工程質(zhì)量的人。有趣的是用友筆試題并不是純粹意義上的難它考的很多是你在實(shí)際項(xiàng)目中經(jīng)常遇到、但未必深究過的細(xì)節(jié)。比如你天天用 addEventListener但你有沒有想過同一個(gè)元素上綁定的多個(gè)事件按什么順序執(zhí)行你天天寫 CSS 實(shí)現(xiàn)水平垂直居中但讓你列出三種以上方案并說明每種方案的適用場景你會(huì)不會(huì)突然卡殼這種題考察的不是刷題量而是有沒有真正用心寫過代碼。這篇文章我就以筆試題二這份卷子為主線把它可能覆蓋的知識點(diǎn)和實(shí)際開發(fā)中的關(guān)聯(lián)做一次完整復(fù)盤。不管你是正在準(zhǔn)備校招的應(yīng)屆生還是想自查基礎(chǔ)功是否扎實(shí)的在職前端這份拆解都值得花幾分鐘過一遍。2. JavaScript 核心考點(diǎn)this 指向、閉包與原型鏈的連環(huán)追問2.1 this 指向題四種調(diào)用方式一個(gè)都不能混筆試題里最常見的 with 系列題之一就是給出幾段代碼問你輸出是什么然后解釋為什么。這類題的底層邏輯其實(shí)就是 this 的四種綁定規(guī)則默認(rèn)綁定非嚴(yán)格模式下獨(dú)立函數(shù)調(diào)用 this 指向 window瀏覽器環(huán)境嚴(yán)格模式下 this 為 undefined。隱式綁定作為對象方法調(diào)用時(shí)this 指向該對象。顯式綁定通過 call、apply、bind 調(diào)用時(shí)this 指向傳入的第一個(gè)參數(shù)。new 綁定通過 new 調(diào)用構(gòu)造函數(shù)時(shí)this 指向新建的實(shí)例對象。優(yōu)先級上new 綁定 顯式綁定 隱式綁定 默認(rèn)綁定。實(shí)話說第一條和第四條大部分人都記得牢容易翻車的是隱式綁定和顯式綁定的組合題以及隱式綁定丟失這個(gè)經(jīng)典陷阱。var name global; var obj { name: obj, getName: function() { return function() { return this.name; }; } }; console(obj.getName()()); // 輸出什么這段代碼輸出 global。原因很簡單obj.getName()返回的是一個(gè)普通函數(shù)當(dāng)這個(gè)函數(shù)被獨(dú)立調(diào)用時(shí)this 已經(jīng)和 obj 沒有任何關(guān)系了走的是默認(rèn)綁定規(guī)則。很多人在這里會(huì)下意識認(rèn)為閉包會(huì)保留 this 的指向這是完全錯(cuò)誤的。閉包保留的是變量作用域不是 this 綁定。如果面試官繼續(xù)追問怎么讓它輸出 obj答案無非是三個(gè)在外層var self thisES6 之前最常用的方式或者用箭頭函數(shù)箭頭函數(shù)沒有自己的 this繼承定義時(shí)的詞法作用域或者返回前顯式.bind(this)。這個(gè)考點(diǎn)在實(shí)際項(xiàng)目里的映射特別典型。比如你寫一個(gè) Vue 組件在 methods 里用了setTimeout或者注冊了某個(gè)回調(diào)函數(shù)如果回調(diào)用的是普通 function里面的 this 就會(huì)丟。2017 年那會(huì)兒好多剛從 jQuery 轉(zhuǎn) Vue 的開發(fā)者都在這個(gè)問題上踩過坑——jQuery 里大量使用回調(diào)函數(shù)this 又頻繁被 jQuery 內(nèi)部改寫指向 DOM 元素和 Vue 的 this 語義完全不同。所以這道題考的不是一個(gè)孤立的語法知識點(diǎn)而是你能不能理解 this 是函數(shù)調(diào)用時(shí)確定的而不是定義時(shí)確定的 這句話的真正含義。2.2 閉包會(huì)做題只是入門能說清實(shí)踐價(jià)值才叫懂閉包題基本上所有前端筆試題的標(biāo)配用友也不例外。典型題目是給出一段循環(huán)加 setTimeout 的代碼for (var i 0; i 5; i) { setTimeout(function() { console.log(i); }, 100); }輸出結(jié)果是五個(gè) 5這個(gè)大多數(shù)人都知道。但筆試題的進(jìn)階版往往會(huì)要求你能寫出修復(fù)方案并說明每種方案背后的機(jī)制。修復(fù)方式至少有三種。第一種是立即執(zhí)行函數(shù) 傳參for (var i 0; i 5; i) { (function(j) { setTimeout(function() { console.log(j); }, 100); })(i); }這相當(dāng)于在每次循環(huán)時(shí)創(chuàng)建了一個(gè)新的函數(shù)作用域setTimeout 回調(diào)通過閉包捕獲了每次傳入的 j。第二種是 ES6 的 letfor (let i 0; i 5; i) { setTimeout(function() { console.log(i); }, 100); }let 在 for 循環(huán)的塊級作用域中每次迭代都會(huì)創(chuàng)建一個(gè)新的綁定回調(diào)閉包捕獲的是當(dāng)次迭代的 i。第三種是 bind for (var i 0; i 5; i) { setTimeout(console.log.bind(console, i), 100); }這個(gè)方案其實(shí)挺取巧的直接把 i 作為參數(shù)預(yù)先傳給 console.log不再依賴閉包捕獲變量。我當(dāng)年看到這種題的時(shí)候就在想實(shí)際開發(fā)中到底有用嗎答案是太有用了。比如你要給一組異步請求的結(jié)果做批量渲染或者在一個(gè)循環(huán)里給每個(gè)元素綁定事件處理器凡是遇到循環(huán)中創(chuàng)建異步回調(diào)的場景這個(gè)考點(diǎn)就會(huì)從筆試題變成線上 bug。我記得有一個(gè)真實(shí)案例同事在 for 循環(huán)里批量創(chuàng)建了上傳請求回調(diào)里用了循環(huán)變量作為文件索引結(jié)果全部上傳完成后取索引取到的全是最后一個(gè)。排查到的原因就一句話閉包捕獲的是變量本身而不是變量當(dāng)前的值。2.3 原型鏈構(gòu)造函數(shù)、實(shí)例、原型對象的三角關(guān)系原型鏈的考題花樣比較多但核心就一張三角關(guān)系圖構(gòu)造函數(shù)有 prototype 屬性指向原型對象原型對象有 constructor 屬性指回構(gòu)造函數(shù)實(shí)例內(nèi)部有一個(gè)__proto__現(xiàn)在推薦用 Object.getPrototypeOf指向原型對象。用友筆試?yán)镞@類題容易出現(xiàn)的形式是function Person(name) { this.name name; } Person.prototype.sayName function() { console.log(this.name); }; var p new Person(Tom); console.log(p instanceof Person); // true console.log(p instanceof Object); // true console.log(p.constructor Person); // true console.log(Person.prototype.constructor Person); // true每一行輸出你都能答對只能算及格。真正的加分項(xiàng)是你能不能當(dāng)場畫出來 p、Person、Person.prototype 三者之間的引用關(guān)系并且解釋清楚instanceof的機(jī)制——它是沿著__proto__鏈逐級查找看左側(cè)對象的原型鏈上有沒有右側(cè)構(gòu)造函數(shù)的 prototype 對象。再進(jìn)一步如果面試官在此基礎(chǔ)上問你Person.prototype { name: default, sayName: function() { console.log(this.name); } }; var p2 new Person(Jerry); console.log(p2.constructor Person); // false console.log(p2.constructor Object); // true這就是筆試中一個(gè)比較深的考點(diǎn)當(dāng)你直接給 Person.prototype 整體賦值一個(gè)新對象時(shí)這個(gè)新對象沒有 constructor 屬性了所以順著原型鏈找到了 Object。很多框架源碼里會(huì)做這樣一行修正Person.prototype.constructor Person;為什么要這么干因?yàn)楹芏喙ぞ邘?、類型判斷、組件實(shí)例化機(jī)制會(huì)依賴 constructor 屬性來反向獲取構(gòu)造函數(shù)。你平時(shí)用 Vue 的時(shí)候感覺不到這回事但如果你自己寫組件庫或者用 mixin 方式擴(kuò)展類這種細(xì)節(jié)就會(huì)直接影響代碼正確性。3. 瀏覽器與事件機(jī)制從冒泡/捕獲到事件委托的實(shí)戰(zhàn)延伸3.1 事件傳播的三個(gè)階段與 addEventListener 的第三個(gè)參數(shù)前端筆試特別愛考事件模型。DOM 事件的完整傳播路徑包含三個(gè)階段捕獲階段從 window 沿 DOM 樹向下到目標(biāo)元素、目標(biāo)階段到達(dá)目標(biāo)元素、冒泡階段從目標(biāo)元素沿 DOM 樹向上回到 window。div idouter div idinner點(diǎn)擊我/div /divvar outer document.getElementById(outer); var inner document.getElementById(inner); outer.addEventListener(click, function() { console.log(outer 冒泡); }); inner.addEventListener(click, function() { console.log(inner 冒泡); }); outer.addEventListener(click, function() { console.log(outer 捕獲); }, true); inner.addEventListener(click, function() { console.log(inner 捕獲); }, true);如果把這段代碼放到瀏覽器里點(diǎn)擊 inner控制臺的輸出順序是outer 捕獲 → inner 捕獲 → inner 冒泡 → outer 冒泡。注意在目標(biāo)階段事件監(jiān)聽器的觸發(fā)順序取決于注冊順序而不是捕獲/冒泡標(biāo)志。如果希望在事件到達(dá)目標(biāo)元素時(shí)只觸發(fā)一次可以用{ capture: true }加{ once: true }或者直接在函數(shù)內(nèi)部調(diào)用stopPropagation。但這里有個(gè)隱藏的坑stopPropagation只是阻止事件繼續(xù)傳播并不會(huì)阻止同元素上其他監(jiān)聽器的執(zhí)行如果你需要阻止后續(xù)監(jiān)聽器得用stopImmediatePropagation。這個(gè)知識點(diǎn)是 2017 年筆試?yán)锉容^細(xì)節(jié)控的題目放到實(shí)際工作中它直接對應(yīng)的是表單驗(yàn)證、動(dòng)態(tài)組件事件隔離等場景。3.2 事件委托筆試?？嫉嬲煤玫娜瞬欢嗍录械脑硎抢檬录芭菰诟冈厣辖y(tǒng)一監(jiān)聽事件通過判斷 target 來決定執(zhí)行哪個(gè)邏輯。筆試常考方式有兩種一是問你下列代碼ul上綁定的 click 事件如何得知點(diǎn)擊的是哪個(gè)li二是讓你實(shí)現(xiàn)一個(gè)通用的委托函數(shù)。var list document.getElementById(list); list.addEventListener(click, function(e) { var target e.target; while (target ! null target ! list) { if (target.tagName LI) { console.log(target.textContent); break; } target target.parentNode; } });這里用 while 循環(huán)是因?yàn)?e.target 可能不是li而是li內(nèi)部的某個(gè) span 或者 a 標(biāo)簽必須向上查找。另一種更簡潔的做法是使用closest方法list.addEventListener(click, function(e) { var li e.target.closest(li); if (li list.contains(li)) { console.log(li.textContent); } });closest在 2017 年那會(huì)兒兼容性還沒有現(xiàn)在這么好但現(xiàn)在已經(jīng)是現(xiàn)代瀏覽器的標(biāo)配了。閉卷筆試一般不會(huì)讓你寫closest因?yàn)榭嫉氖窃?。但如果你在試卷上用了closest并解釋清楚它和 while 循環(huán)的等價(jià)關(guān)系就能體現(xiàn)你對新 API 的掌握程度。事件委托的價(jià)值在于如果在一個(gè)列表上有 1000 個(gè) li 每個(gè)都綁定事件處理器內(nèi)存開銷和初始化耗時(shí)都是不可忽視的用委托方案只需要在父元素上綁定一個(gè)處理器新增子節(jié)點(diǎn)也無需重新綁定。這在動(dòng)態(tài)渲染列表、表格、菜單這類高頻使用場景中非常普遍。Vue 的事件監(jiān)聽和 React 的合成事件系統(tǒng)本質(zhì)上都借鑒了事件委托的思路——React 會(huì)在根容器上統(tǒng)一綁定事件再按照虛擬 DOM 的路徑分發(fā)。所以這道題答得好不好代表的不只是你會(huì)不會(huì)用 addEventListener而是你有沒有從瀏覽器機(jī)制的角度去理解主流框架的設(shè)計(jì)。3.3 事件循環(huán)基礎(chǔ)題和壓軸題的分水嶺JavaScript 是單線程語言事件循環(huán)機(jī)制決定了異步代碼的執(zhí)行順序。2017 年的筆試題已經(jīng)出現(xiàn) setTimeout、Promise、async/await 混合的題型了雖然那時(shí)候 async/await 還不像現(xiàn)在這么普及但 Promise 已經(jīng)是?？汀onsole.log(script start); setTimeout(function() { console.log(setTimeout); }, 0); Promise.resolve() .then(function() { console.log(promise1); }) .then(function() { console.log(promise2); }); console.log(script end);輸出順序是script start → script end → promise1 → promise2 → setTimeout。這個(gè)結(jié)果背后的規(guī)則是Promise.then屬于微任務(wù)會(huì)在當(dāng)前宏任務(wù)結(jié)束、下一個(gè)宏任務(wù)開始之前執(zhí)行setTimeout屬于宏任務(wù)即使延遲時(shí)間設(shè)置為 0也要等到當(dāng)前調(diào)用棧清空且微任務(wù)隊(duì)列清空后才執(zhí)行。所以setTimeout 0并不是立刻執(zhí)行而是要排到所有微任務(wù)之后。這個(gè)考點(diǎn)對后續(xù)理解前端性能優(yōu)化非常重要——如果你把一些關(guān)鍵邏輯放在微任務(wù)里它可以比 setTimeout 更早執(zhí)行但如果在微任務(wù)里又產(chǎn)生了大量微任務(wù)就會(huì)造成長任務(wù)阻塞渲染。用友筆試如果考到這里通常還會(huì)附加追問process.nextTickNode 環(huán)境和Promise.then誰先執(zhí)行答案是process.nextTick在 Node 里比微任務(wù)還要優(yōu)先。但如果你是在瀏覽器環(huán)境開發(fā)一般你只需要掌握瀏覽器的事件循環(huán)就夠用了。4. CSS 布局與兼容性從盒子模型到多方案居中的完整拆解4.1 盒子模型標(biāo)準(zhǔn)模型和 IE 模型的區(qū)別必須背到骨子里CSS 的盒子模型題目在筆試中幾乎是送分題但也最容易丟分。標(biāo)準(zhǔn)盒子模型中元素占據(jù)的總寬度 contentcontent-box寬度 padding border而 IE 盒子模型box-sizing: border-box中元素指定的寬度已經(jīng)包含了 padding 和 border。如果你寫了一個(gè)寬度為 100px、padding 為 20px、border 為 5px 的標(biāo)準(zhǔn)盒子實(shí)際占用的寬度是 150px而換成 border-box元素的實(shí)際內(nèi)容區(qū)只有 50px。用友作為面向企業(yè)服務(wù)的廠商對兼容性的關(guān)注度歷來很高所以這道題背后藏著一個(gè)實(shí)際生產(chǎn)問題老項(xiàng)目里充滿各種被 padding 撐爆的布局 bug。2017 年那會(huì)兒移動(dòng)端適配流行REM border-box的方案核心原因就是 border-box 讓布局計(jì)算更直觀你定了 100px它就是 100px不管里面怎么加 padding。所以現(xiàn)在幾乎所有組件庫的全局樣式都會(huì)加這么一句*, *::before, *::after { box-sizing: border-box; }這不算什么高深的技巧但如果你是 2017 年參加筆試的應(yīng)屆生能主動(dòng)說出這句重置代碼并解釋為什么組件庫普遍這么做這就是加分項(xiàng)。4.2 水平垂直居中的三種方案必須知道為什么筆試?yán)锞又蓄}的另一大考法是給你一個(gè)父容器和子元素要求寫出至少三種水平垂直居中方案并說明各自的適用場景。以下是我在項(xiàng)目里最常用的幾種:方案一flex 布局.parent { display: flex; justify-content: center; align-items: center; }這是目前最推薦的方式代碼簡潔語義清晰。缺點(diǎn)是對老舊瀏覽器IE10 以下支持不好但 2017 年之后做企業(yè)級系統(tǒng)一般也只需要兼容 IE11。方案二絕對定位 transform.parent { position: relative; } .child { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }使用 transform 做偏移不會(huì)影響文檔流也不需要知道子元素的寬高。但如果子元素內(nèi)部有文本縮放或使用了某些特效transform 偶爾會(huì)帶來渲染精度問題比如文字輕微模糊。它還有一種變體是利用 margin 負(fù)值但要求子元素寬高固定所以反而不太推薦。方案三grid 布局.parent { display: grid; place-items: center; }一行搞定2017 年筆試基本不會(huì)要求這個(gè)因?yàn)榧嫒菪赃€不行但現(xiàn)在做內(nèi)部系統(tǒng)或現(xiàn)代瀏覽器環(huán)境是完全沒問題的。如果將來面試官問grid 和 flex 怎么選你就說 grid 擅長二維布局flex 擅長一維布局居中只是它們的子集能力。這類題目真正想考察的不是你能不能背出這三種方案而是你會(huì)不會(huì)根據(jù)場景做取舍。如果你回答一律用 flex說明你考慮得不夠全面如果你能主動(dòng)說明如果子元素寬度不定、高度由內(nèi)容撐開transform 方案最穩(wěn)如果有大量文本需要換行則推薦 flex text-align: center這才是加分答案。4.3 移動(dòng)端適配與常見兼容性陷阱用友這類企業(yè)級應(yīng)用2017 年已經(jīng)有不少移動(dòng)端 H5 項(xiàng)目了所以 CSS 里大概率會(huì)有一道移動(dòng)端適配題。常見的考點(diǎn)是 viewport 設(shè)置meta nameviewport contentwidthdevice-width, initial-scale1.0 /以及在什么情況下會(huì)出問題如果 initial-scale 設(shè)置成小于 1 的值會(huì)導(dǎo)致排版視口變寬頁面整體被縮小。很多團(tuán)隊(duì)的模板里會(huì)刻意地寫成這樣meta nameviewport contentwidthdevice-width, initial-scale1.0, maximum-scale1.0, user-scalableno /禁止縮放確實(shí)在某些場景下能避免頁面錯(cuò)亂但是對無障礙訪問非常不友好所以現(xiàn)在的主流實(shí)踐已經(jīng)不再強(qiáng)制 user-scalableno 了。如果用友筆試考到這個(gè) meta 字段你可以順勢說明 accessibility 的考量這會(huì)讓面試官覺得你不是背答案而是真的在思考用戶體驗(yàn)。兼容性陷阱里還有一個(gè)高頻考點(diǎn)inline-block 元素之間的空白間隙。兩個(gè) span 或兩個(gè) li 如果中間有換行或空格渲染出來會(huì)有一個(gè)約 4px 的間隙解決辦法包括去掉空格、給父容器設(shè)置 font-size: 0、使用 flex、或者用 margin 負(fù)值。筆試如果結(jié)合代碼讓你解釋為什么兩個(gè) inline-block 布局的盒子中間多了一小段空白你一定要答出這是因?yàn)?HTML 源碼中的空白字符被渲染成了空格而不是什么神秘的 bug。這個(gè)問題的實(shí)際發(fā)生頻率遠(yuǎn)超你的想象——尤其是在 CMS 后臺管理系統(tǒng)某個(gè)列表的按鈕之間莫名多了間距排查半天發(fā)現(xiàn)是模板引擎渲染時(shí)在元素之間插入了換行符。5. ES6 語法進(jìn)階與編碼題實(shí)戰(zhàn)箭頭函數(shù)、解構(gòu)賦值、Promise 與數(shù)組算法5.1 箭頭函數(shù)不是函數(shù)簡寫那么簡單箭頭函數(shù)在 2017 年的筆試題里已經(jīng)是必考重點(diǎn)了它和普通函數(shù)的核心區(qū)別包括沒有自己的 this箭頭函數(shù)中的 this 是在定義時(shí)從外層詞法作用域繼承的。不能用作構(gòu)造函數(shù)換句話說不能對它使用 new。沒有 arguments 對象如果需要使用類數(shù)組參數(shù)得用 rest 參數(shù)。不能使用 yield所以不能作為生成器函數(shù)。常見考題有var obj { name: obj, getName: () { return this.name; } }; console.log(obj.getName()); // 輸出什么輸出結(jié)果取決于外層作用域如果這段代碼直接運(yùn)行在全局環(huán)境中嚴(yán)格模式下 this 是 undefined非嚴(yán)格下是 windowwindow.name 大概是空字符串。因?yàn)榧^函數(shù)的 this 跟 obj 沒關(guān)系它是在定義時(shí)綁定了外層詞法作用域。有不少人以為對象方法里用箭頭函數(shù)就能讓 this 指向?qū)ο筮@是完全的誤解。實(shí)際開發(fā)中箭頭函數(shù)最常見的應(yīng)用場景就是事件回調(diào)和異步回調(diào)比如button.addEventListener(click, () { // 這里的 this 不會(huì)因?yàn)槭?click 回調(diào)而改變 });但也有反例需要警惕如果動(dòng)態(tài)綁定 this 是你的核心訴求比如在 Vue 的 methods 里使用箭頭函數(shù)定義方法就會(huì)導(dǎo)致內(nèi)部的 this 無法指向組件實(shí)例。這是 2017 年從 jQuery 轉(zhuǎn) Vue 的人最常犯的錯(cuò)誤之一。5.2 解構(gòu)賦值、擴(kuò)展運(yùn)算符與模板字符串筆試的默寫題這些題目往往不會(huì)非常難但需要答得準(zhǔn)、答得快。比如解構(gòu)賦值交換兩個(gè)變量[a, b] [b, a]注意不需要臨時(shí)變量。擴(kuò)展運(yùn)算符復(fù)制數(shù)組與對象合并const arr2 [...arr1]、const merged { ...obj1, ...obj2 }。模板字符串中嵌入表達(dá)式hello ${name}。實(shí)際筆試中考解構(gòu)賦值最常見的坑是變量聲明的缺省值和函數(shù)參數(shù)默認(rèn)值function foo({ x 10, y 20 } {}) { console.log(x, y); } foo(); // 10 20 foo({ x: 1 }); // 1 20如果函數(shù)參數(shù)沒有默認(rèn)值 {}直接調(diào)用foo()就會(huì)因?yàn)榻鈽?gòu) undefined 而報(bào)錯(cuò)。這個(gè)細(xì)節(jié)可以作為筆試題的加分點(diǎn)很多應(yīng)屆生知道解構(gòu)但不知道給參數(shù)整體一個(gè)默認(rèn)空對象。在企業(yè)級應(yīng)用里函數(shù)常常接收一個(gè)配置對象尤其是組件封裝時(shí)function createWidget(options {})這種防御式寫法非常常用。5.3 Promise 的實(shí)現(xiàn)層次從會(huì)用到會(huì)鏈?zhǔn)秸{(diào)用再到會(huì)手寫Promise 幾乎是所有前端筆試的必考點(diǎn)。用友的筆試題二如果只考到Promise 有幾種狀態(tài)狀態(tài)是否可以逆轉(zhuǎn)那屬于基礎(chǔ)題。狀態(tài)有 pending、fulfilled、rejected 三種一旦從 pending 變到其他狀態(tài)就不能再變了。但如果繼續(xù)加強(qiáng)度就會(huì)變成這樣一道題var p1 new Promise((resolve, reject) { setTimeout(() resolve(p1), 1000); }); var p2 new Promise((resolve, reject) { setTimeout(() resolve(p2), 500); }); Promise.all([p1, p2]).then((res) { console.log(res); // [p1, p2]等待所有 Promise 完成后才執(zhí)行 });以及它的變體Promise.race([p1, p2]).then((res) { console.log(res); // p2因?yàn)?p2 先 resolve });Promise.all有一個(gè)重要特點(diǎn)只要有一個(gè) Promise reject整體就 reject并且當(dāng)有一個(gè) reject 時(shí)它并不會(huì)取消其他 Promise 的執(zhí)行。很多實(shí)際開發(fā)中的 bug 就來自這里——你用了 Promise.all 發(fā)起三個(gè)請求其中一個(gè)失敗另外兩個(gè)請求仍然在跑甚至可能產(chǎn)生副作用。如果你在筆試題里能主動(dòng)提到失敗時(shí)不建議繼續(xù)等待其余請求這就是經(jīng)驗(yàn)的價(jià)值。更進(jìn)一步如果面試官問如何實(shí)現(xiàn)一個(gè)帶并發(fā)限制的 Promise 調(diào)度器那就是在考察你是否理解異步控制流。這種題在我做過的校招簡歷里很少見能答完整的但如果能答出來基本上就是 offer 候選人了。5.4 數(shù)組去重與排序一道簡單的題能有多少種解法前端筆試經(jīng)?？紨?shù)組去重因?yàn)樗慕夥ㄌ貏e多每種解法都能暴露你對 JavaScript 核心 API 的熟悉程度。常見解法有// 方法一Set function unique(arr) { return [...new Set(arr)]; } // 方法二filter indexOf function unique(arr) { return arr.filter((item, index) arr.indexOf(item) index); } // 方法三Map 標(biāo)記 function unique(arr) { var map new Map(); return arr.filter((item) { if (!map.has(item)) { map.set(item, true); return true; } return false; }); }如果數(shù)組里有對象Set 和 indexOf 都不能按照對象的內(nèi)容去重因?yàn)閷ο蟊容^的是引用。如果有 NaNarr.indexOf(NaN)返回 -1因?yàn)?indexOf 內(nèi)部使用嚴(yán)格相等NaN ! NaN。但 Set 可以正確去重 NaN。這兩種細(xì)節(jié)都是面試追問的經(jīng)典方向。再配合一道排序題比如手寫快排function quickSort(arr) { if (arr.length 1) return arr; var pivotIndex Math.floor(arr.length / 2); var pivot arr.splice(pivotIndex, 1)[0]; var left []; var right []; for (var i 0; i arr.length; i) { if (arr[i] pivot) { left.push(arr[i]); } else { right.push(arr[i]); } } return quickSort(left).concat([pivot], quickSort(right)); }快排平均時(shí)間復(fù)雜度 O(n log n)最壞情況 O(n^2)退化的原因在于每次選基準(zhǔn)都選到了最大值或最小值導(dǎo)致左右兩部分極不均衡。如果用友筆試讓你手寫排序再用幾句話說明時(shí)間復(fù)雜度那基本就覆蓋了一輪面試的算法考察了。6. 綜合編程題的解題思路需求模糊、邊界不清時(shí)你如何展示工程思維綜合編程題才是這張卷子里最容易拉開差距的部分。它通常不會(huì)寫得太明確而是像真實(shí)需求一樣給你一段描述讓你實(shí)現(xiàn)某個(gè)組件或功能可能是一個(gè) Tab 切換、一個(gè)倒計(jì)時(shí)、一個(gè)簡單的事件總線或者是一個(gè)數(shù)據(jù)格式化函數(shù)。描述里沒有給好完整的 API 設(shè)計(jì)沒有明確邊界條件甚至沒有告訴你是否需要考慮性能。這種題考察的不是你會(huì)不會(huì)寫代碼而是你拿到一個(gè)需求之后腦子里先想什么。正確的做題順序應(yīng)該是先明確輸入輸出。用什么數(shù)據(jù)結(jié)構(gòu)進(jìn)來期望什么結(jié)果出去。再列出邊界條件?？諗?shù)組怎么辦類型不對怎么辦參數(shù)缺省怎么辦然后設(shè)計(jì)核心邏輯。先寫主流程再加防御。最后寫測試用例。哪怕筆試沒有要求測試你自己心里也要過一遍常規(guī)輸入、邊界輸入、異常輸入三組用例。我舉一個(gè)典型的例子實(shí)現(xiàn)一個(gè)flatten函數(shù)把嵌套數(shù)組展開為單層數(shù)組。簡單的寫法是遞歸function flatten(arr) { var result []; for (var i 0; i arr.length; i) { if (Array.isArray(arr[i])) { result result.concat(flatten(arr[i])); } else { result.push(arr[i]); } } return result; }這個(gè)能跑但效率有問題。每一個(gè)遞歸層都創(chuàng)建新數(shù)組、做 concat數(shù)據(jù)量大的時(shí)候開銷不小。你可以在筆試?yán)镉胷educe和擴(kuò)展運(yùn)算符改進(jìn)function flatten(arr) { return arr.reduce((prev, next) { return prev.concat(Array.isArray(next) ? flatten(next) : next); }, []); }但面試官更想看到的可能是你具備先拍平一層再持續(xù)拍平的思路或者直接使用arr.flat(Infinity)——雖然 ES2019 才正式確認(rèn)但 2017 年已經(jīng)在草案中了你能寫出來說明你關(guān)注新特性同時(shí)你會(huì)解釋瀏覽器兼容性如果不支持我再退回到遞歸方案這種策略性思維比功能本身更值錢。再舉個(gè)例子實(shí)現(xiàn)一個(gè)防抖函數(shù)。很多人能寫出基礎(chǔ)版function debounce(fn, wait) { var timer null; return function() { var context this; var args arguments; clearTimeout(timer); timer setTimeout(() { fn.apply(context, args); }, wait); }; }這一步能寫出的人很多真正分出高下的是下面的問題如果希望第一次點(diǎn)擊立即執(zhí)行后續(xù)點(diǎn)擊才做防抖該怎么處理這就要給 debounce 加一個(gè)immediate參數(shù)function debounce(fn, wait, immediate) { var timer null; return function() { var context this; var args arguments; if (immediate !timer) { fn.apply(context, args); } clearTimeout(timer); timer setTimeout(() { timer null; }, wait); }; }這段代碼背后的邏輯是在第一次觸發(fā)且 timer 為空時(shí)立即執(zhí)行然后設(shè)置 timer在 wait 時(shí)間內(nèi)后續(xù)觸發(fā)都會(huì)不斷重置 timer直到 timer 超時(shí)被置空下一次觸發(fā)才會(huì)再次立即執(zhí)行。這類題目不僅考察代碼量更考察是否理解防抖和節(jié)流的本質(zhì)區(qū)別以及immediate 參數(shù)帶來的行為變化。如果你能在試卷的注釋里寫下immediate 模式用于提交按鈕防止雙擊重復(fù)提交這個(gè)注釋就能讓面試官一眼看出你有真實(shí)項(xiàng)目經(jīng)驗(yàn)因?yàn)橹挥姓嬲恢貜?fù)提交 bug 坑過的人才會(huì)關(guān)注這個(gè)參數(shù)。綜合編程題的另一個(gè)方向是用原生 JS 實(shí)現(xiàn)一個(gè)小功能組件比如實(shí)現(xiàn)一個(gè) Tab 切換。這道題考察的不僅是 JS 邏輯還包含 DOM 操作、事件綁定、樣式管理。更合理的是用數(shù)據(jù)驅(qū)動(dòng)的思路來寫var tabs [ { id: tab1, title: Tab 1, content: Content 1 }, { id: tab2, title: Tab 2, content: Content 2 }, { id: tab3, title: Tab 3, content: Content 3 } ]; function render() { var container document.getElementById(app); container.innerHTML div classtabs ${tabs.map((tab, index) button>function formatDate(date) { var y date.getFullYear(); var m date.getMonth() 1; var d date.getDate(); return y - (m 10 ? 0 m : m) - (d 10 ? 0 d : d); }這個(gè)代碼功能沒問題但如果加上參數(shù)校驗(yàn)再改名成padZero輔助函數(shù)可讀性會(huì)明顯提升function padZero(num) { return num 10 ? 0 num : num; } function formatDate(date) { if (!(date instanceof Date)) { throw new TypeError(Expected a Date object); } var y date.getFullYear(); var m padZero(date.getMonth() 1); var d padZero(date.getDate()); return y - m - d; }這種防御式編程風(fēng)格在企業(yè)項(xiàng)目中非常被看重因?yàn)槠髽I(yè)的代碼不是一次性寫給自己看的而是要多人長期維護(hù)的。用友筆試題中往往有意設(shè)置一些看起來能跑但有隱患的題比如讓你讀取對象深層屬性如果你直接寫obj.a.b.c前置判斷一律不做筆試就會(huì)丟分。正確的做法是function get(obj, keyPath, defaultValue) { var keys keyPath.split(.); var result obj; for (var i 0; i keys.length; i) { if (result null) return defaultValue; result result[keys[i]]; } return result ! undefined ? result : defaultValue; }這樣的函數(shù)雖然簡單但考察的是你有沒有真實(shí)處理過接口返回結(jié)構(gòu)不穩(wěn)定的問題。在企業(yè)應(yīng)用里第三方接口返回的數(shù)據(jù)經(jīng)常缺字段你需要一個(gè)安全的取值函數(shù)來避免整頁白屏。2017 年那會(huì)兒 lodash 的_.get還沒有像現(xiàn)在這樣成為大家心目中的標(biāo)配如果你能在筆試中自己實(shí)現(xiàn)一個(gè)就已經(jīng)領(lǐng)先絕大部分應(yīng)試者了。調(diào)試能力的考察往往會(huì)藏在異常處理的題目里。如果你在代碼里寫了console.log來排查問題并且最終把日志留在代碼里沒刪面試官通常會(huì)扣代碼整潔分。如果在筆試中確實(shí)需要調(diào)試建議先用注釋標(biāo)明 TODO: 調(diào)試完畢后移除這展示的是你對代碼質(zhì)量的自我要求而不只是能做題。8. 從這一份筆試題反推的復(fù)習(xí)框架給準(zhǔn)備校招和自查基礎(chǔ)的人如果你現(xiàn)在正在準(zhǔn)備校招或者想評估自己的基礎(chǔ)功是否扎實(shí)建議把這份用友筆試題涉及的考點(diǎn)整理成一張清單按優(yōu)先級排列模塊考點(diǎn)建議掌握程度JavaScript 基礎(chǔ)數(shù)據(jù)類型、類型轉(zhuǎn)換、深拷貝/淺拷貝熟練、能寫出手寫實(shí)現(xiàn)作用域與閉包this 綁定、閉包陷阱、變量提升能解釋原理并說出實(shí)踐場景原型與繼承構(gòu)造函數(shù)、原型鏈、class 繼承能畫圖、能手寫組合式繼承異步編程事件循環(huán)、Promise、async/await能講清執(zhí)行順序、能手寫基礎(chǔ) Promise瀏覽器渲染機(jī)制、重排重繪、事件模型能分析性能瓶頸、能處理事件委托CSS盒模型、定位、Flex、響應(yīng)式能給出多方案并說明取舍ES6let/const、解構(gòu)、模板字符串、模塊化熟練使用并解釋編譯結(jié)果綜合能力防抖節(jié)流、數(shù)組去重、數(shù)據(jù)格式化能手寫、能講清邊界條件復(fù)習(xí)建議給三條第一條不要只刷題。把每一個(gè)知識點(diǎn)都對應(yīng)到你在真實(shí)項(xiàng)目里用到的場景比如閉包對應(yīng)模塊封裝和私有變量原型鏈對應(yīng)組件基類擴(kuò)展事件循環(huán)對應(yīng)頁面性能優(yōu)化。如果做不到這一點(diǎn)你背十套筆試題也只能應(yīng)付筆試過不了后面的面試追問。第二條多寫手寫實(shí)現(xiàn)。bind、call、apply、new、Promise、防抖、節(jié)流、數(shù)組去重、深拷貝、發(fā)布訂閱這些經(jīng)典實(shí)現(xiàn)題在筆試卷里出現(xiàn)的概率極高。每次手寫時(shí)注意邊界條件函數(shù)參數(shù)要不要考慮長度this 要不要穿透目標(biāo)環(huán)境是瀏覽器還是 Node這些細(xì)節(jié)才是拉開分?jǐn)?shù)的關(guān)鍵。第三條練表達(dá)像講課一樣把知識點(diǎn)講給別人聽。前端筆試雖然寫在紙面但真正決定面試結(jié)果的往往是你能不能把解題思路完整地說出來。你在復(fù)習(xí)時(shí)可以給自己出一道題請解釋setTimeout和requestAnimationFrame在動(dòng)畫場景下的區(qū)別請說明position: absolute和position: fixed的定位參考點(diǎn)有什么不同請描述從輸入 URL 到頁面渲染完成的完整過程。這些題目看起來是背誦題但表達(dá)者的邏輯深度面試官一聽就知道。用友 2017 年校招 web 前端筆試題二放在今天看題目本身或許有些舊了但它背后考察的能力模型并沒有過時(shí)基礎(chǔ)是否扎實(shí)、理解是否深入、工程意識是否到位。把這份卷子當(dāng)成一面鏡子仔細(xì)照一照自己比刷十套新題更有價(jià)值。