常见的JavaScript数据结构介绍

2025/3/7
本文详细介绍了JavaScript中常见的数据结构,包括数组、对象、集合、映射、栈、队列、链表、树、图和堆,通过示例展示其特点和使用方式,有助于根据场景选择合适结构优化性能与代码可读性。
JavaScript数组示例示意图片

在JavaScript中,数据结构是组织和存储数据的方式,以便有效地访问和修改数据。以下是一些常见的JavaScript数据结构:

  1. 数组(Array)

    • 数组是一种有序的集合,可以存储多个值。数组中的每个值称为元素,可以通过索引访问。
    • 示例:
      let fruits = ['Apple', 'Banana', 'Cherry'];
      console.log(fruits[0]); // 输出: Apple
      
  2. 对象(Object)

    • 对象是无序的键值对集合。键是字符串或符号,值可以是任何数据类型。
    • 示例:
      let person = {
          name: 'John',
          age: 30,
          isStudent: false
      };
      console.log(person.name); // 输出: John
      
  3. 集合(Set)

    • 集合是一种无序且唯一的数据结构,不允许重复值。
    • 示例:
      let uniqueNumbers = new Set([1, 2, 3, 4, 4, 5]);
      console.log(uniqueNumbers); // 输出: Set { 1, 2, 3, 4, 5 }
      
  4. 映射(Map)

    • 映射是一种键值对的集合,键可以是任何数据类型。
    • 示例:
      let map = new Map();
      map.set('name', 'Alice');
      map.set(1, 'number one');
      console.log(map.get('name')); // 输出: Alice
      
  5. 栈(Stack)

    • 栈是一种后进先出(LIFO)的数据结构。最后添加的元素最先被移除。
    • 示例:
      let stack = [];
      stack.push(1);
      stack.push(2);
      console.log(stack.pop()); // 输出: 2
      
  6. 队列(Queue)

    • 队列是一种先进先出(FIFO)的数据结构。最先添加的元素最先被移除。
    • 示例:
      let queue = [];
      queue.push(1);
      queue.push(2);
      console.log(queue.shift()); // 输出: 1
      
  7. 链表(Linked List)

    • 链表是一种线性数据结构,每个元素都是一个节点,节点包含数据和指向下一个节点的指针。
    • 示例:
      class Node {
          constructor(data) {
              this.data = data;
              this.next = null;
          }
      }
      
      let head = new Node(1);
      head.next = new Node(2);
      console.log(head.data); // 输出: 1
      console.log(head.next.data); // 输出: 2
      
  8. 树(Tree)

    • 树是一种分层的数据结构,由节点组成,每个节点有一个父节点和零个或多个子节点。
    • 示例:
      class TreeNode {
          constructor(data) {
              this.data = data;
              this.children = [];
          }
      }
      
      let root = new TreeNode(1);
      root.children.push(new TreeNode(2));
      root.children.push(new TreeNode(3));
      console.log(root.data); // 输出: 1
      console.log(root.children[0].data); // 输出: 2
      
  9. 图(Graph)

    • 图是一种由节点(顶点)和边组成的非线性数据结构。图可以是有向的或无向的。
    • 示例:
      class Graph {
          constructor() {
              this.nodes = new Map();
          }
      
          addNode(node) {
              this.nodes.set(node, []);
          }
      
          addEdge(node1, node2) {
              this.nodes.get(node1).push(node2);
              this.nodes.get(node2).push(node1);
          }
      }
      
      let graph = new Graph();
      graph.addNode('A');
      graph.addNode('B');
      graph.addEdge('A', 'B');
      console.log(graph.nodes.get('A')); // 输出: ['B']
      
  10. 堆(Heap)

    • 堆是一种特殊的树形数据结构,通常用于实现优先队列。堆可以是最大堆或最小堆。
    • 示例:
      class MinHeap {
          constructor() {
              this.heap = [];
          }
      
          insert(value) {
              this.heap.push(value);
              this.bubbleUp();
          }
      
          bubbleUp() {
              let index = this.heap.length - 1;
              while (index > 0) {
                  let element = this.heap[index];
                  let parentIndex = Math.floor((index - 1) / 2);
                  let parent = this.heap[parentIndex];
                  if (parent <= element) break;
                  this.heap[index] = parent;
                  this.heap[parentIndex] = element;
                  index = parentIndex;
              }
          }
      }
      
      let heap = new MinHeap();
      heap.insert(3);
      heap.insert(1);
      heap.insert(2);
      console.log(heap.heap); // 输出: [1, 3, 2]
      

