手撕代码（前端面试）

JS 高频「手撕代码」合集，按主题归类。每篇尽量给出可运行实现 + 核心要点 + 常见追问，面向高级前端面试。

高频必会（务必能默写）

主题	考察点
深拷贝	循环引用（WeakMap）、特殊类型（Date/RegExp/Map/Set）、Symbol 键
Promise	状态机、链式调用、then 返回新 Promise、all/race/allSettled/any
防抖节流	this/参数透传、leading/trailing、cancel
原型相关	手写 new/call/apply/bind/instanceof/继承
函数柯里化	闭包、参数收集、fn.length
EventEmitter	发布订阅、once/off 的边界处理

数组与数据结构

• 数组去重
• 数组扁平化
• 数组相关（交集、乱序/洗牌、合并有序数组、移动零、reduce 实现 map）
• 手写数组方法（reduce/filter/forEach/flat polyfill）
• 列表和树状数据互转
• LRU 缓存（Map 实现 O(1) get/put）

异步与并发

• async/await 原理与异步工具（Generator + co、sleep、retry）
• 请求处理相关（请求去重、并发控制 asyncPool、串行）
• 其他（并发调度器、timeLimit、间隔输出、红绿灯、mergePromise、LazyMan）
• Promise 面试题

框架原理

• 数据响应式（Vue2 defineProperty vs Vue3 Proxy）
• 虚拟 DOM 与 Diff（vnode、render、diff 策略）

函数式与其他

• 函数相关（compose）
• 手写 JSON.stringify / parse
• 字符串与数字处理（千分位、大数相加、驼峰转换）
• URL 参数解析与序列化
• 模板引擎（DOM2JSON）
• 其他 js 相关（精确 setInterval、safeGet、Object.freeze、模拟 let/const）

答题建议

1. 先确认需求边界：是否要处理 this、参数、异常、循环引用、空输入等，再动手。
2. 从简到繁：先写能跑的「启蒙版」，再逐步加边界与优化，体现思路。
3. 主动讲复杂度与权衡：时间/空间复杂度、为什么用 WeakMap、为什么用微任务等。
4. 准备追问：每个题都有经典延伸（如 bind 支持 new、节流的 leading/trailing），提前想好。