2023年秋招那会儿我身边不少朋友都在投银行系的金融科技子公司交银金科算是其中热度很高的一家。原因很直接背靠大行业务稳定技术栈也不算老旧对很多想去金融行业写代码、但又不想卷互联网996的前端同学来说是个性价比很高的选择。不过真到了笔试环节不少人还是被晃了一下。和互联网大厂那种纯算法题海、或者牛客网上刷不完的选择题不同交银金科的笔试风格更偏“银行系”一些——综合能力测试占比不小技术题则更看重基础扎实度和工程实践经验而不是偏题怪题。如果你打算备战这一类银行金融科技岗那这篇关于2023年交银金科秋招前端开发岗笔试的复盘拆解应该能帮你少走不少弯路。这篇文章我会从题型结构、考点分布、典型题目思路、备考资料选择这几个维度完整展开同时结合我自己和身边同期同学的实际考试回忆尽量还原笔试现场的真实难度和侧重点。无论你是25届、26届准备冲银行系金融科技岗还是单纯想看看这类公司和互联网大厂笔试有什么不同这篇内容都值得收藏细读。1. 交银金科笔试整体题型与考察范围解析先说结论2023年交银金科秋招前端岗的笔试整体可以分成四大块——行测综合题、英语题、技术客观题、在线编程题。其中行测和英语是银行系笔试的“标配”技术客观题和编程题才是真正能拉开差距的地方。1.1 行测与英语部分别在这块翻车很多前端同学看到行测题第一反应是“我是来写代码的为什么要做这个”。但银行系公司就是这样的风格笔试第一关先筛综合素质行测题量大、时间紧而且会直接计入总分。2023年的行测部分大概有30到40道题包含言语理解、逻辑推理、数量关系、资料分析四类。言语理解里常考病句辨析、段落主旨、选词填空难度接近公务员考试的行测但整体题量少一些。逻辑推理部分是图形推理和逻辑判断的组合题这类题对平时写代码、习惯找规律的程序员来说其实有天然优势关键是别慌。数量关系部分会考一些排列组合、行程问题、工程问题难度中等但如果很久没碰数学建议提前一周每天刷20道行测数量题找手感。资料分析是送分题给一段文字或表格数据让你算增长率、比重等计算量不大但需要细心。英语部分大概20题左右主要是选词填空和阅读理解难度介于四级和六级之间。对于经常读英文文档的前端工程师来说这部分基本不用专门复习能吃老本。但要注意时间分配行测加英语这一大块建议控制在40到50分钟内完成给后面的技术题留足时间。1.2 技术客观题多选比单选更难缠技术客观题是前端岗笔试的核心部分单选加多选加起来大概30到40道覆盖JavaScript、CSS、HTML、浏览器原理、计算机网络、Vue/React框架、工程化等多个方向。单选还算友好基本是基础概念题。但多选题的杀伤力极大少选、错选、多选都不得分这就很考验知识掌握的精确度。比如考“以下哪些属于HTTP缓存相关头部字段”选项里给出Cache-Control、Expires、ETag、Last-Modified、If-Modified-Since如果你只知道大概、记不清细节多选基本要丢分。技术客观题里还有一个特点框架题比重不小而且Vue考得比React多。这和交银金科内部技术栈偏Vue有一定关系毕竟银行类项目对Vue 2和Vue 3的生态使用非常广泛。所以备战这类笔试Vue的响应式原理、生命周期、组件通信、Vue 3新特性是需要重点加强的方向。1.3 在线编程题题目不难但环境很折腾在线编程题一般是两道左右一道偏算法逻辑、一道偏前端场景实现。2023年的笔试平台用的是牛客网的系统支持JavaScriptNode.js环境和部分其他语言前端同学建议直接选JavaScript提交。算法题难度中等偏下类似“给定一个数组找出所有和为target的两数下标”或者“实现一个字符串解析函数”基本是剑指Offer里偏简单的题。真正麻烦的是前端场景题比如“实现一个带并发限制的异步调度器”或“手写一个发布订阅EventEmitter”这类题更考验工程编码能力。编程题的环境和本地开发差别不小牛客网的系统没有自动补全、没有ESLint提示、也不能联网查文档需要在裸环境下写代码。如果你平时开发太依赖IDE和框架脚手架建议提前到牛客网或力扣上用在线编辑器多练几次手写代码。2. 前端核心知识考察这些考点出现频率最高把2023年交银金科笔试的技术题复盘一遍会发现考点高度集中在几个方向JavaScript语言基础、浏览器与网络原理、Vue 2与Vue 3核心机制、前端工程化与构建工具、CSS布局与样式细节。下面按优先级逐个拆解。2.1 JavaScript核心机制闭包、事件循环、原型链一个不落JavaScript的考察比重在技术客观题里最高基本能占到40%左右。常考的知识点包括闭包的定义与应用场景、事件循环宏任务与微任务的执行顺序、原型链与继承、this指向问题、数组常用方法map、filter、reduce等的实现与区别、ES6新特性解构赋值、箭头函数、模板字符串、Promise、async/await。举个例子笔试里出现了一道很经典的题问下面这段代码的输出顺序console.log(start); setTimeout(() { console.log(timeout); }, 0); Promise.resolve().then(() { console.log(promise); }); console.log(end);答案是start、end、promise、timeout。这道题考的就是事件循环中宏任务与微任务的执行顺序。Promise.then属于微任务会在当前宏任务也就是这段脚本执行完后立即执行setTimeout的回调属于宏任务会在下一轮事件循环中执行。如果你没搞清楚这个顺序单选和多选里与异步相关的题都会受影响。原型链考察也很有代表性。笔试中有一道题给了一个构造函数问instanceof的运算结果或者问通过new创建对象后修改prototype上的方法会影响哪些实例。这类题光靠背概念不够建议把《JavaScript高级程序设计》里原型链和继承那一章重新过一遍然后用代码实际验证一遍各种继承写法的差异。闭包考得也很细问闭包形成的条件、如何用闭包实现私有变量、闭包与内存泄漏的关系。我在笔试时遇到一道多选问“以下哪些情况会形成闭包”选项包括函数内部定义函数并引用外部变量、函数作为参数传递、通过全局变量引用函数内部变量等。这类题只要理解了闭包的本质——“函数 它所在词法作用域的引用”——就不容易选错。2.2 浏览器原理与网络基础缓存、跨域、渲染机制是重头戏浏览器相关的考点在2023年交银金科笔试里主要围绕三个方向浏览器缓存机制、跨域解决方案、页面渲染流程。浏览器缓存是高频考点尤其是HTTP缓存相关的头部字段和缓存策略。你需要搞清楚强缓存和协商缓存的区别以及Cache-Control、Expires、ETag、Last-Modified各自的优先级和适用场景。一个经典的考法是给一个响应头问你浏览器下一次请求时会走缓存还是重新发请求。我在笔试里就遇到一道题说响应头包含Cache-Control: max-age3600和ETag: abc123问一小时后再次请求浏览器会怎么处理。正确答案是max-age未过期走强缓存不发起HTTP请求。跨域问题也是必考内容常见方案包括JSONP、CORS、代理服务器、postMessage等。笔试里常考CORS的细节比如什么是简单请求、什么是预检请求preflight、Access-Control-Allow-Origin如何配置以及携带cookie时credentials字段的设置。还有一道题问JSONP为什么只支持GET请求这需要理解JSONP本质上是动态创建script标签来实现跨域资源加载的原理。页面渲染流程的常考形式是让你排列以下步骤的顺序解析HTML构建DOM树、解析CSS构建CSSOM树、合并成渲染树、计算布局Layout、绘制Paint、合成Composite。另外还会考回流Reflow和重绘Repaint的区别以及哪些操作会触发回流。例如修改元素的宽度、读取offsetWidth等属性、增删DOM节点都会触发回流而改变颜色、背景色等只会触发重绘。网络基础里TCP三次握手、四次挥手的细节也要复习一遍虽然对前端日常开发来说用得不多但笔试里考频率不低。还有HTTP与HTTPS的区别、HTTP/1.1与HTTP/2的区别特别是HTTP/2的多路复用、头部压缩、二进制分帧这些特性需要能说清楚。2.3 Vue框架专项响应式原理与组件通信撑起半边天交银金科笔试对Vue的考察明显多于React这个风向值得所有准备银行系金融科技岗的同学注意。Vue相关的考点覆盖了Vue 2和Vue 3如果你只熟悉Vue 2或者只学过Vue 3很可能会在笔试中失分。Vue 2响应式原理是必考题。考察点集中在Object.defineProperty如何劫持数据、发布订阅模式如何工作、数组的响应式为什么需要通过重写数组方法实现、Watcher和Dep的关系。备考时建议手写一个mini版Vue的响应式系统把Observer、Dep、Watcher这三者的关系彻底搞明白而不是只背结论。Vue 3的新特性也考了不少特别是composition API和响应式系统的变化。常考的问题包括ref和reactive的区别、Proxy与Object.defineProperty的优劣、setup函数的执行时机、computed和watch的区别与适用场景。关于响应式系统的对比笔试里有一道多选题问“Vue 3使用Proxy代替Object.defineProperty的优势有哪些”选项包括可以监听数组变化、可以监听属性的新增和删除、性能更好、兼容性更好。其中“兼容性更好”是错误的因为Proxy无法兼容IE浏览器而且这里的性能更好也需谨慎理解Proxy在大多数场景下确实更高效但在某些极端情况下不一定优于defineProperty。组件通信方式也是考察重点props/emit、$emit与$onVue 2、provide/inject、$refs、Event Bus、Vuex/Pinia。笔试里有一道场景题父子组件间通信用哪种方式、兄弟组件间通信用哪种方式、深层嵌套组件间通信用哪种方式。这种题看起来很基础但如果对Vuex/Pinia的状态管理思想理解不深容易把适用场景搞混。Vue生命周期也需要掌握Vue 3中beforeCreate和created被setup替代但组件挂载、更新、卸载的钩子函数基本逻辑没变。笔试考了一道“在哪个生命周期中发起数据请求比较合适”答案是created或setup中都可以但要避免在beforeCreate中访问data——因为此时数据尚未初始化。2.4 前端工程化与其他细节Webpack配置、TypeScript基础、Git操作前端工程化是近两年笔试中分量越来越重的板块。2023年交银金科笔试里Webpack相关题目占了不少包括Loader和Plugin的区别、常用Loaderbabel-loader、css-loader、style-loader、file-loader的作用、Tree Shaking的原理和条件、代码分割Code Splitting的几种方式。Loader和Plugin的区别是基础中的基础。Loader本质上是一个转换器将非JS文件转换成Webpack能处理的模块Plugin则是在打包过程中执行更广泛的任务比如打包优化、资源管理、环境变量注入。笔试里的多选有一题问“以下哪些属于Webpack内置的优化功能”选项有Tree Shaking、Scope Hoisting、分包、压缩等这些在Webpack 4之后确实都内置了。TypeScript的基础知识也开始出现在笔试中。考察内容包括interface与type的区别、泛型的基本使用、联合类型与交叉类型、any与unknown的区别、类型守卫。虽然题量不算大但如果你完全没接触过TypeScript看到这类题会有点懵。建议花半天时间把TypeScript的官方Handbook快速过一遍尤其是基础类型、接口、泛型这几个章节。Git操作也是容易被忽视的考点。笔试里常考“如何将本地代码推送到远程仓库”“如何撤销上一次commit”“如何合并分支”这类基础操作以及rebase和merge的区别。虽然前端日常开发离不开Git但很多人只记常用命令对原理理解不够遇到情景题就容易出错。CSS方面的考点包括Flex布局与Grid布局的区别与适用场景、盒模型标准盒模型与IE盒模型、BFC、定位方式static、relative、absolute、fixed、sticky、CSS选择器优先级计算。这些知识点对于日常写样式的人来说应该不难但要留意一些细节比如position: sticky的生效条件和使用场景笔试里就有一道关于sticky定位的单选题。3. 编程题实操思路从读题到AC的完整路径解析在线编程题是很多前端同学的痛点因为平时写业务代码时不需要自己处理输入输出、不需要在无IDE环境下写代码。这里我把2023年交银金科笔试中出现的编程题类型做个系统拆解并给出解题思路。3.1 算法题掌握这几种套路就够用交银金科的算法题难度定在LeetCode简单到中等之间不考动态规划、不考复杂的图论算法重点集中在数组操作、字符串处理、基础数据结构栈、队列的应用上。比较有代表性的题目是“给定一个只包含小写字母的字符串找出第一个不重复的字符并返回它的索引如果不存在则返回-1”。解题思路是用哈希表统计每个字符出现的次数第二遍遍历找到第一个出现次数为1的字符。时间复杂度O(n)、空间复杂度O(n)代码也很精简function firstUniqChar(s) { const countMap new Map(); for (let i 0; i s.length; i) { const char s[i]; countMap.set(char, (countMap.get(char) || 0) 1); } for (let i 0; i s.length; i) { if (countMap.get(s[i]) 1) { return i; } } return -1; }还有一道常见的是“合并两个有序数组”。这里有个细节要特别注意题目要求不使用额外空间原地合并那就要从后往前遍历避免前面的元素被覆盖function merge(nums1, m, nums2, n) { let p1 m - 1; let p2 n - 1; let p m n - 1; while (p1 0 p2 0) { nums1[p--] nums1[p1] nums2[p2] ? nums1[p1--] : nums2[p2--]; } while (p2 0) { nums1[p--] nums2[p2--]; } }算法题备考的核心策略是把LeetCode上数组、字符串、哈希表、双指针、栈这五类标签下简单和中等难度的题刷一遍尤其是出现频率高的经典题。不需要刷难题怪题但一定要保证常见解法能不看答案直接写出来。3.2 前端场景题手写实现暴露真实能力除了算法题还有一道偏前端场景的编程题这类题更能区分出“只会写业务”和“真的懂原理”的人。2023年交银金科笔试中出现过“实现一个EventEmitter发布订阅模式”和“实现一个带并发上限的异步任务调度器”。实现EventEmitter的核心是维护一个事件名到回调函数数组的映射提供on、off、emit方法。注意点包括off时要遍历回调函数数组并删除指定函数emit时要先拷贝一份回调数组再遍历防止回调中修改监听器导致遍历异常once方法需要特殊处理包装一层函数在执行后自动off。class EventEmitter { constructor() { this.events new Map(); } on(eventName, callback) { if (!this.events.has(eventName)) { this.events.set(eventName, []); } this.events.get(eventName).push(callback); return this; } off(eventName, callback) { const handlers this.events.get(eventName); if (handlers) { const index handlers.indexOf(callback); if (index ! -1) { handlers.splice(index, 1); } } return this; } emit(eventName, ...args) { const handlers this.events.get(eventName); if (handlers) { [...handlers].forEach((callback) { callback.apply(this, args); }); } return this; } once(eventName, callback) { const wrapper (...args) { this.off(eventName, wrapper); callback.apply(this, args); }; this.on(eventName, wrapper); return this; } }异步调度器这道题也值得重视题目大概是实现一个函数接受一个任务数组和一个并发数limit保证同时最多只有limit个任务在执行所有任务完成后返回结果数组。核心思路是维护一个任务队列和一个当前执行计数每次启动新任务时判断当前计数是否达到上限async function asyncPool(poolLimit, tasks) { const results []; const executing new Set(); for (const task of tasks) { const promise Promise.resolve().then(() task()); results.push(promise); executing.add(promise); const clean () executing.delete(promise); promise.then(clean, clean); if (executing.size poolLimit) { await Promise.race(executing); } } return Promise.all(results); }这类题考的不只是API熟练度而是对异步编程模型的理解。备考时建议把常见的手写题都过一遍防抖节流、call/apply/bind、深拷贝、Promise.all/Promise.race、数组扁平化、函数柯里化。这些题在面试和笔试中复用率非常高。3.3 编程环境的应对技巧最后说下编程环境的应对。线上笔试的代码编辑器比较简陋没有代码提示也没有格式化工具平时在VSCode里写代码的舒适感全没了。有两个小技巧值得试试第一写代码前先在注释里列一下解题步骤比如“1. 先用哈希表统计次数 2. 再次遍历找第一个为1的字符 3. 没有则返回-1”。这样不容易写一半思路乱掉。第二写完代码后一定要在本地脑补几组测试用例尤其是边界情况空字符串、只有一个字符、全部重复、null输入等。因为笔试系统的判题反馈往往滞后可能交卷后才知道对错所以自己检查这一步非常重要。4. 备考方法与常见问题排查实录笔试考完很多人的感受是“知识点都见过但细节记不清”。交银金科的笔试题目整体不偏、不怪覆盖面虽然广但都在前端核心知识体系之内。难点在于多选题对知识精确度要求极高以及编程题需要在无辅助环境下完成。4.1 高频失分点与应对策略根据对2023年秋招笔试的复盘前端同学最容易失分的地方集中在以下几个方面第一多选少选不得分导致不敢多选。这是笔试规则导致的心理压力。应对策略只有一个把知识从“模糊记忆”升级为“精确记忆”。比如HTTP缓存相关字段不能只记个大概要能准确说出Cache-Control与Expires同时存在时谁的优先级更高、ETag与Last-Modified同时存在时如何验证。这些细节在《图解HTTP》和MDN文档里都有明确的答案建议整理成表格反复记忆。第二Vue 3新特性一问三不知。不少同学用Vue 2做过项目但Vue 3只在文档里看过一眼。2023年的笔试里Vue 3占比已经不小尤其是ref、reactive、setup、Teleport、Suspense等新特性。建议直接把Vue 3官方文档的“进阶主题”和“组合式API”部分精读一遍再跑一个小demo亲手对比Vue 2和Vue 3的写法差异。第三Webpack工程化题全靠蒙。工程化这块在业务开发中往往配置都是现成的很少有人从零手写一份Webpack配置。备考时可以动手搭建一个包含babel、样式处理、开发服务器、代码分割的最小Webpack项目边搭边理解每个配置项的作用。跑通一次之后再遇到Loader和Plugin的辨析题就轻松很多。第四时间分配失衡。这一点尤其要重视。2023年的笔试时间大概是120分钟但很多人光行测就花了60分钟以上导致后面编程题只剩20分钟非常紧张。我的建议是拿到卷子先快速浏览一遍全卷按分值权重和自身强弱项排定做题顺序先做技术单选快速拿分再做编程题分值高、需要完整时间然后回头做多选和行测最后做英语。个人差异可以调整但原则是高分值的题优先保证完成。4.2 常见问题速查表这里整理了一份笔试常见问题的自查清单建议在进考场前过一遍问题排查与解决事件循环中微任务和宏任务执行顺序搞混记住“一个宏任务结束后清空所有微任务再执行下一个宏任务”并用setTimeout和Promise做实验验证HTTP强缓存和协商缓存分不清强缓存不发请求由Cache-Control和Expires控制协商缓存要发请求由ETag和Last-Modified控制Vue 2数组响应式为什么需要特殊处理Object.defineProperty无法监听数组下标的变化Vue 2通过重写7个数组方法实现响应式Vue 3的ref和reactive该用哪个基本类型用ref、对象嵌套用reactiveref本质是reactive的包装模板中自动解包手写Promise.all时忘记处理rejectPromise.all的特性是“一个失败全部失败”需要catch每个任务并立即reject同时注意空数组时直接resolveWebpack的Tree Shaking不生效需要ES Module语法不能使用require、在production模式下构建、使用sideEffects字段配合数组扁平化实现方式不熟练掌握三种解法递归 reduce、扩展运算符 some、数组的flat方法编程题输入输出不会处理牛客网JavaScript模式下用readline或split处理多行输入提前到牛客网练习2到3道题熟悉环境4.3 备战时间线四周冲刺方案最后给一套可执行的四周冲刺方案亲测有效适合笔试前一个月集中突破。第一周主攻JavaScript与浏览器核心。把《JavaScript高级程序设计》中函数、闭包、原型链、异步编程章节重新精读配合LeetCode上数组和字符串的简单题练手。浏览器部分重点复习HTTP缓存、跨域、渲染机制、事件循环建议边看边整理笔记形成自己的知识框架。第二周主攻Vue框架与手写题。Vue 2到Vue 3的迁移是重点把响应式原理、组件通信、生命周期三条线全部过一遍每一条线都要能画图讲清楚。手写题方面每天练3到5道经典题防抖节流、深拷贝、发布订阅、Promise.all、数组去重与扁平化、函数柯里化。第三周主攻工程化与专项补漏。搭建一个完整的Webpack 5项目理解常用Loader和Plugin的原理。TypeScript基础可以在这周快速补齐重点是interface、type、泛型、联合类型。Git常用命令和rebase与merge的区别也花半天时间熟悉。第四周全真模拟与错题复盘。用牛客网或赛码网找银行类公司的历年真题完整模拟2到3次笔试流程严格计时。每次做完认真复盘把所有错题对应的知识点整理成错题本考前重点过一遍。写在最后的一些个人体会笔试只是秋招的第一道关卡但它筛掉的往往不是技术最弱的人而是准备最不充分的人。交银金科这类银行系金融科技公司的笔试风格其实很鲜明广度大于深度、基础大于进阶、细致度的要求高于奇技淫巧的展示。只要把JavaScript核心机制、Vue体系、浏览器原理、前端工程化这四个方向吃透再配合行测和英语的合理时间分配通过笔试是完全有把握的。复盘2023年这场笔试给我印象最深的一点是很多看似“简单”的基础题恰恰是区分度最高的题。比如事件循环、HTTP缓存、Vue响应式原理这些概念日常开发中谁都会用但真正能精确回答“为什么”的人并不多。所以备战这类笔试不用追求刷多少难题把基础概念的“最后一公里”打通才是最高效的路径。希望这篇复盘能帮到你祝你笔试顺利。