这些数据结构在JavaScript中非常有用,可以根据具体的应用场景选择合适的数据结构来优化性能和代码的可读性。

标签:JavaScript
上次更新:

相关文章

npx完全指南:前端开发必备工具详解 | 20年架构师深度解析

本文由20年前端架构师深入解析npx工具,涵盖其核心功能、优势、高级用法、最佳实践及与npm/yarn的区别比较,帮助开发者掌握这一现代前端开发利器。

·前端开发

<处理关联数据的最佳实践:Article 与 Tags 的关系 | 开发指南>

<本文详细介绍了在开发中处理关联数据(如 Article 和 Tags 的多对多关系)的最佳实践,包括拆分业务逻辑、使用事务保证数据一致性、合理设计关联表结构、批量操作、幂等性和乐观锁等关键要点,并提供了基于 mysql2 和 Sequelize 的代码示例。>

·后端开发

Astro 静态站点生成器:构建高性能网站的最佳选择

Astro 是一个专注于构建快速、轻量级网站的静态站点生成器,支持多种前端框架,采用岛屿架构减少 JavaScript 加载,提升性能。

·前端开发

MySQL外键约束详解:维护数据一致性与完整性

本文详细介绍了MySQL中的外键约束(Foreign Key Constraint),包括其基本概念、创建方法、作用、级联操作、限制、修改与删除方法、查看方式以及最佳实践。通过合理使用外键约束,可以有效管理数据库中的数据关系,确保数据的准确性和可靠性。

·后端开发

MySQL JSON数据类型支持与使用指南 | 详细解析与示例

本文详细解析了MySQL从5.7版本开始支持的JSON数据类型,包括版本支持、创建JSON字段、插入与查询JSON数据、修改JSON数据、生成JSON、索引优化、性能与应用场景、注意事项及示例全流程。

·后端开发

SQL JOIN、LEFT JOIN 和 RIGHT JOIN 的区别与应用场景详解

本文详细介绍了 SQL 中 JOIN、LEFT JOIN 和 RIGHT JOIN 的区别,包括它们的作用、语法、示例以及实际应用场景,帮助读者更好地理解和使用这些连接方式。

·后端开发

Weex 跨平台移动开发框架:核心特性与使用指南

Weex 是由阿里巴巴开源的跨平台移动开发框架,支持使用 Vue.js 或 Rax 构建高性能的 iOS、Android 和 Web 应用。本文详细解析了 Weex 的核心特性、架构、工作流程、组件和模块、开发工具、优缺点、应用场景及未来发展。

·前端开发

ECharts 与 DataV 数据可视化工具对比分析 | 选择指南

本文详细对比了 ECharts 和 DataV 两个常用的数据可视化工具,包括它们的设计目标、优缺点、使用场景和技术栈,帮助读者根据具体需求选择合适的工具。

·前端开发

前端部署后通知用户刷新页面的常见方案 | 单页应用更新提示

本文介绍了在前端部署后通知用户刷新页面的几种常见方案,包括WebSocket实时通知、轮询检查版本、Service Worker版本控制、版本号对比、自动刷新、使用框架内置功能以及第三方库。每种方案的优缺点和示例代码均有详细说明。

·前端开发

file-saver:前端文件下载的 JavaScript 库使用指南

file-saver 是一个用于在浏览器端保存文件的 JavaScript 库,支持生成和下载多种文件格式,如文本、JSON、CSV、图片、PDF 等。本文详细介绍其安装、基本用法、兼容性及与其他工具(如 jszip)的结合使用。

·前端开发