常见数据结构
- 1. 数组（Array）
- 2. 对象（Object）
- 3. 栈（Stack）
- 4. 队列（Queue）
- 5. 链表（Linked List）
- 6. 树（Tree）
- 7. 集合（Set）
- 8. 哈希表（Hash Table）
- 9. 图（Graph）
- 10. 堆（Heap）
- 11. 不可变数据结构（Immutable.js）
- 12. ES6+ 新增结构
- 总结
1. 数组（Array）
- 用途：存储有序数据集合，适用于列表渲染、数据遍历等场景。
- 典型操作：push(), pop(), splice(), map(), filter(), reduce()。全数组方法应用可以看这篇文章
- 应用场景：
- 渲染列表（如 React/Vue 中的动态列表）。
- 处理表单数据或 API 返回的集合。
- 实现队列或栈（通过数组方法模拟）。
2. 对象（Object）
- 用途：键值对存储，用于表示实体属性或快速查找数据。
- 典型操作：Object.keys(), Object.values(), Object.entries()。
- 应用场景：
- 组件状态管理（如 React 的 useState 对象）。
- 配置项或映射表（如路由配置、国际化字段）。
- 缓存数据（通过键快速访问）。
3. 栈（Stack）
- 用途：后进先出（LIFO）结构，用于管理函数调用、撤销操作等。
- 实现方式：数组模拟（push 和 pop）。
- 应用场景：
- 浏览器历史记录（路由跳转栈）。
- 撤销/重做功能（如富文本编辑器）。
- 递归函数调用（调用栈）。
4. 队列（Queue）
- 用途：先进先出（FIFO）结构，用于处理异步任务、事件队列。
- 实现方式：数组模拟（push 和 shift）。
- 应用场景：
- 浏览器事件循环（任务队列、微任务队列）。
- 消息队列（如 WebSocket 消息顺序处理）。
- 广度优先搜索（BFS）算法（如 DOM 树遍历）。
5. 链表（Linked List）
- 用途：动态数据存储，插入/删除高效，但查找效率低。
- 前端实现：可通过对象或类实现。
- 应用场景：
- React Fiber 架构中的任务调度链表。
- 实现 LRU 缓存淘汰算法。
- 需要频繁插入/删除的场景（如大型列表优化）。
6. 树（Tree）
- 用途：分层数据存储，适用于嵌套结构。
- 常见类型：DOM 树、组件树、虚拟 DOM、JSON 对象。
- 应用场景：
- 渲染 DOM 结构或组件层级（如 React/Vue 组件树）。
- 文件目录结构、多级菜单。
- 虚拟 DOM Diff 算法（优化渲染性能）。
7. 集合（Set）
- 用途：存储唯一值，用于去重或成员检查。
- ES6 实现：Set 对象。
- 应用场景：
- 去重数组（[…new Set(array)]）。
- 标签管理、权限校验（检查元素是否存在）。
- 事件监听器的唯一性管理。
8. 哈希表（Hash Table）
- 用途：键值对存储，快速查找（O(1) 时间复杂度）。
- ES6 实现：Map 对象（比普通对象更灵活，支持任意类型键）。
- 应用场景：
- 缓存数据（如 API 响应缓存）。
- 实现字典或频率统计（如字符出现次数）。
- 组件间共享状态（如全局状态管理）。
9. 图（Graph）
- 用途：表示复杂关系网络，节点和边的集合。
- 前端实现：通过对象或 Map 存储邻接表/邻接矩阵。
- 应用场景：
- 社交网络关系可视化。
- 依赖关系分析（如 Webpack 模块依赖图）。
- 路径规划（如地图应用的最短路径）。
10. 堆（Heap）
- 用途：优先队列，快速获取最大值或最小值。
- 前端实现：数组模拟（通过索引操作）。
- 应用场景：
- 任务调度（如高优先级任务优先执行）。
- 实现 Top K 问题（如统计高频关键词）。
11. 不可变数据结构（Immutable.js）
- 用途：通过持久化数据结构优化状态管理性能。
- 库支持：Immutable.js、Immer。
- 应用场景：
- Redux 状态管理（避免直接修改状态）。
- 复杂对象的深拷贝优化。
- 提升 React 渲染性能（通过浅比较判断变化）。
12. ES6+ 新增结构
- WeakMap/WeakSet：弱引用存储，避免内存泄漏（如缓存 DOM 节点）。
- TypedArray：处理二进制数据（如 WebGL、Web Audio API）。
- ArrayBuffer：操作原始二进制数据。
总结
前端开发者需要根据场景选择合适的数据结构：
- 简单数据：数组、对象、Set、Map。
- 复杂交互：栈、队列、链表。
- 性能优化：树、堆、不可变数据结构。
- 框架底层：React Fiber（链表）、虚拟 DOM（树）、状态管理（哈希表）。
掌握这些数据结构有助于编写高效、可维护的前端代码，尤其在处理复杂状态、性能优化和算法场景时。