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状态码也是高频小题。常考的有200成功、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经常混用但标准规范里是fulfilled。笔试阅卷时会接受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查看进程、查看端口、查看日志、文件权限、文本检索。框架与工程化Vue生命周期、data为什么必须是函数、webpack的Loader与Plugin、tree-shaking。安全与性能XSS、CSRF、输入URL到页面渲染、重排与重绘、懒加载。这套清单覆盖了90%以上的考点。你可以一条条对照着去自查哪块薄弱就补哪块。刷题方法上我特别推荐“三遍法”。第一遍裸做不看书不查资料测试自己的真实水平第二遍带着答案回顾把每一道题涉及的知识点拓展开来写在题目旁边第三遍合上答案重做一遍筛选出仍然卡壳的题这些就是你的知识盲区要重点突破。三遍下来一套题的效果能顶刷三套题。我在带新人的时候反复强调笔试不是学习的终点而是查漏补缺的起点。2019年的这些题目放到今天来看基础的JavaScript考点依然没过时ES6仍然是面试的主战场手写题也依然是大厂筛人的硬指标。按这套思路踏踏实实准备不管题目怎么换你都能稳住基本盘。