前端手写贴

前端手写。

要理解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:递归调用模拟定时任务。