常见数据结构

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（树）、状态管理（哈希表）。

掌握这些数据结构有助于编写高效、可维护的前端代码，尤其在处理复杂状态、性能优化和算法场景时。