我把今年流传的前端 AI 面试题整理了一遍——4 类场景题+回答框架（附速查表）

最近翻了一圈今年流传的前端面试讨论：掘金、知乎、牛客，加上海外社区。问法明显变了：纯八股的比重在降，「现场开 AI 工具写代码」「review 一段 AI 生成的代码」这类 AI 协作场景题开始高频出现。我把反复出现的题型归成了 4 类，每一类都给一份可以直接背的回答框架，文末有速查表。

先说明：这是整理自公开面经与社区讨论的合集，不是某一家公司的真题泄露，也没有编任何人的故事。下面直接看题。

第一类：现场用 AI 写功能

形式：面试官给你一个明确需求——「搜索列表组件，要防抖、要 loading、要错误态，可以用任何 AI 工具，45 分钟」。很多人以为这题考的是手速，其实面试官盯的是三件事：你怎么给 AI 提需求、生成后看不看代码、出错了能不能定位。

拿搜索列表举例，AI 第一版十有八九会给你写出这种代码：

function SearchList({ keyword }) {
  const [data, setData] = useState([]);
  useEffect(() => {
    fetch(`/api/search?q=${keyword}`)
      .then(res => res.json())
      .then(setData);
  }, [keyword]);
  return <List data={data} />;
}

看着能跑，其实埋了三颗雷：没有防抖，每敲一个字符发一次请求；没有清理逻辑，输入快的时候旧请求回来会覆盖新结果；请求失败直接静默。现场能把这三点指出来并修掉，才是这道题的得分点：

function SearchList({ keyword }) {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(false);
  useEffect(() => {
    const timer = setTimeout(() => {
      const ctrl = new AbortController();
      setLoading(true);
      fetch(`/api/search?q=${encodeURIComponent(keyword)}`, { signal: ctrl.signal })
        .then(res => res.json())
        .then(list => { setData(list); setLoading(false); })
        .catch(err => { if (err.name !== 'AbortError') setLoading(false); });
      return () => ctrl.abort();
    }, 300);
    return () => clearTimeout(timer);
  }, [keyword]);
  return <List data={data} loading={loading} />;
}

回答框架，四步：

1. 先花 2 分钟跟面试官对齐需求边界（数据从哪来、要不要分页），别拿到题就让 AI 开写；
2. 给 AI 的提示词里带约束：技术栈、要处理的边界态、代码风格；
3. 生成后逐行读一遍再运行，至少主动说出一处 AI 写错或漏掉的地方；
4. 收尾时主动提测试思路——竞态、空结果、超长输入。

第二类：Review 一段 AI 写的代码

形式：面试官贴一段 AI 生成的代码，里面埋了若干坑，让你现场找。这是今年新出现、出现频率涨得最快的一类，因为它直接考「你敢不敢直接提交 AI 的代码」。

前端版本最爱埋的坑，我整理成一张清单：

埋坑位置	典型错误	后果
useEffect 依赖	依赖漏写/写错	拿到过期状态、死循环
异步请求	无清理、无竞态保护	旧响应覆盖新数据
事件监听/定时器	不清理	内存泄漏、重复触发
数字处理	0.1+0.2、长 ID 用 number	金额算错、ID 截断
状态更新	直接改原对象/数组	视图不刷新
列表渲染	key 用 index	复用时状态串位

一个高频样例，下面这段 AI 代码埋了两处：

useEffect(() => {
  fetch('/api/profile')
    .then(res => res.json())
    .then(user => setUser(user));
}, []);

第一处：组件卸载后请求回来还会 setUser；第二处：如果这个 effect 依赖会变化，多次请求之间没有竞态保护。修复：

useEffect(() => {
  const ctrl = new AbortController();
  fetch('/api/profile', { signal: ctrl.signal })
    .then(res => res.json())
    .then(user => setUser(user))
    .catch(err => { if (err.name !== 'AbortError') console.error(err); });
  return () => ctrl.abort();
}, []);

Review 的优先级框架，按这个顺序找，命中率最高：先查生命周期与清理（依赖、监听、定时器）→ 再查异步竞态 → 再查数据精度与类型（金额、长 ID、null）→ 最后才谈性能（memo、重渲染）。前两类是埋坑重灾区，先把它们扫完。

第三类：指挥一个 AI 完成任务

形式：给你一个真实仓库级别的任务，「给这个组件库加深色模式支持」「把这个表单迁移到新的校验库」，允许你用 agent 类工具，考你怎么指挥。很多人挂在同一个地方：把整段需求原样丢给 AI，然后看着它一路跑偏。

这类题的评分点其实是「上下文管理」，一份能用的上下文包含五个要素：

要素	写什么	不写的后果
背景	项目是什么、改哪个模块	AI 自由发挥，风格跑偏
任务	一次只给一步	摊子铺太大，错得离谱
约束	不许动哪些文件、沿用哪个现有模式	重复造轮子
输出格式	要 diff 还是完整文件	没法验收
示例	项目里一段现成的正确写法	风格不一致

还有一个加分动作：每完成一小步就验证一步，跑一下、看一眼渲染，再给下一步指令。面试官要的是你控制 AI 收敛的过程，一次生成完美代码没人指望。

第四类：什么时候不该用 AI

形式：行为题，但问法全围着 AI 转：「什么代码你不让 AI 写？」「AI 给过你什么错，你怎么发现的？」这类题最容易答虚，给你一个具体的回答结构：

1. 先给分类：涉及钱与精度的计算、并发与竞态逻辑、安全相关（鉴权、输入校验），这三类我会逐行审，不直接采纳；
2. 再给验证习惯：AI 写的边界条件我会手动构造用例跑一遍，尤其是空值、超长输入、重复提交；
3. 最后给判断标准：这段代码出错时我要背锅，我能不能在 5 分钟内向别人讲清楚它为什么对——讲不清楚就不合并。

4 类题速查表

场景题	表面考	实际考	一句话框架
现场用 AI 写功能	速度	提需求+验收能力	先澄清，后约束，生成必审
Review AI 代码	找 bug	对 AI 失误模式的熟悉度	清理→竞态→精度→性能
指挥 AI 任务	会不会用工具	上下文管理	五要素+小步验证
何时不用 AI	态度	判断力与兜底能力	三类高危必审+讲不清不合并

面试前一周可以这么准备：第 1-2 天，手撸一遍搜索组件然后让 AI 重写，对比差异；第 3-4 天，把自己最近写的一段代码丢给 AI 让它 review，看它漏掉什么；第 5 天，练五要素提示词；第 6-7 天，把速查表过一遍，准备一个自己的「AI 出错」案例。

这些题型还在快速变化，如果你在面试里见到了这张表没覆盖的新花样，评论区聊聊——我下一篇把新题型补进速查表。

---