每日面试实录—— 美团核心一面(被捞)| 前端(移动端方向)

📍面试公司:美团
👜面试岗位:前端开发工程师(移动端方向)
🕐面试时长:约40分钟,项目交流约20分钟 + 八股提问 + 手撕算法
🔄面试轮次:第 1 轮(核心一面 / 被捞)


✨面试整体流程回顾:

这次是一场被捞的机会,能重新得到面试机会,我非常珍惜。整体节奏是:

  • 面试官一上来就深入聊了项目,交流了约 20 分钟,探讨了我在项目中的角色与技术决策;
  • 然后进入八股知识点环节,连续问了 7 道基础题,覆盖了 HTML、ES6、异步机制、网络协议等方面;
  • 最后以一道“手撕两个有序数组合并”收尾。

虽然后半部分感觉自己答得没有上次顺,但这次换了部门,估计简历与新方向更契合,依旧希望能顺利进二面!为了更好准备下一轮,我整理并复盘了每一道题的题目、考察点、详细答案,分享如下:


✅ 面试题目逐题整理与解析:


1. HTML5 新增的组件有哪些

考察点:HTML5 新语义元素掌握
面试公司:美团
答案
HTML5 引入了多种语义化标签,帮助构建更清晰的页面结构,包括:

  • <header><footer>:头部与尾部
  • <section><article>:内容区域与独立文章
  • <nav>:导航栏
  • <aside>:侧边栏信息
  • <main>:页面主体内容
    以及 <audio><video><canvas> 等多媒体组件。

2. HTML 语义化的作用是什么

考察点:代码规范性、SEO、无障碍访问理解
面试公司:美团
答案
语义化标签可以:

  • 增强页面结构的可读性;
  • 有利于搜索引擎优化(SEO);
  • 帮助屏幕阅读器解析页面,提高无障碍访问能力;
  • 增强团队协作中代码的可维护性。

3. let、var、const 的区别

考察点:变量作用域、声明机制、变量提升
面试公司:美团
答案

  • var:函数作用域,存在变量提升,容易造成变量污染。
  • let:块级作用域,无变量提升,不能重复声明。
  • const:块级作用域,声明后不可被重新赋值(对象属性仍可变)。
    通常推荐使用 letconst,避免 var 带来的副作用。

4. 谈谈对事件循环的理解

考察点:JS 异步机制、宏任务/微任务理解
面试公司:美团
答案
事件循环是 JS 的核心执行机制:

  • 同步任务先执行,异步任务进入任务队列;
  • 微任务(如 Promise.then)优先于宏任务(如 setTimeout);
  • 每轮循环:清空微任务队列 → 执行一个宏任务 → 重复。
    理解事件循环对于掌握异步编程模型至关重要。

5. WeakMap 与 Map 的区别

考察点:数据结构内存管理、弱引用机制
面试公司:美团
答案

  • Map:支持任意类型的 key,可枚举,支持遍历。
  • WeakMap:只能用对象作为 key,key 是弱引用,不会阻止垃圾回收;不能遍历,没有 size
    使用场景:WeakMap 常用于绑定 DOM 元素相关数据,避免内存泄漏。

6. 谈谈 Promise 的状态以及原型

考察点:异步编程模型、Promise 状态流转、原型方法
面试公司:美团
答案
Promise 有三种状态:

  • pending:初始状态;
  • fulfilled:成功;
  • rejected:失败。

状态不可逆,一经变更即定型。常用原型方法:

  • then:注册成功/失败的回调;
  • catch:捕获错误;
  • finally:无论结果如何都会执行。

静态方法如 Promise.all()Promise.race()Promise.resolve() 等用于组合多个异步操作。


7. HTTP 与 HTTPS 的区别

考察点:网络协议安全基础
面试公司:美团
答案

  • HTTP 是明文传输,不安全;
  • HTTPS 是基于 SSL/TLS 的加密协议,具备身份验证 + 加密 + 数据完整性校验;
  • 需要 CA 签发证书,首个握手采用非对称加密,后续使用对称加密提高效率;
  • HTTPS 能防止中间人攻击与数据泄露,是前端开发安全保障的基础。

8. 手撕算法:两个有序数组合并

考察点:数组遍历、双指针技巧、边界处理
面试公司:美团
答案
实现方式采用双指针,时间复杂度 O(n+m),代码如下:

function mergeSortedArrays(arr1, arr2) {
  let i = 0, j = 0;
  const result = [];
  while (i < arr1.length && j < arr2.length) {
    if (arr1[i] < arr2[j]) {
      result.push(arr1[i++]);
    } else {
      result.push(arr2[j++]);
    }
  }
  return result.concat(arr1.slice(i), arr2.slice(j));
}

💡总结与反思:

虽然这次表现没有上一次自我感觉那么好,但能再次被捞进核心一面,本身就是对简历方向调整的一种肯定。

这一轮让我意识到以下几点:

  1. 八股永远是面试的基本功,即使项目经验丰富,基础薄弱也难以打动面试官;
  2. 项目讲得好但不够深,还需练习从“做了什么”拓展到“为什么这么做”、“遇到什么坑”、“有什么优化”等;
  3. 算法环节不能轻敌,哪怕是基础题,也得写得稳、写得快、写得优雅。

🔥写在最后:

每一次面试,不论成功与否,都是一次成长的机会。这次美团一面让我看清了自己的知识短板,也坚定了继续打磨基础的决心。

未来还会有更多机会等着我去抓住,而我现在要做的,就是不辜负每一次可能通向更好的跳跃点。

愿我们都能挺过焦虑和不安,继续向前,不停迭代,一起上岸!✊


如果你也在准备前端校招或社招,希望这份面经能帮到你。需要我后续整理 JS 深度题、项目优化方向或者手撕题高频训练题,也可以留言告诉我。

我们下轮面试再见! 😊

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值