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

面试官E先生

于 2025-04-16 08:37:46 发布

阅读量700

点赞数 19

文章标签：面试前端

本文链接：https://blog.csdn.net/HELLO_E_SIR/article/details/147262395

版权

📍面试公司：美团
👜面试岗位：前端开发工程师（移动端方向）
🕐面试时长：约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：块级作用域，声明后不可被重新赋值（对象属性仍可变）。
通常推荐使用 let 和 const，避免 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));
}