From d9bd5b72307cca703d7eef2f512d8827c4baaeda Mon Sep 17 00:00:00 2001
From: KuroSago <kurosago@outlook.com>
Date: Mon, 19 Jan 2026 09:43:07 +0800
Subject: [PATCH] no message

---
 algorithm/01-js-basics.md            | 21 +++++++++++++++++++++
 algorithm/02-array-string.md         | 21 +++++++++++++++++++++
 algorithm/03-data-structure.md       | 18 ++++++++++++++++++
 algorithm/04-practical-scenarios.md  | 21 +++++++++++++++++++++
 algorithm/05-framework-algorithms.md | 15 +++++++++++++++
 algorithm/06-performance.md          | 18 ++++++++++++++++++
 6 files changed, 114 insertions(+)

diff --git a/algorithm/01-js-basics.md b/algorithm/01-js-basics.md
index b690c8c..160238c 100644
--- a/algorithm/01-js-basics.md
+++ b/algorithm/01-js-basics.md
@@ -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() {
diff --git a/algorithm/02-array-string.md b/algorithm/02-array-string.md
index 74873f1..a7b4ff9 100644
--- a/algorithm/02-array-string.md
+++ b/algorithm/02-array-string.md
@@ -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') {
   // 去重
diff --git a/algorithm/03-data-structure.md b/algorithm/03-data-structure.md
index 22b16fb..2669320 100644
--- a/algorithm/03-data-structure.md
+++ b/algorithm/03-data-structure.md
@@ -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
diff --git a/algorithm/04-practical-scenarios.md b/algorithm/04-practical-scenarios.md
index bb42e47..2eb4056 100644
--- a/algorithm/04-practical-scenarios.md
+++ b/algorithm/04-practical-scenarios.md
@@ -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);
diff --git a/algorithm/05-framework-algorithms.md b/algorithm/05-framework-algorithms.md
index ebdaf75..23d3239 100644
--- a/algorithm/05-framework-algorithms.md
+++ b/algorithm/05-framework-algorithms.md
@@ -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;
diff --git a/algorithm/06-performance.md b/algorithm/06-performance.md
index e33c1f5..7024a1f 100644
--- a/algorithm/06-performance.md
+++ b/algorithm/06-performance.md
@@ -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 = [];