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