行内人都清楚笔试刷人最狠的往往是B卷。爱奇艺2019秋招这套前端B卷放在当时是标准的大厂风格放在现在看很多题依然能打——它没有考什么花哨的新框架、新API而是把JavaScript基础、异步机制、浏览器原理、框架底层这些“压箱底”的东西翻出来反复碾。准备这套题的过程本质上就是把前端知识体系重新捋一遍。这篇文章我结合自身体会把这套题涉及的考点拆开揉碎讲清楚顺带聊聊面试官到底想从笔试里看到什么。1. 从一套题反推大厂的出题逻辑很多同学刷题有个误区把笔试当成期末考试背答案、记结论。但大厂笔试从来不是考“你知不知道这个知识点”而是考“你在真实开发里遇到问题能不能兜住”。爱奇艺这套B卷的出题风格就是典型——题干不长陷阱不少每道题背后都藏着一两个实际开发中容易翻车的场景。1.1 核心需求解析笔试到底在筛什么人我经常跟身边准备校招的朋友说笔试是所有环节里最“冷血”的一关——它不看你的项目经历多牛不看你的简历多漂亮只看你脑子里沉淀了多少东西。爱奇艺作为视频行业头部玩家前端团队要维护的是千万级DAU的页面性能、稳定性、兼容性都是硬指标所以笔试筛人最看重三点第一JavaScript语言功底扎不扎实。像类型转换、作用域、闭包、原型链这些不是背概念而是能在代码里瞬间反应出结果。第二异步编程的理解够不够深。视频站点的播放器逻辑、用户行为上报、弹幕渲染全是异步场景回调地狱、事件循环理解不到位代码根本写不利索。第三对工程化和常用框架的认知是不是停留在“会用”层面。B卷里涉及Vue或React的题目考的不是API调用而是底层原理和设计思想。这三点对应到做题策略上就是基础题要快而准原理题要写得够深编程题要边界完整。很多人在笔试里挂掉不是不会做而是前面选择题磨太久后面编程题没时间写或者写出来一堆边界漏洞一眼就被看穿代码功底。1.2 这套题目标定的人群不只是应届生虽然标题写的是“2019秋招”但我的看法是这套题的价值完全不限于校招。如果你是社招1到3年的前端想检验自己有没有吃透JavaScript核心这套题同样值得拿来做一次自测。我在准备技术分享时也经常把它当作“内功体检题”推荐给组里的新人。原因不复杂行业里三年以内的前端很多人日常工作就是写Vue页面、调接口、改样式真正要跟复杂的异步逻辑、底层原理打交道的机会其实不多。这就导致一个现象——简历上写着“熟练掌握JavaScript”一碰到[1,2,3] {a: 1}这种题就懵。爱奇艺这套B卷恰恰就是把这类问题集中起来逼你把模糊地带全部补齐。2. 基础题型的考察重心与解析思路这套卷子的选择题部分覆盖面其实很典型。我按考点类别拆开说每个类别我都会挑一道代表性题目展开讲讲出题人想考什么以及怎么快速做对。2.1 JavaScript类型转换与运算符优先级类型转换几乎是每家大厂笔试的保留项目。爱奇艺B卷里出现了一道关于数组转字符串后参与运算的题大致形式是const a [1, 2, 3]; const b a 1; console.log(typeof b, b);很多人一眼看到数组就懵了。实际上这里隐藏着两个知识点数组的toString()方法会默认把元素用逗号连接成字符串然后字符串和数字做加法运算时数字会被转换成字符串做拼接。所以[1, 2, 3] 1的结果是字符串1,2,31typeof结果是string。这种题我刚工作那会儿也做错过因为脑子里记的是“数字加数字等于数字、字符串加数字等于字符串”但没意识到数组会先被隐式转换。做题的时候记住一条主线加减法运算里如果两侧有对象或数组先调valueOf再调toString拆到底再比较类型。数组的valueOf返回自身不是原始值所以会走toString因此[1,2,3]变成1,2,3。还有一种变体是[] []和[] {}空数组加空数组结果是空字符串空数组加空对象结果是[object Object]原理一模一样。这类题没有捷径就是多看多记吃透隐式转换的那套规则。2.2 作用域、闭包与变量提升作用域和变量提升也是高频考点。爱奇艺B卷里有一道比较典型的输出顺序题我复述一下核心逻辑var num 10; function fn() { console.log(num); var num 20; console.log(num); } fn();答案是undefined和20。考点就是变量提升函数作用域内的var num会被提升到函数顶部但赋值不会提升所以第一次打印时num是undefined但注意它不会去访问全局的10因为局部变量已经声明了。顺带一提如果把var换成let结果就变成报错暂时性死区。let声明会被提升但不会被初始化访问就会抛ReferenceError。这俩对比着记笔试基本不会丢分。闭包的考点往往会跟循环绑在一起比如经典的for (var i 0; i 5; i) { setTimeout(() console.log(i), 100); }输出全是5原因是var没有块级作用域setTimeout的回调访问的是同一个i。改成let就是0 1 2 3 4或者用闭包、bind、Promise.resolve包一层也行。这类题考的就是对作用域链和闭包本质的理解。2.3 this指向与箭头函数this指向问题在笔试题里几乎从不缺席爱奇艺B卷也不例外。它的考察方式通常是对象方法调用、函数独立调用、箭头函数混在一起让你判断输出。基本规则还是那套箭头函数没有自己的this它的this在定义时就继承了外层词法作用域普通函数的this由调用方式决定。我见过很多人记混这里提供一个实用的做题顺序首先看是不是箭头函数是就走外层作用域不是箭头函数再看调用时是不是对象方法调用obj.fn()再看有没有new、call、apply、bind如果都没有就是独立函数调用在浏览器非严格模式下指向window严格模式和Node环境里是undefined。套这个顺序八九成的this指向题都能做对。比如var obj { name: x, get: () console.log(this.name) }箭头函数的this指向定义时所处的作用域——也就是全局环境所以obj.get()拿到的是全局的name而如果name没有用var声明在全局结果就是undefined。2.4 Promise与事件循环异步题在B卷里占的比例相当高。视频网站的前端播放进度上报、弹幕异步加载、推荐流懒加载全是异步场景所以考察Promise、async/await、事件循环完全在情理之中。爱奇艺B卷里的异步题经典的一种是把setTimeout、Promise.resolve().then、async/await混在一个代码片段里让你写出输出顺序。答案的核心是把握好任务队列的优先级同步代码先执行然后微任务然后宏任务。Promise.then和async/await的后续代码属于微任务setTimeout属于宏任务。我在这里栽过跟头的地方是async/await的边界情况。比如async function test() { console.log(1); await Promise.resolve(); console.log(2); } test(); console.log(3);输出是1 3 2因为await会让出执行权后面的console.log(2)被排在微任务里。但如果await右侧是一个已经reject的Promise那就得配try/catch否则会抛未捕获的错误。做题时要特别留意微任务里又产生了微任务的情况比如Promise.resolve().then(() Promise.resolve().then(...))这类嵌套微任务会比外层宏任务更早执行很多选择题专门在这里埋雷。3. 编程题实战从思路到可运行的代码选择题只是热身编程题才是笔试拉开差距的地方。爱奇艺B卷的编程题一般有两道一道偏算法/数据结构一道偏业务场景实现。我挑两个具有代表性的类型完整走一遍从审题到实现到优化的过程。3.1 手写防抖函数与业务场景结合视频网站里搜索框的实时联想、播放器倍速切换、窗口resize适配全都要用到防抖或节流。所以手写防抖几乎是笔试必备题爱奇艺B卷也考了。题目一般这样出请实现一个debounce函数要求传入的函数在连续触发时只执行最后一次且能正常接收参数、保持this指向。function debounce(fn, delay 300) { let timer null; return function(...args) { const context this; if (timer) clearTimeout(timer); timer setTimeout(() { fn.apply(context, args); timer null; }, delay); }; }两点最关键一是this要保留因为debounce返回的新函数可能作为对象方法被调用二是参数要通过...args透传。很多新手写漏了this绑定结果业务里用debounce包装的方法拿不到this数据这是非常典型的坑。如果需要“第一次立即执行、后续触发需要等待”的效果可以加一个immediate参数function debounce(fn, delay 300, immediate false) { let timer null; return function(...args) { const context this; if (timer) clearTimeout(timer); if (immediate !timer) { fn.apply(context, args); timer setTimeout(() (timer null), delay); } else { timer setTimeout(() { fn.apply(context, args); timer null; }, delay); } }; }这个版本在即时反馈型功能里非常实用。笔试时如果时间充裕把immediate方案写出来会显得你的代码设计能力比普通人高半档。3.2 数组扁平化与去重排序的组合实现另一类高频编程题是数组处理。爱奇艺B卷出现过类似“将多维数组扁平化并去重后升序排列”的题目。这类题本身不难但能考出好几层功底。const arr [1, [2, [3, [4]], 5], [6, 7], 8]; // 扁平化 - 递归方式 function flatten(arr) { return arr.reduce((acc, cur) Array.isArray(cur) ? acc.concat(flatten(cur)) : acc.concat(cur), []); } // 也可以直接用 flat(Infinity) const flatArr arr.flat(Infinity); // 去重并升序 const result [...new Set(flatArr)].sort((a, b) a - b); console.log(result); // [1, 2, 3, 4, 5, 6, 7, 8]但如果你只写出上面的代码面试官可能还会追问如果不允许用flat怎么办如果不用Set能不能去重这些都是笔试后现场面聊的延伸题。手写去重时要注意[1, 1]用Set去重会保留两个元素因为1和1类型不同。而[NaN, NaN]用Set是能去重的因为NaN NaN为false但Set内部用的是严格相等加特殊处理。这些细节面试官一问一个准。快速排序、二分查找等基础算法也有概率出现但B卷整体更偏业务应用不会出特别变态的ACM题。备考时把常见的数组操作、字符串操作练熟性价比最高。4. 框架与工程化知识点的深浅分层B卷里有相当一部分内容涉及框架和工程化这部分考的不是“怎么用”而是“为什么这么设计”。爱奇艺前端大量使用Vue所以Vue相关原理出现的概率很高。4.1 Vue 2 响应式原理和侦听器陷阱典型的题目是data里有一个对象怎么让它变成响应式的如果直接this.obj.newProp 1页面会不会更新答案是不会因为Vue 2的响应式系统通过Object.defineProperty在初始化时遍历对象已有属性完成依赖收集新增属性并没有经过defineProperty所以不是响应式的。解决方案是this.$set或者用Object.assign重新赋值整个对象。这类题考的是对源码机制的理解不是死记API。你要是能说清楚$set内部也是调用了defineReactive重新定义属性顺带把依赖通知流程提一下面试官基本就给你打高分了。但我得提醒一句不能只背Vue 2的答案。如果笔试或面试中要求对比Vue 3你要知道Vue 3里用Proxy实现了响应式新增属性天然是响应式的因为Proxy拦截的是对整个对象的操作。Vue 2和Vue 3的差异对比在这套2019年的卷子里未必直接考但放到现在的面试里几乎是必问项。4.2 组件通信与代码组织规范爱奇艺笔试B卷考查的组件通信方式通常以选择题形式出现父子组件通信用props和$emit兄弟组件通信用事件总线或状态管理跨层级通信用provide/inject或Vuex。这些大家都熟但经常被忽略的是边界场景比如props的默认值必须由工厂函数返回直接传对象引用容易造成数据串改。工程化相关的题目则会涉及模块化CommonJS和ESModule的区别、打包产物浏览器缓存策略根据文件指纹判断、以及代码规范。热词列表里出现了“前端开发规范vue”这其实反映的是行业普遍痛点——规范不是为了好看而是为了降低多人协作的维护成本。笔试不会让你背规范文档但会通过代码风格判断题、重构题来间接考察你有没有规范意识。我在实际带团队时见过很多次页面能跑就行eslint报错一大片也没人管结果后面接手的人改一行代码要小心翼翼半天。所以碰到这类题多想想“这段代码如果提交到团队仓库别人看得懂吗改起来安全吗”思路会清晰很多。4.3 前端AI开发与新型工具链的一个延伸标题虽然写在2019年但热词里有“前端ai开发”我顺便提一嘴现在不少公司已经把AI能力引入前端工作流比如用大模型生成页面代码、自动修bug、生成测试用例。这套B卷当时没有这块但如果你在面试中表现出对AI辅助开发的理解比如知道怎么用提示词工程约束代码风格、怎么让AI生成符合团队规范的组件代码会是一个很大的加分项。这不等于让大家丢掉基本功。恰恰相反AI生成代码的背后你还是得能判断生成得对不对、边界考虑全不全——而判断能力恰恰就是这套笔试想考的东西。5. 答题策略与避坑经验汇总笔试光会知识点不够策略不对照样翻车。我梳理了几个在真实笔试里反复出现的坑以及对应的应对策略。5.1 时间分配的常见失误很多人开局就在选择题上死磕特别是一道类型转换题卡了五分钟。一套前端笔试题选择题大概20到30道编程题两到三道总时长一般是一个半小时到两个小时。如果选择题平均每道超过三分钟后面编程题的时间就会被严重压缩。我的建议是拿到卷子先花一分钟扫一遍题目分布把编程题先看一遍心里有数。选择题遇到不会的先标记跳过不要恋战。编程题先写出能跑通核心用例的版本再逐步优化不要一上来就试图写最优解。因为判卷系统通常会跑多个用例核心用例过不了细节优化得再漂亮也是零分。5.2 手写代码必须注意的边界条件手写函数时最容易丢分的是边界条件。举几个例子输入参数为null、undefined、空数组时函数是否报错回调函数的this指向是否被正确绑定数组操作是否有空数组、单个元素数组的边界递归函数有没有终止条件sort函数是否明确传入了比较函数数组元素是数字时默认排序是按字符串排序的[1, 10, 2].sort()结果是[1, 10, 2]这算经典陷阱。真实笔试题里不少看起来能跑通的代码就是因为没处理边界被判卷系统扣了很多分。写完后花30秒过一遍这些边界性价比极高。5.3 审题时容易被忽略的隐藏信息大厂笔试题喜欢在题干里放“烟雾弹”比如“请实现一个防抖函数要求支持取消操作”。如果你只实现了基础防抖取消了cancel方法那这道题就丢了一半分。因此做题前一定要把题干读到每个词。看到“取消”、“立即执行”、“最大等待时间”、“支持对象传参”这些关键词都要在代码里体现出来。拿防抖进阶版举例支持取消的写法就是额外暴露一个cancel方法function debounce(fn, delay 300) { let timer null; const debounced function(...args) { if (timer) clearTimeout(timer); timer setTimeout(() { fn.apply(this, args); timer null; }, delay); }; debounced.cancel () { if (timer) clearTimeout(timer); timer null; }; return debounced; }这种对题意的敏感度只能靠平时多做题多总结练出来。没有捷径。6. 从笔试到面试看懂题目背后的组织诉求一套笔试做下来如果只拿到分数其实浪费了一半价值。我做技术面试官这些年看候选人有个习惯笔试答得好的人面试时通常不会太差笔试答得乱的人面试时大概率也会露馅。因为笔试和面试考察的底层能力高度一致。6.1 笔试成绩如何影响技术面试的走向大多数公司面试官在面候选人之前会先浏览笔试答题情况。如果笔试选择题准确率很高编程题边界处理完整面试官在面试时就会倾向聊项目细节、深度原理而不是重复基础题。反过来如果笔试里基础题错误多面试官就会特意追问更多基础问题而且会挖得更深试图确认你是不是只是运气好蒙对了几道题。所以我的建议是笔试结束后不要马上对完答案就丢一边。把每道错题记录下来查漏补缺再对照相关知识点扩展学习一遍。我自己准备跳槽那会儿就是靠反复复盘笔试题把整个知识体系重新夯了一遍效果比漫无目的地看面经好得多。6.2 考点背后的团队工作场景爱奇艺前端笔试B卷里的题目几乎每一道都能对应到一个真实工作场景。类型转换题对应的是接口返回数据格式不稳定时的兜底处理事件循环题对应的是播放器里先上报再渲染的时序控制手写防抖对应的是搜索联想和滚动加载Vue响应式原理对应的是大数据列表的更新性能优化。想清楚这层对应关系笔试就不再是一堆冷冰冰的题目而是提前走了一遍未来工作的技术地图。你能答得出来说明你具备解决这些问题的基本素质答不出来恰恰是给你敲了警钟告诉你在哪些方面还需要补课。6.3 给准备秋招的你的几条实操建议最后给正在准备秋招的朋友几条实操建议都是我自己或带过的同学趟过水之后的经验第一刷题不要贪多用一套大厂真题反复吃透比草草刷十套效果更好。第二编程题一定要在本地真实跑一遍不要只在编辑器里看答案觉得会了。眼会手不会上考场就露馅。第三建立自己的错题本不用多精美记下来方便考前翻阅就行。第四有条件的话找人模拟一次笔试掐时间感受一下节奏能帮你提前暴露时间分配的问题。另外如果你的目标是视频、直播这类高并发、强交互的业务建议把浏览器渲染机制、动画性能优化、网络请求策略这些知识也一起补上。这些虽然不是笔试必考题但进了面试环节几乎是聊项目时绕不开的话题。说到底笔试只是第一道门但它筛的不只是知识储备还有你的学习习惯和工程意识。基础扎实的人不一定能拿到所有offer但一定不会在笔试阶段被莫名其妙地刷掉。希望这篇拆解能帮你把爱奇艺这套B卷吃透也祝你在接下来的秋招里每一道题都能看到出题人的良苦用心。