no message
This commit is contained in:
parent
49843e4d7a
commit
d9bd5b7230
@ -2,6 +2,9 @@
|
||||
|
||||
## 1. 手写 Promise
|
||||
|
||||
> **场景**：理解异步编程核心机制，处理 Ajax 请求、文件读取、定时器等异步操作的链式调用和错误处理。
|
||||
> **解决**：回调地狱问题，提供优雅的异步流程控制。
|
||||
|
||||
```js
|
||||
class MyPromise {
|
||||
constructor(executor) {
|
||||
@ -48,6 +51,9 @@ class MyPromise {
|
||||
|
||||
## 2. Promise.all / Promise.race
|
||||
|
||||
> **场景**：`Promise.all` 用于并行请求多个接口后统一处理（如同时加载用户信息和订单列表）；`Promise.race` 用于请求超时控制、竞速取最快响应。
|
||||
> **解决**：多异步任务协调与超时兜底问题。
|
||||
|
||||
```js
|
||||
// Promise.all - 所有成功才成功
|
||||
Promise.myAll = (promises) => {
|
||||
@ -73,6 +79,9 @@ Promise.myRace = (promises) => {
|
||||
|
||||
## 3. 防抖与节流
|
||||
|
||||
> **场景**：防抖用于搜索框输入（停止输入后才请求）、窗口 resize 结束后计算布局；节流用于滚动事件监听、按钮防重复点击。
|
||||
> **解决**：高频事件触发导致的性能问题和重复请求。
|
||||
|
||||
```js
|
||||
// 防抖：停止触发后执行
|
||||
function debounce(fn, delay) {
|
||||
@ -98,6 +107,9 @@ function throttle(fn, delay) {
|
||||
|
||||
## 4. 深拷贝（处理循环引用）
|
||||
|
||||
> **场景**：Redux/Vuex 状态管理中复制 state、表单数据备份与重置、避免修改原始数据造成副作用。
|
||||
> **解决**：引用类型浅拷贝导致的数据污染问题，特别是循环引用场景。
|
||||
|
||||
```js
|
||||
function deepClone(obj, map = new WeakMap()) {
|
||||
if (obj === null || typeof obj !== 'object') return obj;
|
||||
@ -120,6 +132,9 @@ function deepClone(obj, map = new WeakMap()) {
|
||||
|
||||
## 5. 函数柯里化
|
||||
|
||||
> **场景**：参数复用（如日志函数固定模块名）、延迟执行、函数式编程中的组合与管道操作。
|
||||
> **解决**：减少重复传参，提高函数复用性和可读性。
|
||||
|
||||
```js
|
||||
function curry(fn) {
|
||||
return function curried(...args) {
|
||||
@ -139,6 +154,9 @@ curriedAdd(1, 2)(3); // 6
|
||||
|
||||
## 6. call / apply / bind 实现
|
||||
|
||||
> **场景**：改变函数执行上下文（如借用数组方法处理类数组）、React 类组件中绑定事件处理函数的 this。
|
||||
> **解决**：this 指向问题，实现函数借用和预设参数。
|
||||
|
||||
```js
|
||||
// call
|
||||
Function.prototype.myCall = function(ctx, ...args) {
|
||||
@ -171,6 +189,9 @@ Function.prototype.myBind = function(ctx, ...args) {
|
||||
|
||||
## 7. 事件总线 EventEmitter
|
||||
|
||||
> **场景**：组件间通信（如 Vue 的 EventBus）、插件系统、微前端应用间消息传递、解耦模块依赖。
|
||||
> **解决**：发布-订阅模式实现松耦合的事件驱动架构。
|
||||
|
||||
```js
|
||||
class EventEmitter {
|
||||
constructor() {
|
||||
|
||||
@ -2,6 +2,9 @@
|
||||
|
||||
## 1. 数组去重（多种方法）
|
||||
|
||||
> **场景**：标签列表去重、下拉选项去重、用户列表按 ID 去重、搜索历史去重。
|
||||
> **解决**：数据列表中存在重复项影响展示或数据处理的问题。
|
||||
|
||||
```js
|
||||
// 方法1: Set
|
||||
const unique1 = arr => [...new Set(arr)];
|
||||
@ -22,6 +25,9 @@ const uniqueByKey = (arr, key) => {
|
||||
|
||||
## 2. 扁平化数组
|
||||
|
||||
> **场景**：多级分类菜单拍平为一维数组、树形结构转平铺列表、处理嵌套 JSON 数据。
|
||||
> **解决**：嵌套数组不便于遍历、查找和渲染的问题。
|
||||
|
||||
```js
|
||||
// 递归实现
|
||||
function flatten(arr, depth = Infinity) {
|
||||
@ -49,6 +55,9 @@ arr.flat(Infinity);
|
||||
|
||||
## 3. 字符串反转
|
||||
|
||||
> **场景**：回文判断预处理、文本效果处理、简单加密/混淆。
|
||||
> **解决**：JS 没有内置字符串反转方法，需要手工实现。
|
||||
|
||||
```js
|
||||
const reverse = str => str.split('').reverse().join('');
|
||||
|
||||
@ -58,6 +67,9 @@ const reverse2 = str => [...str].reverse().join('');
|
||||
|
||||
## 4. 判断回文
|
||||
|
||||
> **场景**：车牌号校验、特殊编码检测、文字游戏、算法题基础。
|
||||
> **解决**：判断字符串正反读是否一致，常作为算法题输入校验或中间步骤。
|
||||
|
||||
```js
|
||||
const isPalindrome = str => {
|
||||
const clean = str.toLowerCase().replace(/[^a-z0-9]/g, '');
|
||||
@ -77,6 +89,9 @@ const isPalindrome2 = str => {
|
||||
|
||||
## 5. 最长公共前缀
|
||||
|
||||
> **场景**：搜索联想提取、路径匹配、文件名批量处理、自动补全功能。
|
||||
> **解决**：批量字符串中提取共同前缀以进行分类或缩短展示。
|
||||
|
||||
```js
|
||||
function longestCommonPrefix(strs) {
|
||||
if (!strs.length) return '';
|
||||
@ -96,6 +111,9 @@ function longestCommonPrefix(strs) {
|
||||
|
||||
## 6. 模板字符串解析
|
||||
|
||||
> **场景**：简易模板引擎、邮件/短信模板填充、国际化 i18n 文本替换。
|
||||
> **解决**：将模板字符串中的占位符替换为实际数据，类似 Mustache/Handlebars 语法。
|
||||
|
||||
```js
|
||||
function render(template, data) {
|
||||
return template.replace(/\{\{(\w+)\}\}/g, (match, key) => {
|
||||
@ -123,6 +141,9 @@ renderDeep('{{user.info.name}}', { user: { info: { name: 'Tom' } } }); // "Tom"
|
||||
|
||||
## 7. 数组按属性去重并排序
|
||||
|
||||
> **场景**：用户列表按 ID 去重后按注册时间排序、商品列表按 SKU 去重后按价格排序。
|
||||
> **解决**：对象数组的去重和排序组合操作，常见业务需求。
|
||||
|
||||
```js
|
||||
function uniqueAndSort(arr, key, sortKey, order = 'asc') {
|
||||
// 去重
|
||||
|
||||
@ -2,6 +2,9 @@
|
||||
|
||||
## 1. 链表
|
||||
|
||||
> **场景**：操作历史记录（浏览器前进后退）、LRU 缓存淘汰、撤销重做功能、音乐播放列表。
|
||||
> **解决**：频繁插入/删除场景下数组性能差的问题，O(1) 插入删除。
|
||||
|
||||
### 反转链表
|
||||
|
||||
```js
|
||||
@ -56,6 +59,9 @@ function mergeTwoLists(l1, l2) {
|
||||
|
||||
## 2. 二叉树
|
||||
|
||||
> **场景**：DOM 树遍历、文件目录结构、组织架构图、表达式解析、前端路由匹配。
|
||||
> **解决**：层级数据的存储与高效查找，遍历、搜索与路径问题。
|
||||
|
||||
### 遍历（前中后序）
|
||||
|
||||
```js
|
||||
@ -111,6 +117,9 @@ function hasPathSum(root, targetSum) {
|
||||
|
||||
## 3. 栈与队列
|
||||
|
||||
> **场景**：栈用于括号匹配、撤销操作、函数调用栈；队列用于任务调度、消息队列、BFS 广度优先搜索。
|
||||
> **解决**：先进后出/先进先出的数据操作顺序控制。
|
||||
|
||||
### 用栈实现队列
|
||||
|
||||
```js
|
||||
@ -161,6 +170,9 @@ function isValid(s) {
|
||||
|
||||
## 4. 哈希表
|
||||
|
||||
> **场景**：快速查找（用户ID查询）、统计词频、数据去重、分组操作。
|
||||
> **解决**：O(1) 时间复杂度的键值对存储和查找，避免线性遍历。
|
||||
|
||||
### 两数之和
|
||||
|
||||
```js
|
||||
@ -192,6 +204,9 @@ function groupAnagrams(strs) {
|
||||
|
||||
## 5. 排序算法
|
||||
|
||||
> **场景**：商品价格/销量排序、排行榜、数据可视化预处理。
|
||||
> **解决**：无序数据有序化，理解分治思想（快排、归并）是算法基础。
|
||||
|
||||
### 快速排序
|
||||
|
||||
```js
|
||||
@ -230,6 +245,9 @@ function merge(left, right) {
|
||||
|
||||
## 6. 二分查找
|
||||
|
||||
> **场景**：有序列表快速定位（分页跳转）、版本号查找、IP 地址归属地查询、猜数字游戏。
|
||||
> **解决**：在有序数据中 O(log n) 时间复杂度快速查找，比线性查找效率高很多。
|
||||
|
||||
### 基础二分查找
|
||||
|
||||
```js
|
||||
|
||||
@ -2,6 +2,9 @@
|
||||
|
||||
## 1. 并发控制（限制并发请求数）
|
||||
|
||||
> **场景**：批量上传文件（如100张图片每次最多5个并发）、网络爬虫控制请求频率、避免压垂服务器。
|
||||
> **解决**：大量异步任务同时发起导致浏览器卡顿或服务端拒绝服务。
|
||||
|
||||
```js
|
||||
async function limitConcurrency(tasks, limit) {
|
||||
const results = [];
|
||||
@ -61,6 +64,9 @@ class Scheduler {
|
||||
|
||||
## 2. 缓存函数（Memoization）
|
||||
|
||||
> **场景**：计算密集型函数结果缓存（如斐波那契）、API 请求缓存、React useMemo 原理。
|
||||
> **解决**：相同输入重复计算浪费性能，用空间换时间。
|
||||
|
||||
```js
|
||||
function memoize(fn) {
|
||||
const cache = new Map();
|
||||
@ -93,6 +99,9 @@ function memoizeWithTTL(fn, ttl = 60000) {
|
||||
|
||||
## 3. 解析 URL 参数
|
||||
|
||||
> **场景**：从链接提取分享参数、跟踪渠道来源（utm_source）、路由参数解析。
|
||||
> **解决**：将 URL 查询字符串转换为结构化对象，方便业务使用。
|
||||
|
||||
```js
|
||||
function parseQuery(url) {
|
||||
const query = url.split('?')[1] || '';
|
||||
@ -124,6 +133,9 @@ function parseQueryRegex(url) {
|
||||
|
||||
## 4. DOM 查找最近公共祖先
|
||||
|
||||
> **场景**：事件委托的目标元素判断、富文本编辑器选区处理、拖拽边界计算。
|
||||
> **解决**：在 DOM 树中找到两个节点的最近共同父级。
|
||||
|
||||
```js
|
||||
function findCommonAncestor(node1, node2) {
|
||||
const ancestors = new Set();
|
||||
@ -153,6 +165,9 @@ function findCommonAncestor(node1, node2) {
|
||||
|
||||
## 5. 懒加载/无限滚动
|
||||
|
||||
> **场景**：电商商品列表、社交信息流、图片画廊、新闻列表。
|
||||
> **解决**：首屏加载慢、一次性加载大量数据卡顿的问题。
|
||||
|
||||
```js
|
||||
// IntersectionObserver 实现懒加载
|
||||
function lazyLoad(selector) {
|
||||
@ -186,6 +201,9 @@ function infiniteScroll(container, loadMore) {
|
||||
|
||||
## 6. LRU 缓存
|
||||
|
||||
> **场景**：浏览器缓存淘汰、图片缓存池、Redis 内存管理、keep-alive 组件缓存。
|
||||
> **解决**：内存有限时如何淘汰最久未使用的数据，保留热点数据。
|
||||
|
||||
```js
|
||||
class LRUCache {
|
||||
constructor(capacity) {
|
||||
@ -215,6 +233,9 @@ class LRUCache {
|
||||
|
||||
## 7. 大数相加
|
||||
|
||||
> **场景**：订单号/交易号处理、金融精确计算、超出 JS Number 范围的计算。
|
||||
> **解决**：JS 数字最大安全整数 2^53-1 限制，大数运算精度丢失问题。
|
||||
|
||||
```js
|
||||
function addBigNumbers(a, b) {
|
||||
const maxLen = Math.max(a.length, b.length);
|
||||
|
||||
@ -2,6 +2,9 @@
|
||||
|
||||
## 1. 虚拟DOM Diff 算法
|
||||
|
||||
> **场景**：React/Vue 核心渲染机制、理解为何需要 key 属性、性能优化方向。
|
||||
> **解决**：直接操作真实 DOM 性能开销大，通过对比新旧虚拟树最小化 DOM 操作。
|
||||
|
||||
### 简化版 Diff 实现
|
||||
|
||||
```js
|
||||
@ -68,6 +71,9 @@ function diffChildren(oldChildren, newChildren, patches) {
|
||||
|
||||
## 2. Vue 响应式原理
|
||||
|
||||
> **场景**：Vue 项目开发、理解数据驱动视图更新、排查响应式失效问题。
|
||||
> **解决**：手动操作 DOM 繁琐易错，自动追踪数据变化并更新视图。
|
||||
|
||||
### Vue 2 (Object.defineProperty)
|
||||
|
||||
```js
|
||||
@ -150,6 +156,9 @@ function effect(fn) {
|
||||
|
||||
## 3. React useState 简单模拟
|
||||
|
||||
> **场景**：React 函数组件状态管理、理解 Hooks 为何不能在条件语句中调用。
|
||||
> **解决**：函数组件无状态，通过闭包和数组模拟类组件的状态能力。
|
||||
|
||||
```js
|
||||
let state = [];
|
||||
let stateIndex = 0;
|
||||
@ -179,6 +188,9 @@ function render() {
|
||||
|
||||
## 4. useEffect 简单模拟
|
||||
|
||||
> **场景**：React 副作用处理（数据请求、事件订阅、定时器）、理解依赖数组作用。
|
||||
> **解决**：函数组件中处理生命周期和副作用，替代类组件的 componentDidMount 等。
|
||||
|
||||
```js
|
||||
let effectIndex = 0;
|
||||
let effects = [];
|
||||
@ -209,6 +221,9 @@ function useEffect(callback, deps) {
|
||||
|
||||
## 5. 简易 Redux
|
||||
|
||||
> **场景**：跨组件状态管理、理解单向数据流架构、实现时间旅行调试。
|
||||
> **解决**：多组件共享状态混乱，集中管理应用状态并可预测地变更。
|
||||
|
||||
```js
|
||||
function createStore(reducer) {
|
||||
let state;
|
||||
|
||||
@ -2,6 +2,9 @@
|
||||
|
||||
## 1. 图片懒加载
|
||||
|
||||
> **场景**：电商商品列表、新闻资讯页、图片画廊、任何大量图片展示页面。
|
||||
> **解决**：首屏加载大量图片消耗带宽和性能，延迟加载可视区域外的图片。
|
||||
|
||||
### IntersectionObserver 方案（推荐）
|
||||
|
||||
```js
|
||||
@ -49,6 +52,9 @@ function lazyLoadScroll() {
|
||||
|
||||
## 2. 虚拟列表（大数据渲染优化）
|
||||
|
||||
> **场景**：聊天记录、日志列表、表格万级数据、任何长列表滚动场景。
|
||||
> **解决**：渲染万级 DOM 节点卡顿，只渲染可视区域的元素，大幅提升性能。
|
||||
|
||||
```js
|
||||
class VirtualList {
|
||||
constructor({ container, itemHeight, totalItems, renderItem }) {
|
||||
@ -124,6 +130,9 @@ new VirtualList({
|
||||
|
||||
## 3. 函数节流在滚动事件中的应用
|
||||
|
||||
> **场景**：吸顶效果、返回顶部按钮显隐、数据埋点、滚动位置计算。
|
||||
> **解决**：滚动事件每秒触发数十次，频繁执行回调导致页面卡顿。
|
||||
|
||||
```js
|
||||
// 节流函数
|
||||
function throttle(fn, delay) {
|
||||
@ -166,6 +175,9 @@ window.addEventListener('resize', throttle(() => {
|
||||
|
||||
## 4. requestAnimationFrame 优化动画
|
||||
|
||||
> **场景**：平滑滚动、CSS 动画替代方案、Canvas/WebGL 渲染循环、游戏开发。
|
||||
> **解决**：setTimeout/setInterval 动画帧率不稳定，rAF 与屏幕刷新率同步，动画更流畅。
|
||||
|
||||
```js
|
||||
// 使用 rAF 实现平滑滚动
|
||||
function smoothScrollTo(target, duration = 500) {
|
||||
@ -208,6 +220,9 @@ function rafThrottle(fn) {
|
||||
|
||||
## 5. Web Worker 处理耗时任务
|
||||
|
||||
> **场景**：大文件解析（Excel/CSV）、图像处理、复杂计算（加密/压缩）、数据分析。
|
||||
> **解决**：耗时JS计算阻塞主线程导致页面卡顿，Worker 在后台线程执行不影响UI。
|
||||
|
||||
```js
|
||||
// main.js
|
||||
const worker = new Worker('worker.js');
|
||||
@ -231,6 +246,9 @@ self.onmessage = (e) => {
|
||||
|
||||
## 6. 时间切片（避免长任务阻塞）
|
||||
|
||||
> **场景**：React Fiber 架构原理、大量 DOM 初始化、批量数据处理不卡顿UI。
|
||||
> **解决**：长任务占据主线程超过50ms导致用户交互无响应，分片执行保证响应性。
|
||||
|
||||
```js
|
||||
async function timeSlice(tasks, chunkSize = 5) {
|
||||
const results = [];
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user