指南
数据结构
本文介绍了前端开发中常见的数据结构，配合 JavaScript 代码示例，帮助初学者理解数组、链表、栈、队列、哈希表、树和图的基本概念及实现。
🎯 引言
掌握常见的数据结构并能用 JavaScript 实现它们，让你写代码时能够更灵活地处理不同场景下的数据存储和操作问题。本文通过简单明了的示例，带你认识线性结构和非线性结构，逐步提升前端开发基础能力。
✨ 线性结构
🧩 数组（Array）
数组是最简单的线性结构，存储一系列数据，可以通过索引快速访问。
const arr = [10, 20, 30, 40, 50];
console.log(arr[2]); // 30
// 添加元素
arr.push(60);
console.log(arr); // [10, 20, 30, 40, 50, 60]
// 删除元素
arr.splice(1, 2); // 从索引1开始删除2个元素
console.log(arr); // [10, 40, 50, 60]
🔗 链表（Linked List）
链表由节点组成，每个节点包含数据 value 和指向下一个节点 next 的指针。这里用原生对象和普通变量来模拟链表结构。
const node3 = { value: 3, next: null };
const node2 = { value: 2, next: node3 };
const node1 = { value: 1, next: node2 };
console.log(node1);
// 输出：{ value: 1, next: { value: 2, next: { value: 3, next: null } } }
📚 栈（Stack）
栈是后进先出结构，只在栈顶操作。用数组模拟即可。
const stack = [];
// 入栈（push）
stack.push(1);
stack.push(2);
stack.push(3);
console.log(stack); // [1, 2, 3]
// 出栈（pop）
const top = stack.pop();
console.log(top); // 3
console.log(stack); // [1, 2]
🚶 队列（Queue）
队列是先进先出结构，从队尾插入，从队头删除，也用数组模拟。
const queue = [];
// 入队（enqueue）
queue.push(1);
queue.push(2);
queue.push(3);
console.log(queue); // [1, 2, 3]
// 出队（dequeue）
const front = queue.shift();
console.log(front); // 1
console.log(queue); // [2, 3]
🌳 非线性结构
🗝️ 哈希表（Hash Table）
哈希表是根据键快速访问值的结构，此处用 ES6 的 Map 来模拟实现。
const hashTable = new Map();
// 插入
hashTable.set('apple', '红色');
hashTable.set('banana', '黄色');
// 访问
console.log(hashTable.get('apple')); // 红色
// 删除
hashTable.delete('banana');
// 判断是否存在
console.log(hashTable.has('banana')); // false
🌲 树（Tree）
树由节点组成，每个节点可以有多个子节点。用对象和数组模拟树节点。
const root = {
value: '根节点',
children: [],
};
const child1 = { value: '子节点1', children: [] };
const child2 = { value: '子节点2', children: [] };
root.children.push(child1);
root.children.push(child2);
console.log(root);
🧾 小节总结
- 线性结构（数组、链表、栈、队列）适合顺序存储和操作，易理解且应用广泛。
- 非线性结构（哈希表、树）适合处理复杂关系，满足更多实际需求。
- JavaScript 提供了灵活的方式实现这些数据结构，理解它们有利于优化程序性能。
❓ 知识问答（Q&A）
Q：数组和链表有什么区别？
A：数组元素连续存储，访问快但插入删除慢；链表元素不连续，插入删除方便但访问慢。
Q：栈和队列的区别是什么？
A：栈是后进先出，队列是先进先出。
🎉 恭喜你已经掌握数组、链表、栈、队列、哈希表、树和图的基础知识和 JavaScript 实现技能啦！继续练习，成为前端高手！