js(JavaScript)数据结构之字典

什么是数据结构？

下面是维基百科的解释：

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

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

数组（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 = "没有找到相关数据";}
}