js(JavaScript)数据结构之堆（Heap）

什么是数据结构？

下面是维基百科的解释：

数据结构是计算机存储、组织数据的方式。数据结构意味着接口或封装：一个数据结构可被视为两个函数之间的接口，或者是由数据类型联合组成的存储内容的访问方法封装。

我们每天的编码中都会用到数据结构，下面是常见的数据结构：

数组（Array）
栈（Stack）
队列（Queue）
链表（Linked List）
散列表（Hash）
字典
树（Tree）
图（Graph）
堆（Heap）

堆（Heap）

JavaScript中的堆（Heap）是一块用于存储动态分配内存的区域。在这个堆里，我们可以存储复杂的数据结构，比如对象和数组。不同于栈（Stack），堆的大小不是固定的，而是可以根据需要动态扩展。

想象一下堆就像是一个大仓库，你可以往里面存放各种东西。每当你需要创建一个新的对象或数组时，JavaScript会在这个仓库里动态分配一块空间，然后把对象或数组放进去。这些存储在堆中的数据可以在程序的不同部分被引用和使用。

堆的灵活性使得我们能够处理复杂的数据，并能够动态地创建、修改和删除对象。就像购物时在超市的购物车中添加或移除物品一样，堆允许我们在程序中灵活地管理和使用数据。

堆的案例参考效果

当谈到JavaScript中的堆（Heap）时，通常指的是动态内存分配和存储对象的区域。虽然在JavaScript中不能直接访问和控制堆，但我们可以通过创建对象来演示堆的概念和动态分配特性。

下面是一个案例，它展示了使用HTML和JavaScript创建一个学生信息管理系统。在这个案例中，我们可以动态地添加和删除学生，并将它们的信息显示在页面上。

HTML\JS效果

请添加图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>学生管理系统</title>
  <style>
    label {
      display: block;
      margin-bottom: 5px;
    }

    input[type="text"] {
      margin-bottom: 10px;
    }

    ul {
      list-style-type: none;
      padding: 0;
    }

    li {
      margin-bottom: 5px;
    }
  </style>
</head>

<body>
  <h2>学生管理系统</h2>
  <h3>添加学生</h3>
  <label for="name">姓名:</label>
  <input type="text" id="name">
  <label for="age">年龄:</label>
  <input type="text" id="age">
  <button onclick="addStudent()">添加学生</button>

  <h3>学生列表</h3>
  <ul id="studentList"></ul>

  <script>
    const students = [];

    function addStudent() {
      const nameInput = document.getElementById('name');
      const ageInput = document.getElementById('age');

      const name = nameInput.value;
      const age = ageInput.value;

      if (name && age) {
        const student = { name, age };
        students.push(student);

        nameInput.value = '';
        ageInput.value = '';

        displayStudents();
      }
    }

    function deleteStudent(index) {
      students.splice(index, 1);
      displayStudents();
    }

    function displayStudents() {
      const studentList = document.getElementById('studentList');
      studentList.innerHTML = '';

      students.forEach((student, index) => {
        const listItem = document.createElement('li');
        listItem.textContent = `${student.name} (年龄: ${student.age})`;

        const deleteButton = document.createElement('button');
        deleteButton.textContent = '删除';
        deleteButton.onclick = () => deleteStudent(index);

        listItem.appendChild(deleteButton);
        studentList.appendChild(listItem);
      });
    }
  </script>
</body>

</html>

案例代码思路和描述

这个案例是一个基本的学生信息管理系统，用户可以通过输入学生的姓名和年龄来添加学生，并以列表的形式显示学生的信息。每个学生条目都包含一个 "删除" 按钮，可以点击该按钮来删除对应的学生。

在HTML中，我们有一个用于输入学生姓名和年龄的表单，以及一个"添加学生" 按钮来添加学生。还有一个用于显示学生列表的无序列表。
当用户点击"添加学生" 按钮时，addStudent函数会被调用。
addStudent函数首先获取输入框中的姓名和年龄。
如果姓名和年龄都存在，它会创建一个表示学生的对象，并将其添加到students数组中。
然后，它清空输入框中的姓名和年龄，并调用displayStudents函数来重新显示学生列表。
deleteStudent函数用于删除学生。当用户点击某个学生后面的 "删除" 按钮时，该学生将从students数组中删除，并调用displayStudents函数刷新列表。
displayStudents函数用于在页面上显示学生列表。它首先清空现有的列表项，然后遍历students数组，并为每个学生创建一个列表项和对应的 "删除" 按钮。最后，它将这些元素添加到无序列表中。