春招季写前端笔试题的复盘网上已经一堆人发原题和答案了但大部分只是“背答案”没有说清楚“为什么考这个、考的是哪层能力”。作为带过几次校招笔试出题和阅卷的人我换个角度聊聊贝壳这套春招前端笔试卷的考察逻辑和答题思路。看完你会明白笔试不是考你会不会某一个API而是通过题目判断你有没有解决复杂前端问题的底子。这套试卷的覆盖面比较典型JavaScript基础、浏览器原理、框架运用、手写编程题。听起来都是老套路但贝壳的业务场景决定了出题方向有侧重——房产信息展示、地图找房、列表筛选、条件联动、长列表渲染这些都是重交互、重数据、重性能的场景。所以笔试卷看起来在考“基础”实际在筛“能不能直接上手做业务”。1. 笔试背后的考察逻辑贝壳想找什么样的前端1.1 从业务反推考点贝壳找房的核心页面比如房源列表、地图找房、二手房详情页前端要面对的问题基本是固定的大量房源数据怎么高效渲染用户拖拽地图时怎么避免频繁请求筛选条件变化时如何管理状态图片懒加载怎么不卡顿这些问题的答案落到纸面上就是一套考查“前端基本功”的笔试卷。所以你会发现试卷里那些题目不是随意拼接的。比如考察事件循环背后对应的是“地图拖拽时大量异步请求如何调度”考察手写防抖节流对应的是“搜索框输入时如何减少请求频率”考察原型链和闭包对应的是“能不能快速读懂别人写的模块代码并且在复杂业务中隔离变量”。理解这一层答题的时候心态就完全不一样了——你不是在应付考试是在展示自己能解决真实业务问题。1.2 笔试卷的题型分布与作答顺序一般这类笔试卷分三块。选择题考察记忆与概念的准确性判断题考察对模糊边界的理解编程题考察代码设计能力。按我的经验建议先花5分钟把整张试卷浏览一遍搞清楚编程题有几道、分值多少然后先做有把握的再把时间留给编程题。千万别在选择题上死磕太久一道犹豫不决的题花5分钟很可能导致后面编程题做不完。1.3 笔试是“排除法”的人才筛选还有一个潜规则可能没人跟你讲。对贝壳这种校招量大的公司笔试的核心作用不是“选出最好的人”而是“快速排除不合适的人”。什么叫不合适不是说某个知识点不会而是基础概念混乱、代码逻辑不通、边界条件完全不管。所以笔试中你不需要每一题都答得完美但基础题的正确率必须保证编程题哪怕没完全跑通也要让阅卷人看到你的思路是清晰的。2. 核心考点拆解从题目反推知识体系2.1 JavaScript基础原型链、闭包、作用域选择题里几乎必考原型链和闭包。常见考法是给一段代码让你判断输出结果。这种题目表面考记忆实际考的是对JavaScript对象机制的理解深度。原型链的核心考点我建议理清楚一条主线每一个对象都有隐式原型指向构造函数的显式原型原型对象本身也有隐式原型最终指向null。答题时不要死记结论要学会自己画一条查找链路一步步推导。闭包的考察通常围绕“变量生命周期”展开。很多人背了“函数返回函数就形成闭包”但遇到实际代码就分析错了。关键点在于执行上下文已经销毁但内部函数仍然引用着外部函数的变量对象。我一般建议从执行上下文和词法作用域两个角度同时理解。2.2 异步与事件循环前端高并发调度的地基异步编程几乎每一套前端笔试卷都会重点考。常见出题形式有两种一种是判断setTimeout、Promise、async/await混合代码的输出顺序另一种是手写实现某个异步控制逻辑。很多人背了“微任务先于宏任务”这句话但遇到Promise嵌套还是错。我建议理清楚一个完整的事件循环流程执行当前宏任务里的同步代码遇到微任务比如Promise.then、queueMicrotask就放入微任务队列执行过程中遇到宏任务比如setTimeout、setInterval就放入宏任务队列当前宏任务执行完毕清空整个微任务队列微任务队列清空后从宏任务队列取下一个任务执行记住微任务队列的清空是“一次性清空所有”而不是一次只取一个。很多人就是在这里栽跟头。2.3 CSS与布局不是“会居中”就行CSS经典题——垂直居中已经考烂了但贝壳的卷子从来不会只问这一种。更多时候是给出一段HTML结构问怎么实现某个布局或者问某种布局方式在什么场景下更好。背后的业务逻辑是房产列表页的卡片排列、筛选栏的吸顶、地图浮层的定位都是真实存在的布局场景。所以准备CSS考点别只背flex和grid的属性要理解一套组合拳文档流、浮动、定位、flex、grid各是什么场景下的选择。特别需要注意的是flex布局的几个关键属性要搞透justify-content控制主轴对齐、align-items控制交叉轴对齐、flex属性简写对应的是flex-grow、flex-shrink、flex-basis默认值是0 1 auto。很多人只记了flex:1遇到具体的分配问题就懵了。2.4 框架原理Vue还是React不重要重要的是思维贝壳内部大量使用React但笔试卷通常不会只考一个框架更常见的是考察框架共通的原理比如虚拟DOM、diff算法、组件通信。出题背后的逻辑是框架迭代太快今天会用React明天可能就要用Vue或者别的所以考察的是你对框架底层思维的理解而不是对某个API的记忆。如果考Vue最常考的是响应式原理——Vue2的Object.defineProperty和Vue3的Proxy有什么区别。如果考React重点基本集中在hooks的使用规则和性能优化。不管考哪个我建议都要准备一个“为什么需要框架”的回答角度手动操作DOM成本高且容易出错框架通过状态驱动视图把开发者的注意力从“怎么操作DOM”转移到“状态是什么”。3. 编程题实战解题思路比标准答案更重要3.1 手写题第一原则先理清输入输出编程题很多不是唯一解评分时重点看你有没有考虑边界情况、代码有没有明显逻辑漏洞。手写防抖节流这类经典题很多人能写出大概逻辑但细节经不起推敲。我不建议背标准答案而是建议学会“从输入输出反推实现”——先确定这个函数接收什么参数、返回什么、在什么场景下用然后再动手写。以手写防抖为例。防抖的核心思路是“每次触发都重置定时器只有最后一次触发才真正执行”。难点在于this指向怎么保留参数怎么传递是否支持立即执行一次3.2 手写Promise重点在状态管理手写Promise是前端笔试的高频压轴题。这道题对很多人来说有难度真正在笔试现场完整写出来的比例不高。但你要知道面试官出这道题重点不是要你写出完整的Promise/A规范而是看你知不知道Promise的三个状态和状态转移逻辑。我建议按这个思路来拆解构造函数接收一个执行器函数执行器立即调用内部维护一个状态初始是pending提供resolve方法把状态从pending变为fulfilled提供reject方法把状态从pending变为rejected状态一旦改变不可逆then方法注册回调返回一个新的Promise实现链式调用只要你把状态转移的核心逻辑写对了哪怕没有完全支持所有的Promise/A细节分数也不会低。3.3 编程题里的“业务影子”长列表与筛选有些编程题表面上是“算法题”实际隐藏了业务场景。比如实现一个函数处理房源数据的筛选排序或者实现一个虚拟列表的简化版本。贝壳做房产平台数据量动辄上万条如果每次渲染都全量操作DOM页面早就卡死了。这里的考察点是你知不知道用“分页渲染”或“滚动加载”的策略以及如何用JavaScript控制渲染时机。我碰到过一道笔试题要求实现一个函数从一组房源数据中筛选出符合条件且价格最低的前N条。题目看起来是数组操作但背后影射的是“筛选排序截断”的组合能力。这类题其实不难关键是能不能写出高效且可读的代码。有人一上来就嵌套循环能跑但性能差有人会用filter加sort加slice一步到位。差别就出来了。注意编程题宁可写得简单但正确也不要写得花哨但有bug。阅卷人最看重的是你的代码在边界条件下不会崩。4. 高频笔试题目解析与避坑指南4.1 高频题一数组去重与扁平化这两个题已经快被写烂了但每年校招还是反复出现。原因是它们有非常多的解法不同解法的性能差异很大这就能看出答题者平时写代码的积累。数组去重的常见解法有Set、filter加indexOf、对象键值对、reduce。我一般建议先答Set因为代码最短但如果试卷有补充问题“你还有别的实现方式吗”最好能说出两种。扁平化的解法也很多递归、reduce、flat方法、栈。贝壳这类公司往往会加一个限制条件——要求不使用flat去考察递归和迭代的基本功。4.2 高频题二深拷贝深拷贝也是出题热门。很多人背了一个JSON.parse(JSON.stringify())就觉得自己会了但面试官问“这个方案有什么缺点”就直接答不上来。缺点至少要说出来无法拷贝函数、Symbol、undefined、循环引用以及Date和RegExp会变成字符串对象。如果想要拿高分要能写出考虑循环引用的深拷贝方案核心做法是用WeakMap缓存已经拷贝过的对象。这个考点背后的逻辑是前端开发中对象嵌套、引用传递的场景太多不能正确拷贝会导致状态被意外篡改。4.3 高频题三call/apply/bind的模拟实现这道题几乎是所有前端笔试题的标配。考的是对this指向的理解以及JavaScript函数调用的底层机制。我建议把这三道题当成一组来准备因为它们的核心思路是相通的——通过上下文对象来改变函数内部的this。以call的模拟实现为例核心思路是把函数设置为上下文对象的一个临时属性通过对象调用函数的方式执行这时this自然指向对象执行完删除临时属性apply的区别只是参数以数组形式传入bind的区别只是返回一个新函数而不是立即执行。这三个题都会写了JavaScript的函数调用机制基本就过关了。4.4 高频题四实现一个简单的发布订阅发布订阅模式在前端框架中非常常见Vue的事件总线、Node的EventEmitter都是典型的发布订阅模式。手写实现可以拆解为内部维护一个事件对象key是事件名value是回调函数数组on方法注册事件emit方法触发事件off方法解除订阅。注意考虑一个细节在emit的过程中off了某个监听器不应该影响当前这次执行这需要在遍历副本里操作。4.5 避坑指南答题时的常见失分点很多人在笔试中犯的错不是“不会”而是“不小心”。具体来说有这几个常见的坑第一没有审清题意就动手。要求写防抖结果写成了节流要求处理边界条件结果完全没考虑。建议做题前花几十秒把题目要求圈出关键词尤其是“不要使用XX内置方法”“请写出两种方式”这类限制条件。第二代码可读性差。变量的命名——我见过用a、b、c、d作为变量名的这种就算逻辑对阅卷人也很难有耐心逐行看。建议用语义化命名比如list、target、index。第三没有写任何注释。这不是硬性要求但关键逻辑处写一行注释能显著降低阅卷人的理解成本也侧面说明你是一个具备工程习惯的人。5. 试卷之外简历与素养的长期积累5.1 简历上的项目千万别“包装过度”笔试卷是筛选门槛简历是敲门砖。很多同学简历上写“精通Vue原理”“深入理解浏览器渲染机制”但笔试考到简单问题时却回答得含糊不清。这种反差一旦被面试官捕捉到反而是减分项。我建议简历上写到的每一项都要准备好被追问的细节。比如你写“使用懒加载优化了图片加载速度”至少应该能回答懒加载的实现原理是什么用了IntersectionObserver还是监听scroll监听scroll会有哪些性能问题没写清楚原理的建议先自己查补一遍再放上去。5.2 在平时就养成写代码的好习惯笔试现场其实是平时习惯的投影。平时写代码时用语义化命名、考虑边界条件、写注释、保持函数单一职责考场上自然就是这么写的。如果平时只管“能跑就行”考试写出再好的框架也难落地。5.3 刷题不是背题要“举一反三”我的建议是把每一道笔试题当做一个知识切片向上找它的知识体系向下找它的业务场景。比如做了一道防抖的题接下来可以想一想搜索框输入用防抖还是节流滚动加载更多用防抖还是节流为什么这两个场景背后的答案还不太一样——搜索框用防抖因为要等用户输完滚动加载用节流因为要保证固定频率触发。6. 写在最后的一点实战体会笔试卷的题目本身刷一遍就没了但准备过程中打下的底子才会真正陪你走完整个春招季。如果你是今年参加春招的前端同学我建议你把这套题目当做一个“自检清单”来用每一道题能不能做到不仅知道答案还能讲清原理还能写出对应的代码实现还能说出在实际业务里什么场景会用到。这几个“能不能”都通过之后你对这份笔试试卷的理解就已经超过了绝大多数只会背答案的竞争者。祝春招顺利。