手写代码题
本文件按题型收录 手写代码题 相关前端面试题索引。 共收录 174 道题（基础 32 / 进阶 90 / 深入 49 / 架构 3）。 每道题都附带完整参考答案与评分维度，点击链接可查看原文。
基础题（32 道）
JavaScript（4 道）
- FB-01-CD-B-001 手写一个数组去重函数。
- FB-01-CD-B-002 用 ES6+ 实现对象/数组的浅拷贝与合并，并比较 Object.assign 与展开运算符的区别。
- FB-01-CD-B-003 手写 Array.prototype.flat 的实现
- FB-01-CD-B-004 手写 JSON.stringify 的简化版
TypeScript（3 道）
HTML/CSS（1 道）
数据结构与算法（11 道）
- FB-08-CD-B-001 用 JavaScript 实现数组求和、最大值、最小值函数。
- FB-08-CD-B-002 反转一个字符串或数组。
- FB-08-CD-B-003 判断一个字符串是否是回文。
- FB-08-CD-B-004 用两个栈实现一个队列。
- FB-08-CD-B-005 有效的括号。
- FB-08-CD-B-006 两数之和。
- FB-08-CD-B-007 实现二叉树的前序、中序、后序遍历。
- FB-08-CD-B-008 斐波那契数列。
- FB-08-CD-B-009 手写快速排序并分析复杂度
- FB-08-CD-B-010 手写归并排序
- FB-08-CD-B-011 手写二分查找及其变体
构建工具（3 道）
- FB-10-CD-B-001 手写一个 Babel Plugin，将 console.log 替换为 console.info
- FB-10-CD-B-020 手写一个 Babel Plugin，删除代码中的所有 console.log。
- FB-10-CD-B-021 手写一个简单的 Webpack Loader
Vue（1 道）
AI 工程化（3 道）
- FB-18-CD-B-001 手写一个调用大模型 API 并解析 JSON 响应的函数
- FB-18-CD-B-002 用 JavaScript 实现一个简单的 Prompt 模板渲染函数
- FB-18-CD-B-034 手写一个调用流式大模型 API 的 React Hook
Node.js / BFF（1 道）
可观测性（1 道）
可视化与图形（1 道）
Electron（1 道）
WebGPU / 图形学（1 道）
低代码（1 道）
进阶题（90 道）
JavaScript（15 道）
- FB-01-CD-A-001 手写 call、apply、bind。
- FB-01-CD-A-002 手写一个深拷贝函数。
- FB-01-CD-A-003 手写 Promise.all。
- FB-01-CD-A-004 手写一个防抖（debounce）函数。
- FB-01-CD-A-005 手写一个异步任务并发控制器。
- FB-01-CD-A-006 实现函数柯里化（curry）和函数组合（compose）。
- FB-01-CD-A-007 手写一个 Promise.all，并说明其特点。
- FB-01-CD-A-008 什么是函数柯里化（Currying）？手写实现。
- FB-01-CD-A-009 手写 Promise.race
- FB-01-CD-A-010 手写 Promise.any
- FB-01-CD-A-011 手写一个 sleep / delay 函数
- FB-01-CD-A-012 手写一个 JSONP 函数
- FB-01-CD-A-013 手写一个 JSON.parse 的简化版
- FB-01-CD-A-014 手写一个模板字符串解析器
- FB-01-CD-A-015 手写一个 EventEmitter（发布订阅）
TypeScript（7 道）
- FB-02-CD-A-001 手写一个类型安全的 get 工具函数
- FB-02-CD-A-002 手写一个自定义类型保护函数
- FB-02-CD-A-003 手写一个 DeepReadonly 类型
- FB-02-CD-A-004 什么是泛型约束？写一个带约束的泛型函数。
- FB-02-CD-A-005 什么是映射类型？手写 Partial<T>、Readonly<T>、Pick<T, K>。
- FB-02-CD-A-006 解释条件类型，并手写 IsArray<T>、Extract<T, U>。
- FB-02-CD-A-007 什么是 infer？用它实现 ReturnType<T> 和 Parameters<T>。
Browser（1 道）
HTML/CSS（1 道）
可访问性（a11y）（1 道）
数据结构与算法（21 道）
- FB-08-CD-A-001 实现二分查找。
- FB-08-CD-A-002 实现冒泡排序、选择排序和插入排序。
- FB-08-CD-A-003 实现快速排序和归并排序。
- FB-08-CD-A-004 合并两个有序数组。
- FB-08-CD-A-005 无重复字符的最长子串。
- FB-08-CD-A-006 和为 K 的子数组。
- FB-08-CD-A-007 链表中倒数第 K 个节点。
- FB-08-CD-A-008 反转链表。
- FB-08-CD-A-009 判断链表是否有环。
- FB-08-CD-A-010 二叉树的层序遍历。
- FB-08-CD-A-011 二叉树的最大深度。
- FB-08-CD-A-012 验证二叉搜索树。
- FB-08-CD-A-013 买卖股票的最佳时机。
- FB-08-CD-A-014 爬楼梯：如何用动态规划求解最小代价？
- FB-08-CD-A-015 实现一个 LRU 缓存
- FB-08-CD-A-016 手写一个深拷贝函数
- FB-08-CD-A-017 手写函数 compose 和 pipe
- FB-08-CD-A-018 实现一个事件发布订阅（EventBus）
- FB-08-CD-A-019 手写 Promise.allSettled
- FB-08-CD-A-020 实现数组乱序（Fisher-Yates）
- FB-08-CD-A-021 大数相加的实现思路
设计模式（4 道）
- FB-09-CD-A-001 手写一个单例模式，并考虑延迟初始化与线程安全。
- FB-09-CD-A-002 手写一个发布订阅事件总线（EventBus）。
- FB-09-CD-A-003 用策略模式重构一段复杂条件判断代码。
- FB-09-CD-A-004 手写一个迭代器模式，实现自定义集合遍历。
构建工具（3 道）
- FB-10-CD-A-001 手写一个最简单的 Webpack Loader，将文件内容转为大写。
- FB-10-CD-A-002 手写一个 Vite 插件，在构建结束时输出所有产物文件大小
- FB-10-CD-A-014 手写一个 Webpack Plugin，在 emit 阶段生成 stats.json。
代码质量与测试（4 道）
- FB-13-CD-A-001 请手写一个 Jest 测试，验证一个 HTTP 请求工具函数的错误重试逻辑。
- FB-13-CD-A-002 请手写一个节流函数并为其编写单元测试。
- FB-13-CD-A-003 请手写一个数组去重函数并为其编写单元测试
- FB-13-CD-A-021 如何识别和清理技术债务？
React（3 道）
- FB-15-CD-A-014 如何封装一个 Custom Hook？请写一个 useWindowSize 的示例。
- FB-15-CD-A-045 请手写一个 useDebounce Hook
- FB-15-CD-A-046 请手写一个 useThrottle Hook
跨端技术（2 道）
AI 工程化（4 道）
- FB-18-CD-A-010 手写一个前端流式对话组件
- FB-18-CD-A-011 手写一个带重试和指数退避的模型调用封装
- FB-18-CD-A-012 手写一个基于 SSE 的前端 Hook useEventSource
- FB-18-CD-A-042 手写一个支持 Function Calling 的前端 AI 组件
Node.js / BFF（2 道）
微前端（1 道）
性能工程（2 道）
质量保障（1 道）
可观测性（1 道）
实时与协同（1 道）
国际化（1 道）
可视化与图形（1 道）
Serverless/Edge（1 道）
前端数据工程（1 道）
鸿蒙 ArkTS / HarmonyOS（5 道）
- FB-46-CD-A-014 请手写一个可复用的 ArkTS 自定义按钮组件。
- FB-46-CD-A-015 用 ArkTS 实现一个简单的计数器组件。
- FB-46-CD-A-016 用 ArkTS 实现一个 TODO 列表，支持添加和删除。
- FB-46-CD-A-017 用 ArkTS 实现一个简单的网络请求并展示列表。
- FB-46-CD-A-018 用 ArkTS 实现一个自定义弹窗组件。
Flutter（1 道）
Electron（1 道）
WebAssembly（1 道）
WebGPU / 图形学（1 道）
多媒体（Multimedia）（2 道）
低代码（1 道）
深入题（49 道）
JavaScript（6 道）
- FB-01-CD-P-001 手写一个符合 Promise/A+ 规范的 Promise。
- FB-01-CD-P-002 手写一个 LRU Cache。
- FB-01-CD-P-003 手写一个 Generator 自动执行器，支持 yield Promise。
- FB-01-CD-P-004 如何实现一个响应式系统（类似 Vue3 的 reactive）？
- FB-01-CD-P-005 手写一个符合 Promise/A+ 规范的 Promise，关键点有哪些？
- FB-01-CD-P-006 手写一个带并发限制的异步任务调度器
TypeScript（2 道）
HTML/CSS（1 道）
可访问性（a11y）（1 道）
数据结构与算法（14 道）
- FB-08-CD-P-001 最长递增子序列。
- FB-08-CD-P-002 0-1 背包问题。
- FB-08-CD-P-003 编辑距离。
- FB-08-CD-P-004 全排列和子集。
- FB-08-CD-P-005 N 皇后问题。
- FB-08-CD-P-006 Top K 问题。
- FB-08-CD-P-007 数据流中的中位数。
- FB-08-CD-P-008 合并 K 个有序链表。
- FB-08-CD-P-009 图的 BFS 和 DFS 遍历。
- FB-08-CD-P-010 岛屿数量。
- FB-08-CD-P-011 合并区间。
- FB-08-CD-P-012 手写一个最小堆 / 优先队列
- FB-08-CD-P-013 手写 Trie（前缀树）
- FB-08-CD-P-014 手写并查集
设计模式（2 道）
构建工具（4 道）
- FB-10-CD-P-001 手写一个 Webpack Plugin，在构建完成后输出所有 chunk 文件名。
- FB-10-CD-P-002 手写一个 Rollup 插件，将多个 JSON 文件合并为虚拟模块导出
- FB-10-CD-P-016 手写一个 Vite/Rollup 插件，支持直接导入 Markdown 文件为 HTML 字符串。
- FB-10-CD-P-017 手写一个 Webpack Plugin，输出构建产物体积报告