前言大家好我是木斯佳。相信很多人都感受到了在AI浪潮的席卷之下前端领域的门槛在变高纯粹的“增删改查”岗位正在肉眼可见地减少。曾经热闹非凡的面经分享如今也沉寂了许多。但我们都知道市场的潮水退去留下的才是真正在踏实准备、努力沉淀的人。学习的需求从未消失只是变得更加务实和深入。这个专栏的初衷很简单拒绝过时的、流水线式的PDF引流贴专注于收集和整理当下最新、最真实的前端面试资料。我会在每一份面经和八股文的基础上尝试从面试官的角度去拆解问题背后的逻辑而不仅仅是提供一份静态的背诵答案。无论你是校招还是社招目标是中大厂还是新兴团队只要是真实发生、有价值的面试经历我都会在这个专栏里为你沉淀下来。专栏快速链接温馨提示市面上的面经鱼龙混杂甄别真伪、把握时效是我们对抗内卷最有效的武器。面经原文内容面试公司美团财务科技面试时间4月9日上午11点时长25分钟面试岗位前端日常一面面试体验人生第一次面试面试官很友善基本都是简单八股❓面试问题JS 的数据类型有几种基础数据类型和引用数据类型的本质区别js 定义变量的方式有几种let 和 var 有什么区别promise 解决什么问题箭头函数跟普通函数有什么区别ES6 向 ES5 的转换一般是怎么做的用 webpack 多一些还是 Vite 多一些Vite 有哪些配置项你常用的Vue 父子组件传递参数该怎么传vue 3 里面做全局状态管理该一般是怎么做学生管理系统从 0 到 1 技术选型框架用 Vue 还是 react打包工具用哪一个UI 组件库用哪一个说明理由手撕143. 重排链表来源牛客网 前端死了咩木木有话说刷前先看美团这场日常实习一面是一份非常标准的基础面经。面试官友善题目基础没有深挖项目可能是因为技术栈差异或日常实习门槛较低。问题覆盖JS基础、ES6、构建工具、Vue核心、技术选型最后一道手撕链表题。对于第一次面试的同学来说这份面经很有参考价值——基础扎实就能从容应对。 美团财务科技前端一面·深度解析面试整体画像维度特征面试风格基础友好型 标准八股 无压力追问难度评级⭐⭐二星基础为主适合新手考察重心JS数据类型、ES6特性、构建工具、Vue核心、技术选型特殊之处日常实习门槛较低偏重基础而非项目深度逐题深度解析二、JS的数据类型有几种回答思路最新ECMAScript标准有8种数据类型。分类基础数据类型7种number、string、boolean、null、undefined、symbolES6、bigintES2020引用数据类型1种object包含数组、函数、日期、正则等typeof123// numbertypeofstr// stringtypeoftrue// booleantypeofundefined// undefinedtypeofnull// object历史遗留bugtypeofSymbol()// symboltypeof123n// biginttypeof{}// objecttypeof[]// objecttypeoffunction(){}// function三、基础数据类型和引用数据类型的本质区别回答思路从存储位置、赋值方式、比较方式三个维度说明。维度基础数据类型引用数据类型存储位置栈内存固定大小堆内存动态大小栈存引用地址赋值方式值拷贝独立副本引用拷贝指向同一对象比较方式值比较引用地址比较// 基础类型值拷贝leta10letba b20console.log(a)// 10不变// 引用类型引用拷贝letobj1{name:Tom}letobj2obj1 obj2.nameJerryconsole.log(obj1.name)// Jerry被修改// 比较1010// true{name:Tom}{name:Tom}// false不同对象四、js定义变量的方式有几种回答思路ES6之前有varES6新增let和const。方式作用域变量提升重复声明可修改var函数作用域是undefined允许是let块级作用域否TDZ不允许是const块级作用域否TDZ不允许否属性可改vara1letb2constc3// const声明的对象属性可以修改constobj{name:Tom}obj.nameJerry// 允许五、let和var有什么区别回答思路从作用域、变量提升、重复声明、全局属性四个角度回答。区别作用域var函数作用域let块级作用域{}内变量提升var提升但值为undefinedlet提升但存在暂时性死区TDZ重复声明var允许重复声明let不允许全局声明var在全局声明会成为window属性let不会// 块级作用域{vara1letb2}console.log(a)// 1console.log(b)// ReferenceError// 暂时性死区console.log(x)// undefinedvar提升varx1console.log(y)// ReferenceErrorTDZlety2六、promise解决什么问题回答思路Promise是异步编程的解决方案。解决的问题回调地狱避免多层嵌套的回调函数错误处理统一的.catch()捕获异步错误并发控制Promise.all、Promise.race等处理多个异步操作// 回调地狱getData(function(a){getMoreData(a,function(b){getMoreData(b,function(c){console.log(c)})})})// Promise链式调用getData().then(agetMoreData(a)).then(bgetMoreData(b)).then(cconsole.log(c)).catch(errconsole.error(err))七、箭头函数跟普通函数的区别回答思路从this绑定、arguments、构造函数、prototype等角度回答。特性普通函数箭头函数this动态绑定调用时决定静态绑定定义时继承外层arguments有无可用rest参数替代构造函数可以new调用不可以会报错prototype有无简写无单参数可省略括号单语句可省略return// this指向constobj{name:Tom,normalFn:function(){console.log(this.name)// Tom调用时指向obj},arrowFn:(){console.log(this.name)// undefined继承外层通常是window}}// 不能作为构造函数constFn(){}constfnewFn()// TypeError八、ES6向ES5的转换一般是怎么做的回答思路使用Babel进行转译。流程解析Parse将ES6代码解析成AST抽象语法树转换Transform将ES6语法对应的AST节点转换为ES5节点生成Generate将转换后的AST生成ES5代码核心插件babel/preset-env根据目标浏览器环境自动决定转换哪些特性。// 配置示例.babelrc{presets:[[babel/preset-env,{targets: 0.25%, not dead}]]}常见转换const/let→var箭头函数 → 普通函数模板字符串 → 字符串拼接class→ 构造函数 原型方法九、用webpack多一些还是Vite多一些回答思路根据项目类型选择。回答示例“我平时用Vite多一些因为它开发环境启动快、热更新快。但在一些需要精细控制打包配置的老项目或复杂项目中也会用到Webpack。”十、Vite有哪些配置项你常用的回答思路列举常用配置。// vite.config.jsexportdefault{// 插件plugins:[vue(),react()],// 路径别名resolve:{alias:{:/src}},// 开发服务器server:{port:3000,proxy:{/api:http://localhost:8080}},// 构建配置build:{outDir:dist,sourcemap:true,rollupOptions:{external:[react]}},// CSS预处理器css:{preprocessorOptions:{scss:{additionalData:import /styles/variables.scss;}}}}十一、Vue父子组件传递参数回答思路父传子用props子传父用emit。父传子!-- 父组件 -- template Child :messageparentMsg / /template script setup import Child from ./Child.vue const parentMsg Hello from parent /script !-- 子组件 -- script setup const props defineProps([message]) console.log(props.message) /script子传父!-- 子组件 -- script setup const emit defineEmits([update]) emit(update, data from child) /script !-- 父组件 -- template Child updatehandleUpdate / /template script setup const handleUpdate (data) { console.log(data) } /script十二、Vue3全局状态管理回答思路Vue3推荐使用Pinia官方状态管理库。Pinia特点轻量、TypeScript友好去掉了mutations只有state、getters、actions支持Vue DevTools// stores/user.jsimport{defineStore}frompiniaexportconstuseUserStoredefineStore(user,{state:()({name:Tom,age:18}),getters:{doubleAge:(state)state.age*2},actions:{updateName(newName){this.namenewName}}})// 组件中使用import{useUserStore}from/stores/userconstuserStoreuseUserStore()console.log(userStore.name)userStore.updateName(Jerry)十三、学生管理系统技术选型回答思路说明选型理由展现思考过程。框架选择Vue因为熟悉上手快React也很优秀但团队倾向Vue打包工具选择Vite开发环境启动快热更新体验好适合中小型项目UI组件库Element PlusVue3生态最成熟的桌面端组件库适合后台管理系统Ant Design Vue设计规范统一但体积略大Naive UITypeScript友好但生态较新推荐Element Plus Vite Vue3 Pinia二十、手撕143. 重排链表题目将链表L0 → L1 → ... → Ln-1 → Ln重排为L0 → Ln → L1 → Ln-1 → L2 → Ln-2 → ...解题思路找到链表中点快慢指针反转后半部分链表交替合并两个链表functionreorderList(head){if(!head||!head.next)return// 1. 找中点letslowhead,fastheadwhile(fast.nextfast.next.next){slowslow.next fastfast.next.next}// 2. 反转后半部分letprevnullletcurrslow.next slow.nextnull// 断开前后while(curr){constnextcurr.next curr.nextprev prevcurr currnext}// 3. 交替合并letfirstheadletsecondprevwhile(second){constnext1first.nextconstnext2second.next first.nextsecond second.nextnext1 firstnext1 secondnext2}}时间复杂度O(n)空间复杂度O(1)知识点速查表知识点核心要点JS数据类型7种基础number/string/boolean/null/undefined/symbol/bigint object基础vs引用栈存值/堆存址、值拷贝/引用拷贝、值比较/地址比较定义变量var函数作用域、let/const块级作用域、const不可重新赋值let vs var块级作用域、TDZ、不能重复声明、不挂载windowPromise解决回调地狱、统一错误处理、并发控制箭头函数this静态绑定、无arguments、不能new、无prototypeES6转ES5Babel解析→转换→生成babel/preset-envVite配置plugins、resolve.alias、server.proxy、buildVue父子通信props父→子、emit子→父全局状态Piniastate/getters/actions技术选型Vue3 Vite Element Plus Pinia重排链表找中点→反转后半→交替合并 最后一句美团这场日常一面是一份“新手友好”的基础面经。题目虽简单但覆盖了JS核心、ES6、构建工具、Vue基础等必备知识。对于第一次面试的同学来说这样的面试有助于建立信心——只要基础扎实就能从容应对。从用户反馈看面试完当天下午就约了二面说明表现不错。基础是前端的立身之本把地基打牢才能走得更远。