高阶前端面试题（含AI相关）

原创已于 2026-03-09 10:18:24 修改 · 385 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

于 2026-03-07 19:59:07 首次发布

react

Hooks 为什么必须按顺序调用？
参考答案要点

通过链表存储 hook
顺序即索引
条件调用会导致错位面试官重点
是否提到 Fiber.memoizedState

useState 的更新是如何批处理的？
参考答案要点

同一事件循环内批处理
Concurrent 模式下自动批处理
更新队列 + lane 合并

Fiber 为什么是链表结构，而不是树或数组？
参考答案要点

child / sibling / return 指针
DFS 迭代而非递归
避免调用栈溢出
支持时间分片（Time Slicing）
加分
提到 workLoop / performUnitOfWork

为什么 setState 是异步的，但有时又是同步的？
参考答案要点

是否在 React 管控上下文
批处理机制
flushSync

TypeScript 相比 JavaScript 解决了什么问题？
参考答案要点

静态类型检查
提前发现错误
更好的 IDE 支持
可读性 & 可维护性提升

面试官判断

❌ 只说“防止 bug”
✅ 能说“约束 + 文档 + 重构安全”

type 和 interface 的区别？
参考答案要点

interface 可声明合并
type 支持联合、交叉、条件类型
interface 更适合对外契约
type 更适合复杂类型运算

什么是泛型？你在项目中如何使用？
参考答案要点

类型参数化
保持类型信息
常见场景：
请求函数
Hooks
工具方法

function request<T>(url: string): Promise<T> {}

AI相关

在 AI 应用中，前端和传统业务最大的不同是什么？
参考答案要点

不确定性
返回结果不可预测
延迟更长
一次请求 ≠ 一次结果

面试官判断

❌ 只说“慢”
✅ 能说“不稳定 + 非确定”

为什么 AI 接口不能像普通接口那样直接用？
参考答案要点

输出结构不稳定
需要容错
需要引导用户预期
需要兜底 UI

如何避免 AI 任务更新阻塞 UI？
参考答案要点

startTransition
Web Worker
节流更新
分片渲染

编程题

1. 把'aabcabbb'  ->  'a3b4c1'

得到一个新list: [‘high’, ‘highmm’]

const source = {
  拍摄角度: "高机位 anah",
  镜头: "8mm鱼眼  nsnnsns"
};

const options = [
  {
    label: "构图",
    children: [
      { label: "无", value: "" },
      { label: "三分法构图", value: "rule_of_thirds" },
      { label: "居中构图", value: "centered" }
    ]
  },
  {
    label: "拍摄角度",
    children: [
      { label: "无", value: "" },
      { label: "高机位", value: "high" },
      { label: "低机位", value: "low" }
    ]
  },
  {
    label: "镜头",
    children: [
      { label: "无", value: "" },
      { label: "8mm鱼眼", value: "highmm" },
      { label: "400mm超长焦", value: "mmhang" }
    ]
  }
];

js执行顺序

async function async1() {
    console.log("1")  
    await async2()
    console.log("2")
}

async function async2() {
    console.log("3")
}

console.log("4")


setTimeout(function () {
    console.log("5")
}, 300)
setTimeout(function () {
    console.log("6")
}, 0)

async1()

new Promise(function (resolve) {
    console.log("7")
    resolve()
    console.log("8") 
}).then(function () {
    console.log("9")
});

console.log("10")