js(JavaScript)数据结构之字典

news2024/11/17 19:46:44

什么是数据结构？

下面是维基百科的解释：

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

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

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

字典

字典是一种存储键-值对数据的数据结构，可以通过唯一的键来访问对应的值。这种数据结构可以在不需要使用数组的情况下，快速地查找、插入和删除数据。

在 JavaScript 中，对象就是一种字典类型的数据结构，通过给对象设置属性(key)和属性值(value)，就可以实现字典的功能。可以使用字典类来封装这种实现字典功能的对象，以便更方便地使用和管理。例如，可以使用字典类来存储一组学生的姓名和成绩信息，通过学生的姓名来查找对应的成绩。

以下是一个使用字典类存储学生信息的案例 HTML/JS 效果，其中使用了一个自己实现的字典类，并使用了一些基本的字典操作：
请添加图片描述

HTML代码：

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JavaScript字典示例-学习信息</title>
</head>
<body>
  <input type="text" placeholder="输入名字" id="nameInput">
  <input type="text" placeholder="输入成绩" id="scoreInput">
  <button onclick="addStudent()">添加学生</button>
  <br><br>
  <input type="text" placeholder="输入要搜索的名字" id="searchInput">
  <button onclick="searchStudent()">搜索学生</button>
  <br><br>
  <label for="result">结果: </label>
  <span id="result"></span>

  <script src="dictionary.js"></script>
</body>
</html>

JavaScript 代码：

// 自定义字典类
function Dictionary() {
  this.dataStore = {};
  this.add = function (key, value) {
    this.dataStore[key] = value;
  };
  this.find = function (key) {
    return this.dataStore[key];
  };
  this.remove = function (key) {
    delete this.dataStore[key];
  };
}

// 创建一个字典实例用于存储学生信息
var studentDict = new Dictionary();

// 根据输入添加学生信息
function addStudent() {
  var name = document.getElementById("nameInput").value;
  var score = document.getElementById("scoreInput").value;
  studentDict.add(name, score);
  console.log(studentDict.dataStore);
}

// 根据输入查找学生的成绩
function searchStudent() {
  var name = document.getElementById("searchInput").value;
  var score = studentDict.find(name);
  if (score !== undefined) {
    document.getElementById("result").textContent = score;
  } else {
    document.getElementById("result").textContent = "没有找到相关数据";
  }
}