1. 蘑菇街前端校招笔试题考什么：从试卷结构看选人逻辑
蘑菇街2019届校招前端开发工程师笔试题，放在今天回看依然有很强的参考价值。那几年正好是互联网公司校招笔试风格分化的时期——有的公司上来就是五道算法题，根本不看前端基础；有的公司则偏向于问一堆框架API，背过就有分。蘑菇街这套题属于相对综合的那一类：JavaScript基础、浏览器机制、前端工程化、手写代码题都有覆盖，整体难度中等偏上，区分度做得很不错。
先说结论：这套题考察的不是“你背了多少框架API”，而是“你有没有真正理解前端运行时的底层逻辑”。如果你只是会用Vue或者React写页面，没搞懂原型链、事件循环、闭包这些底层概念，做题会非常吃力。反过来说，如果你把这套题吃透了，后面面其他电商类公司（比如有赞、拼多多、唯品会类似的业务方向）的前端岗也基本够用。
我当时拿到这套题的第一感受是：题目数量不算多，但每一道都能往外延伸出三四个面试追问。这就是典型的“笔试当面试用”的出题思路——通过有限几个考点，快速判断候选人是不是真正写过代码、真正调试过线上问题的人。
接下来我按照试卷的常见结构，把这套题的考查逻辑拆开来逐项说，每个考点我都会补充原理分析和答题思路，不是单纯对答案。
1.1 试卷结构：从题目分布看公司需求
2019届那会儿的校招笔试题一般分三块：选择题、简答题、编程题。蘑菇街这套题也沿用这个结构，但在每个板块内的选材有自己的倾向。
选择题部分主要覆盖了：HTML/CSS基础（语义化标签、盒模型、flex布局）、JavaScript核心（变量提升、闭包、this指向、原型链）、浏览器与网络（HTTP状态码、缓存机制、事件冒泡捕获）。这些题目本身不算偏，但选项设置得很“刁钻”，很多是一眼看上去两个选项都对，需要你从底层机制层面去分辨。比如“以下关于闭包的说法正确的是”这种题，四个选项里通常会有一个“闭包会让所有外部变量永远无法被垃圾回收”这种半对半错的表述，用来筛掉那些对GC机制理解不透彻的人。
简答题部分一般会有一道手写代码题，比如“实现一个类数组转数组的方法”“手写一个简单的发布订阅模式”这类。我当时遇到的是发布订阅，而且题目还额外要求考虑“事件回调里this指向”的问题——这就是在同一个考点上叠加了第二个考点，如果只是背过发布订阅的模板是拿不到满分的。
编程题部分通常是两道，一道偏算法（数组去重、排序变体、字符串处理），一道偏应用（DOM操作、事件处理、数据格式化）。算法题难度不算高，但是对时间复杂度的要求会写清楚，考生需要在代码注释里说明自己的思路。应用题的输入数据往往模拟电商场景，比如给一份商品列表，需要按照销量和价格排序后渲染到页面上，这类题目很贴合蘑菇街做导购电商的业务背景。
1.2 为什么这样出题：考察目标分析
从出题逻辑来看，蘑菇街前端笔试有几个明确的筛选目标。
第一，筛掉“只会写业务、不懂原理”的同学。选择题和简答题里大量考察JavaScript底层机制，目的就是确认候选人不只是会调接口、渲染列表，而是真正理解这门语言的运行方式。电商前端每天面对的是高并发页面、复杂的交互状态、需要做性能优化的长列表，如果对事件循环、内存回收这些机制没有概念，迟早会在线上埋雷。
第二，筛掉“代码规范差、没有工程意识”的同学。编程题里虽然没有明确要求写出webpack配置，但对代码风格、函数拆分、变量命名都有潜在考察。面试官后续评卷时，会特别关注代码里有没有魔法数字、有没有重复逻辑、有没有写出一眼看不懂的嵌套循环。
第三，筛掉“只会前端、不懂协作”的同学。简答题里会出现“如果后端接口返回的数据结构不符合前端预期，你会怎么处理”，这不是单纯的技术题，也在考察候选人的沟通意识和项目协作能力。在电商公司，前端和后端之间的数据契约问题非常常见，处理方式是直接骂后端、还是提需求让后端改、还是前端主动兼容并反馈问题，这道题的表达方式能看出一个人的工作习惯。
所以这套题本质上不是在考“你会不会写代码”，而是在考“你有没有独立负责一个前端模块的能力”。想清楚这一点，你的复习重点就清晰了：不要死背题，要理解每一道题背后的设计意图。
2. JavaScript基础考点：高频题背后的原理
2.1 原型链与this指向：一道题看穿你的JS底子
蘑菇街笔试的选择题和简答题里必然会有原型链相关的题，这几乎是前端笔试的标配。原型链这一块考察的点很集中：prototype和__proto__的区别、构造函数和实例的关系、Object.create的作用、原型链查找的规则。
我印象比较深的一道题类似这样：
function Foo() { this.name = 'foo'; } Foo.prototype.getName = function() { return this.name; }; const bar = new Foo(); console.log(bar.getName()); // 输出什么？ console.log(bar.hasOwnProperty('name')); // 输出什么？答案是foo和true。第一问没问题，bar是Foo的实例，getName方法挂在Foo.prototype上，bar通过原型链找到这个方法，方法里的this指向调用者也就是bar，所以返回this.name，也就是foo。第二问考察的是实例属性和原型属性的区别：name是在构造函数里通过this.name赋值的，它是bar自己的属性，所以hasOwnProperty返回true。
这道题本身不难，但是后面通常会跟着一个追问：如果我把getName改成箭头函数呢？比如：
Foo.prototype.getName = () => { return this.name; }; console.log(bar.getName()); // 输出什么？答案是undefined。原因在于箭头函数没有自己的this，它沿用了定义时所在作用域的this。getName定义在Foo.prototype上，属于模块/全局作用域，所以这里的this指向全局对象（浏览器里是window），而window.name在浏览器里是一个特殊属性（默认是空字符串），不是foo，严格模式下甚至会报错。这类变形题考的就是你能不能理解this的绑定规则在不同函数类型下的区别。
答题要点总结一下：
this的绑定看调用方式，不看定义位置- 箭头函数的
this看定义位置，不看调用方式 new调用时this指向新创建的实例对象- 原型链查找只发生在读取属性时，赋值属性不会沿着原型链去找
2.2 事件循环与异步：宏任务和微任务怎么区分
前端笔试考事件循环几乎成了固定项目，蘑菇街也不例外。这类题通常给出几段代码，让你写出输出顺序，比如：
console.log('script start'); setTimeout(() => { console.log('setTimeout'); }, 0); Promise.resolve().then(() => { console.log('promise1'); }).then(() => { console.log('promise2'); }); console.log('script end');输出顺序是：script start、script end、promise1、promise2、setTimeout。
这里就涉及事件循环的核心概念——宏任务（MacroTask）和微任务（MicroTask）。简单理解：
- 宏任务：
setTimeout、setInterval、setImmediate、I/O操作、UI渲染，每次事件循环只取出一个宏任务执行 - 微任务：
Promise.then、queueMicrotask、MutationObserver，在每一个宏任务执行完毕后，会把当前队列里所有的微任务全部执行完再渲染
所以Promise虽然是异步，但它的回调排在微任务队列里，会比下一轮的宏任务setTimeout先执行。这就像你去餐厅吃饭，宏任务是等待叫号的顾客，微任务是服务员在你点完菜之后立刻帮你加的水——每一桌顾客都会在轮到他们的时候先把水喝完，下一个顾客才来。
我在看笔试答案的时候发现，很多同学能记住promise1在setTimeout之前输出，但忽略了promise2也会在setTimeout之前输出。原因是promise1的.then回调里又注册了一个.then，这个新注册的微任务会排进当前微任务队列的尾部，在当前宏任务结束后一起执行完。所以只要是同一轮宏任务内产生的微任务，都会在下一个宏任务开始前执行完毕。
这类题要拿满分，关键在于理解“一个宏任务结束后，清空当前微任务队列”这个机制，而不是死记输出顺序。
2.3 闭包与作用域：最容易丢分的概念题
闭包在蘑菇街笔试里基本是必考的，但考法往往比较“弯”。最经典的一道题就是循环闭包问题：
for (var i = 0; i < 3; i++) { setTimeout(() => { console.log(i); }, 100); }输出是3、3、3，很多刚刷题的人会以为是0、1、2。根本原因是var声明的i是函数作用域的，循环结束后i已经变成3，setTimeout的回调在后续宏任务中执行，访问到的自然是同一个作用域下的最终值3。
如果改成let声明：
for (let i = 0; i < 3; i++) { setTimeout(() => { console.log(i); }, 100); }输出是0、1、2。因为let是块级作用域，每次循环都会创建一个新的绑定，闭包捕获的是每次迭代中独立的i。
有些同学知道答案，但解释不清楚原理，在简答题里只写“因为let有块级作用域”是不够的。面试官真正想听的是：let在for循环的每次迭代中会创建一个新的词法环境，编译器会在循环体内为每一轮迭代创建独立的绑定，闭包引用的是当前迭代环境中的i，而不是循环外部的同一个变量。
我当时是这么记的：把var版本的循环想象成大家都在看同一块白板，循环每跑一次就把白板上的数字擦掉重写，最后所有人都看到那个最终数字；而let版本是每次循环都发一张新纸，上面写着当前迭代的i值，闭包捕获的是各自的纸片，互不干扰。这个概念想通了，闭包题基本不会再错。
3. 编程题与手写题：从思路到实现细节
3.1 数组去重与排序：不要只会用Set
数组去重是前端笔试出场率最高的编程题，蘑菇街也考了。很多同学一看题就写：
const unique = (arr) => [...new Set(arr)];这确实能实现，但通常只能拿基础分。因为题目往往会追加要求：保持原数组顺序、处理对象数组去重、考虑性能（大数据量）。
如果题目要求去重的同时保持首次出现顺序，用Set其实也能做到，因为Set本身是按插入顺序迭代的。但如果是对对象数组去重，比如按id字段去重，就需要另外处理：
const uniqueById = (arr) => { const seen = new Map(); const result = []; for (const item of arr) { if (!seen.has(item.id)) { seen.set(item.id, true); result.push(item); } } return result; };这里用Map而不是Object来记录已经出现的id，是因为Map的键可以是任意类型，而且遍历顺序是有序的。用Object的话，键会被转换成字符串，如果id本身是对象或者数字1和字符串'1'混在一起就会出现问题。
再往深一层，题目的追加问题可能是：如果数组有100万个元素，怎么优化去重性能？Set去重的时间复杂度是O(n)，已经是线性级别，一般够用了。但如果数组元素是复杂的嵌套对象，Set无法进行深比较，这时候可以考虑序列化方式去重：
const uniqueByJson = (arr) => { const seen = new Set(); return arr.filter(item => { const key = JSON.stringify(item); return seen.has(key) ? false : (seen.add(key), true); }); };这个方案有局限性，比如对象键的顺序不同会导致序列化结果不同（{a:1,b:2}和{b:2,a:1}会当成两个不同的对象），但如果面试时作为补充方案提出来，能体现你考虑问题的全面性。
3.2 手写Promise：理解状态机是关键
蘑菇街笔试的编程题里有较大概率出现“手写一个简化版Promise”这道题。我当时在答题的时候差点做不完，因为平时都是调用Promise，很少自己去实现它。这里分享一个我后来总结的快速实现思路。
核心要点就三个：
- Promise有三种状态：
pending、fulfilled、rejected，状态只能从pending转换到后两者，且不可逆 then方法注册回调，但回调需要延后到状态改变后执行then方法返回一个新的Promise，实现链式调用
一个简化但能跑通主体逻辑的版本：
class MyPromise { constructor(executor) { this.state = 'pending'; this.value = undefined; this.reason = undefined; this.onFulfilledCallbacks = []; this.onRejectedCallbacks = []; const resolve = (value) => { if (this.state === 'pending') { this.state = 'fulfilled'; this.value = value; this.onFulfilledCallbacks.forEach(fn => fn()); } }; const reject = (reason) => { if (this.state === 'pending') { this.state = 'rejected'; this.reason = reason; this.onRejectedCallbacks.forEach(fn => fn()); } }; try { executor(resolve, reject); } catch (err) { reject(err); } } then(onFulfilled, onRejected) { if (this.state === 'fulfilled') { onFulfilled(this.value); } if (this.state === 'rejected') { onRejected(this.reason); } if (this.state === 'pending') { this.onFulfilledCallbacks.push(() => onFulfilled(this.value)); this.onRejectedCallbacks.push(() => onRejected(this.reason)); } } }这个版本没有实现链式调用（then没有返回新的Promise），也没有处理异步穿透和值透传，但如果面试时问“请实现一个Promise”，先把状态机框架写出来，再逐步补充细节，思路是清晰的。最忌一上来就想写完整版，结果写到一半逻辑乱掉。
我在实际面试中发现，面试官对“promise.then返回新promise”的考察很执着，因为这是链式调用的基础。简化版里then没有返回值，导致promise.then().then()直接报错。补上链式调用需要对resolvePromise做递归处理，这已经是完整的Promise/A+规范了，笔试时间有限的情况下，先把状态机和事件回调处理好，已经能拿大部分分数。
3.3 防抖与节流：高频面试题的实现细节
防抖（debounce）和节流（throttle）是蘑菇街笔试中被多次考到的手写题，而且经常要求“至少写出一种，并说明使用场景”。这两个概念虽然简单，但很多人在现场手写时会漏掉边界情况。
防抖的核心思路是：事件被连续触发时，只有在最后一次触发后等待一定时间才执行回调。适合的场景是输入框搜索联想、窗口resize后重新计算布局。
function debounce(fn, delay = 200) { let timer = null; return function(...args) { if (timer) clearTimeout(timer); timer = setTimeout(() => { fn.apply(this, args); timer = null; }, delay); }; }注意fn.apply(this, args)这里的this，必须用apply把当前执行上下文传给回调，否则在Vue组件中使用时this会丢失。这是很多人容易忽略的坑。
节流的思路是：无论事件触发多频繁，每隔一段时间只执行一次。适合的场景是滚动加载、按钮防重复提交。
function throttle(fn, interval = 200) { let lastTime = 0; return function(...args) { const now = Date.now(); if (now - lastTime >= interval) { lastTime = now; fn.apply(this, args); } }; }这里有一个边界问题：如果最后一次触发落在间隔窗口之外，但间隔又没到，这个调用会被直接丢弃。有些场景需要“尾部执行”，也就是在连续触发结束时再执行一次，这时候要升级为“定时器版本”：
function throttleWithTimer(fn, interval = 200) { let timer = null; let lastTime = 0; return function(...args) { const now = Date.now(); const remain = interval - (now - lastTime); if (remain <= 0) { if (timer) { clearTimeout(timer); timer = null; } lastTime = now; fn.apply(this, args); } else if (!timer) { timer = setTimeout(() => { lastTime = Date.now(); timer = null; fn.apply(this, args); }, remain); } }; }笔试时如果时间不够，写出基础版本的防抖和节流就够了，但如果你能在注释里说明两个版本各自的适用场景，比如“防抖适合多次触发最后一次执行，节流适合限制高频触发频率”，这道题基本就能拿到满分。
4. 浏览器、网络与工程化：容易被忽略的“送分题”
4.1 HTTP缓存：从强缓存到协商缓存的完整链路
蘑菇街笔试题里会有一道关于HTTP缓存的题，一般是选择题或者简答题。这个考点虽然偏基础，但每年都能筛掉一票人。原因在于很多人只知道“强缓存”和“协商缓存”这两个名词，但分不清Cache-Control和Expires的关系，也不知道ETag和Last-Modified的优先级。
先理清整条链路：
- 第一次请求资源，服务器返回资源内容和响应头，其中包含缓存相关的字段
- 第二次请求同一资源，浏览器先检查本地缓存是否“新鲜”
- 如果命中了强缓存（比如
Cache-Control: max-age=3600且未过期），直接使用本地缓存，不发请求 - 如果强缓存过期，浏览器携带
If-None-Match或If-Modified-Since发起协商缓存请求 - 服务器判断资源没变，返回
304 Not Modified，浏览器继续使用本地缓存；如果资源变了，返回200和新的资源
抓重点：
Cache-Control是HTTP/1.1里的规范，优先级高于HTTP/1.0时代的Expiresmax-age是相对时间，浏览器计算缓存剩余寿命；Expires是绝对时间，依赖客户端时间，客户端改了系统时间就会出错ETag优先级高于Last-Modified，因为Last-Modified只有秒级精度，文件在同一秒内被修改但内容变了，Last-Modified无法感知，而ETag是基于内容生成的标识，能更精确判断资源是否变化
笔试答题时，如果能再补充一句“Cache-Control: no-store和no-cache的区别”，会很加分。no-store是真正的不缓存，每次都要从服务器拉取；no-cache是缓存但必须每次先向服务器验证是否新鲜，不能直接使用缓存。很多非前端岗位的人会混淆这两个，你能写清楚这个区别，说明对缓存规范是有真实理解的。
4.2 数据结构和“数组与指针”：基础不牢的隐患
热词里反复出现“数组和指针笔试题”，虽然这更多是C/C++方向的考点，但前端笔试题里也会以变体形式出现——比如JavaScript里数组引用传递的考察。
来看一道经典题：
const arr1 = [1, 2, 3]; const arr2 = arr1; arr2.push(4); console.log(arr1); // 输出什么？ const arr3 = [1, 2, 3]; const arr4 = [...arr3]; arr4.push(4); console.log(arr3); // 输出什么？第一问输出[1, 2, 3, 4]，因为arr2 = arr1只是复制了数组的引用，两个变量指向同一个数组对象。第二问输出[1, 2, 3]，因为[...arr3]创建了一个全新的数组。
这种题对前端来说本质就是在考引用类型和值传递的区别。JavaScript里数组是引用类型，变量存的是内存地址，赋值时复制的是地址而不是数据。扩展运算符可以浅拷贝数组，但如果数组里嵌套了对象或数组，浅拷贝只复制了外层引用，内层对象依然是共享的：
const arr5 = [{ a: 1 }]; const arr6 = [...arr5]; arr6[0].a = 100; console.log(arr5[0].a); // 输出100这题很多人答错，因为不知道浅拷贝和深拷贝的边界。如果笔试里出现“如何实现深拷贝”，光是JSON.parse(JSON.stringify(obj))是不够的，要能说出这个方案的局限：无法处理undefined、Function、Symbol，会丢失循环引用，Date会被转为字符串。手写递归深拷贝虽然不是最优解，但能体现出你对边界情况的掌控力——要能处理循环引用，用WeakMap缓存已经拷贝过的对象。
4.3 前端工程化：模块化与构建工具的基础认知
2019届笔试时webpack 4还在普及阶段，所以蘑菇街的题比较“温和”，只考察了模块化和构建工具的基本概念，没有考webpack配置细节。但这类题的价值在于，它反映了一个前端工程师有没有“工程化思维”。
常见的简答题是：ES Module和CommonJS的区别是什么？答题要点很简单，但要答得准确：
import是静态导入，require是运行时动态加载- ES Module的模块依赖关系可以在编译阶段确定，所以可以做tree-shaking；CommonJS是运行时确定的，无法静态分析
- ES Module导出的值是变量本身的实时绑定，CommonJS导出的是值的拷贝
从这些区别可以看出为什么业界都往ES Module方向走——静态分析才能做“死代码消除”。这个概念的考察虽然简单，但如果你能把“静态”和“运行时”这两个词说清楚，面试官会眼前一亮。
另外还有一道我在做题时印象很深的问答题：你们项目里用过哪些性能优化手段？这类题不是考察唯一答案，而是考察你有没有系统性思考。我的答题框架是分层叙述：
- 资源层：图片懒加载、字体子集化、CSS/JS压缩
- 运行层：避免频繁重排重绘，使用
requestAnimationFrame批量更新、添加key优化Vue列表渲染 - 网络层：HTTP缓存、CDN加速、接口合并
- 代码层：路由懒加载、按需引入、长列表虚拟滚动
这样答题的好处是覆盖了研发链路的不同环节，而不是只盯着某一个点。面试官能从你的答案里判断你日常开发中有没有性能优化的全局意识，这对于做电商页面的前端岗位来说尤其重要——首屏加载速度直接关系到转化率，而蘑菇街这类导购平台对性能的要求是刻在业务基因里的。
5. 答题策略与避坑经验：从笔试到面试的加分项
5.1 笔试中的高频丢分点
我在帮人看笔试题时发现，丢分往往不是“不会做”，而是“会做但没做对”。几个高频丢分点值得单独拿出来说：
第一，手写代码题直接裸写，没有注释。笔试的改卷人通常不是机器，而是后续的面试官。代码可读性差甚至不如留白不写。我答题的习惯是先写一行注释说明函数作用，再写关键步骤的注释，最后再补边界情况处理方式。哪怕代码敲得不全，注释能把思路表达清楚，就能拿到思路分。
第二，选择题不看“下列说法错误的是”这种反向设问。前端笔试题特别喜欢用反向设问来增加难度，一旦看错题目方向，整题必错。我见过太多人把“错误的是”看成“正确的是”，最后对答案时懊恼不已。
第三，时间分配失衡。有些人在第一道编程题上死磕两小时，第二道简单题反而没时间写。正确做法是先快速扫一遍所有题目，把会做的题全部做完，再回头攻克难点。笔试题的分数分布不一定按题目顺序递增，靠后的简答题可能反而更好拿分。
5.2 检查代码时的自测清单
编程题写完后，如果还有剩余时间，不要急着交卷。按这个清单快速自测：
- 空数组/空对象是否会导致报错
- 数组长度为1时是否符合预期
- 输入全相同元素时，输出是否唯一
- 目标值本身就是最小值/最大值时，边界条件是否成立
以上面数组去重为例，如果只写了[...new Set(arr)]，至少要在注释里补充说明：Set只能处理基本类型数组，对象数组需要用其他方法。这样即使代码没有覆盖到对象场景，你的意识已经到位了。
另外，只要是手写函数，一定要测试一下this是否正确绑定。在笔试题里，这几乎可以算是“必有坑”。面试官出一道debounce题，最后问“如果我在Vue组件的methods里用这个函数，内部访问this会怎样”，就是在等你主动说出fn.apply(this, args)这一步。
5.3 从笔试题延伸出的面试追问准备
笔试不是终点，它更像面试的索引。蘑菇街这类公司，面试官在看完你的笔试答题后，可能直接从你的答案中挑一题作为面试开场。所以你在复习笔试题时，不要止步于“写出正确答案”，而是要多问自己一层“为什么”。
比如你写const unique = (arr) => [...new Set(arr)]，面试官可能会问：“Set去重的底层是用了什么结构实现的？”这看起来像在考ES6，其实考的是数据结构的理解——Set内部基于哈希表实现，插入和查找的时间复杂度近似O(1)，所以去重整段代码的时间复杂度是O(n)。如果你能答到这个层次，面试官就能判断你是真的理解了这个API，而不是只是刷到了这个答案。
再比如手写Promise，面试官一定会追问：Promise的执行顺序为什么是微任务优先于宏任务？这是想确认你是真正理解事件循环，还是背会了模板。我在面试中经常用一句话反问自己：如果Promise.then里的回调是直接同步执行的话，会有什么问题？答案是：会阻塞当前宏任务，导致整个页面的渲染被推后。而异步回调的核心目标就是不让当前任务被阻塞，所以把回调放到微任务队列是设计上的必然——既保证了不阻塞，又保证回调尽可能快地执行。
总的来说，复习蘑菇街2019届校招前端笔试题时，最有效率的方式不是背题，而是用“如果我是出题人，我想从这道题看到什么”的角度去复盘每一个考点。我当时做这套题最深的体会是：前端面试的底层拼的还是计算机基础，无论框架怎么换，JavaScript的核心机制始终绕不开，那些看起来有点旧的题，反而是最能筛选出真东西的环节。
另外分享一个小技巧：做这类笔试题时，把每道题对应的知识点整理成一个“问题-考点-延伸追问”的表格，考前过一遍，比盲目刷题高效得多。比如“防抖和节流的区别”这道题，整理成一行就是“问题：防抖节流的区别 / 考点：事件高频触发优化 / 延伸追问：手写实现、this绑定、实际场景”。这样一趟下来，你拿到的不只是正确答案，而是一棵完整的知识树。
