前端手写贴
前端手写。
要理解JavaScript底层规律，本帖将会更新手写相关内容，顺道巩固知识体系。
一、函数控制
1. 防抖（Debounce）：延迟执行，触发间隔小于阈值则重置计时。
2. 节流（Throttle）：固定间隔内仅执行一次，稀释高频操作。
3. 函数柯里化：分步传参，返回新函数直至参数满足要求。
二、对象操作
1. 拷贝方法
浅拷贝：仅复制一层属性。
深拷贝：
JSON拷贝：JSON.parse(JSON.stringify())（不支持函数/循环引用）。
递归拷贝：递归复制嵌套属性。
MessageChannel：利用跨线程通信的异步深拷贝。
structuredClone：浏览器原生深拷贝 API。
2. 对象处理
判断对象相同：递归比较键值与类型。
对象去重：基于唯一标识（如 JSON.stringify）使用 Set/Map 去重。
扁平化：递归展开嵌套数组/对象。
三、原型与继承
1. 核心机制
手写new：创建对象、绑定原型、执行构造函数。
new.target：检测函数是否通过 new 调用。
手写create：模拟 Object.create() 实现原型继承。
2. 继承方式
原型链继承：Child.prototype = new Parent()。
盗用构造函数：在子类构造函数中调用父类构造函数。
组合继承（原型链+构造函数）。
原型式继承：Object.create()。
寄生组合继承（盗用构造函数 + create）。
ES6 extends：语法糖实现最优继承。
3. 原型检查
手写instanceof：递归检查原型链。
isPrototypeOf：判断对象是否在另一对象原型链上。
Symbol 与 Iterator：自定义迭代行为与唯一标识。
四、异步处理
1. Promise 实现
Promise.all：全部成功则返回结果数组，否则失败。
Promise.race：返回首个完成（成功/失败）的结果。
Promise.any：返回首个成功结果，全部失败则报错。
Promise.allSettled：等待所有结束，返回状态与结果。
2. 异步控制
控制并发：限制并行任务数（如队列+计数器）。
红绿灯：async/await 定时切换状态（如 3s 红灯→2s 绿灯）。
3. 生成器与异步
Generator：生成迭代器，可暂停执行。
手写async：用 Generator + Promise 模拟异步函数。
五、数据结构与算法
1. 遍历与搜索
DFS 遍历：深度优先（递归/栈）。
BFS 遍历：广度优先（队列）。
2. 排序算法
冒泡排序：相邻比较交换。
快排：分治思想，基准分割左右子数组。
堆排序：构建最大堆，反复取堆顶。
乱序排序：随机交换位置（如 FisherYates 洗牌）。
3. 数据处理
数组转树：利用 Map 存储节点，按 parentId 关联子树。
子树添加父 ID：递归遍历树结构注入父节点信息。
六、实用工具
1. 数组方法
手写Map：遍历并返回新数组。
手写forEach：遍历无返回值。
手写filter：条件筛选返回新数组。
手写reduce：累积计算结果。
2. 格式转换
千位数分割：1234567 → "1,234,567"。
大写转驼峰：HELLO_WORLD → helloWorld。
驼峰转大写：helloWorld → HELLO_WORLD。
解析 URL：拆分参数、哈希、路径等。
七、Web API 实现
1. 路由机制
手写Hash路由：监听 hashchange 事件。
手写History路由：基于 pushState 和 popstate 事件。
2. 底层 API
手写defineProperty：实现属性劫持（Getter/Setter）。
setTimeout 实现 setInterval：递归调用模拟定时任务。