js(JavaScript)数据结构之树(Tree)

2024-01-14 08:36

本文主要是介绍js(JavaScript)数据结构之树(Tree),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

什么是数据结构?

下面是维基百科的解释:

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

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

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

树(Tree)

树(Tree)是一种常见的数据结构,由节点(Node)和边(Edge)组成。树的节点通过边连接,形成层次结构。树的一个节点可以有多个子节点,但只有一个父节点(除了根节点)。树的一个重要特点是没有环,即任意两个节点之间都有唯一的路径。

在树结构中,有一种特殊的树叫做二叉树。二叉树中,每个节点最多有两个子节点,一个是左节点,一个是右节点。这种设计的好处是我们可以通过限制每个节点的子节点个数为2,编写出高效的程序来进行插入、查找和删除数据操作。

二叉查找树(BST)是二叉树的一种,它有一个很聪明的性质:相对较小的值保存在左节点中,而较大的值保存在右节点中。这个性质使得在BST中进行查找操作非常高效,因为我们可以根据数值的大小迅速确定搜索方向。

举个例子,想象一个BST表示数字。根节点是一个中等大小的数字,比如50。如果我们要找的数字是30,由于30比50小,我们知道它应该在左节点。然后,如果我们要找的是60,因为60比50大,我们知道它应该在右节点。这样,我们可以在树中快速定位目标。

BST不仅适用于数值,还可以用于存储其他类型的数据,比如单词和字符串。这种树结构在计算机科学中被广泛应用,为数据的快速检索和操作提供了便利。

以下是一个使用 JavaScript 实现树的案例,演示了如何创建一个树、添加节点、遍历节点以及查找节点的功能:

HTML 代码:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>JavaScript实现树的案例</title>
</head><body><button onclick="addRoot()">添加根节点</button><button onclick="addChild()">添加子节点</button><button onclick="traversePreorder()">先序遍历树</button><button onclick="traverseInorder()">中序遍历树</button><button onclick="traversePostorder()">后序遍历树</button><br><br><label for="findInput">查找节点: </label><input type="text" id="findInput" placeholder="请输入"><button onclick="findNode()">查找节点</button><br><br><label for="result">结果: </label><span id="result"></span><script src="tree.js"></script>
</body></html>

JavaScript 代码:

// 定义树节点类
function TreeNode(value) {this.value = value;this.children = []; // 子节点数组
}// 定义树类
function Tree() {this.root = null; // 树的根节点// 添加根节点this.addRoot = function (value) {this.root = new TreeNode(value);};// 添加子节点this.addChild = function (parent, value) {var newNode = new TreeNode(value);parent.children.push(newNode);};// 先序遍历this.traversePreorder = function (node) {if (!node) return;console.log(node.value);for (var i = 0; i < node.children.length; i++) {this.traversePreorder(node.children[i]);}};// 中序遍历this.traverseInorder = function (node) {if (!node) return;for (var i = 0; i < node.children.length; i++) {this.traverseInorder(node.children[i]);}console.log(node.value);};// 后序遍历this.traversePostorder = function (node) {if (!node) return;for (var i = 0; i < node.children.length; i++) {this.traversePostorder(node.children[i]);}console.log(node.value);};// 查找节点this.findNode = function (node, value) {if (!node) return null;if (node.value === value) return node;for (var i = 0; i < node.children.length; i++) {var foundNode = this.findNode(node.children[i], value);if (foundNode) return foundNode;}return null;};
}// 创建一个树实例
var tree = new Tree();// 添加根节点
function addRoot() {var value = prompt("输入父值");tree.addRoot(value);console.log(tree.root);
}// 添加子节点
function addChild() {var parentValue = prompt("输入父值");var parent = tree.findNode(tree.root, parentValue);if (parent) {var value = prompt("输入子值");tree.addChild(parent, value);console.log(tree.root);} else {alert("找不到父节点");}
}// 先序遍历树
function traversePreorder() {if (tree.root) {tree.traversePreorder(tree.root);} else {console.log("树是空的");}
}// 中序遍历树
function traverseInorder() {if (tree.root) {tree.traverseInorder(tree.root);} else {console.log("树是空的");}
}// 后序遍历树
function traversePostorder() {if (tree.root) {tree.traversePostorder(tree.root);} else {console.log("树是空的");}
}// 查找节点
function findNode() {var value = document.getElementById("findInput").value;var foundNode = tree.findNode(tree.root, value);var resultSpan = document.getElementById("result");if (foundNode) {resultSpan.textContent = "找到节点: " + foundNode.value;} else {resultSpan.textContent = "未找到节点";}
}

这段代码是一个简单的实现树(Tree)数据结构的案例,通过 HTML 和 JavaScript 实现了创建树、添加节点、遍历节点以及查找节点的功能。下面是对代码的详细说明:

  1. HTML 结构:

    • 包含了几个按钮,分别用于添加根节点、添加子节点、先序遍历、中序遍历、后序遍历以及查找节点的操作。
    • 有一个输入框用于输入查找节点的值。
    • 一个用于显示查找结果的 <span> 元素。
  2. JavaScript 部分:

    • 树节点类 TreeNode 用于表示树中的节点,每个节点有一个值和一个子节点数组。

    • 树类 Tree 包含了以下功能:

      • addRoot(value): 添加根节点的方法。
      • addChild(parent, value): 添加子节点的方法。
      • traversePreorder(node): 先序遍历树的方法。
      • traverseInorder(node): 中序遍历树的方法。
      • traversePostorder(node): 后序遍历树的方法。
      • findNode(node, value): 查找节点的方法。
    • 树实例 tree 在代码最底部创建了一个树的实例。

    • 按钮点击事件处理函数:

      • addRoot(): 弹出对话框输入根节点的值,然后调用 addRoot 方法添加根节点。
      • addChild(): 弹出对话框输入父节点的值,查找该节点并弹出对话框输入子节点的值,然后调用 addChild 方法添加子节点。
      • traversePreorder(), traverseInorder(), traversePostorder(): 分别执行先序、中序、后序遍历。
      • findNode(): 从输入框获取查找值,调用 findNode 方法查找节点,并在页面上显示查找结果。
  3. 关键思路:

    • 树节点类和树类的设计使得可以轻松地表示树结构,并通过树类的方法实现了对树的基本操作。
    • 使用递归实现了树的遍历,包括先序、中序、后序遍历。
    • 查找节点的功能也是通过递归实现,遍历树的每个节点,当找到匹配值时返回节点。

总体来说,这段代码提供了一个简单的树结构操作界面,用户可以通过按钮执行不同的操作,包括添加节点、遍历节点和查找节点。

持续学习总结记录中,回顾一下上面的内容:
树(Tree)是一种常见的数据结构,由节点(Node)和边(Edge)组成。树的节点通过边连接,形成层次结构。树的一个节点可以有多个子节点,但只有一个父节点(除了根节点)。树的一个重要特点是没有环,即任意两个节点之间都有唯一的路径。

这篇关于js(JavaScript)数据结构之树(Tree)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/604547

相关文章

Java堆转储文件之1.6G大文件处理完整指南

《Java堆转储文件之1.6G大文件处理完整指南》堆转储文件是优化、分析内存消耗的重要工具,:本文主要介绍Java堆转储文件之1.6G大文件处理的相关资料,文中通过代码介绍的非常详细,需要的朋友可... 目录前言文件为什么这么大?如何处理这个文件?分析文件内容(推荐)删除文件(如果不需要)查看错误来源如何避

SpringBoot整合Dubbo+ZK注册失败的坑及解决

《SpringBoot整合Dubbo+ZK注册失败的坑及解决》使用Dubbo框架时,需在公共pom添加依赖,启动类加@EnableDubbo,实现类用@DubboService替代@Service,配... 目录1.先看下公共的pom(maven创建的pom工程)2.启动类上加@EnableDubbo3.实

SpringBoot整合(ES)ElasticSearch7.8实践

《SpringBoot整合(ES)ElasticSearch7.8实践》本文详细介绍了SpringBoot整合ElasticSearch7.8的教程,涵盖依赖添加、客户端初始化、索引创建与获取、批量插... 目录SpringBoot整合ElasticSearch7.8添加依赖初始化创建SpringBoot项

JAVA覆盖和重写的区别及说明

《JAVA覆盖和重写的区别及说明》非静态方法的覆盖即重写,具有多态性;静态方法无法被覆盖,但可被重写(仅通过类名调用),二者区别在于绑定时机与引用类型关联性... 目录Java覆盖和重写的区别经常听到两种话认真读完上面两份代码JAVA覆盖和重写的区别经常听到两种话1.覆盖=重写。2.静态方法可andro

SpringBoot中六种批量更新Mysql的方式效率对比分析

《SpringBoot中六种批量更新Mysql的方式效率对比分析》文章比较了MySQL大数据量批量更新的多种方法,指出REPLACEINTO和ONDUPLICATEKEY效率最高但存在数据风险,MyB... 目录效率比较测试结构数据库初始化测试数据批量修改方案第一种 for第二种 case when第三种

Java docx4j高效处理Word文档的实战指南

《Javadocx4j高效处理Word文档的实战指南》对于需要在Java应用程序中生成、修改或处理Word文档的开发者来说,docx4j是一个强大而专业的选择,下面我们就来看看docx4j的具体使用... 目录引言一、环境准备与基础配置1.1 Maven依赖配置1.2 初始化测试类二、增强版文档操作示例2.

一文详解如何使用Java获取PDF页面信息

《一文详解如何使用Java获取PDF页面信息》了解PDF页面属性是我们在处理文档、内容提取、打印设置或页面重组等任务时不可或缺的一环,下面我们就来看看如何使用Java语言获取这些信息吧... 目录引言一、安装和引入PDF处理库引入依赖二、获取 PDF 页数三、获取页面尺寸(宽高)四、获取页面旋转角度五、判断

Spring Boot中的路径变量示例详解

《SpringBoot中的路径变量示例详解》SpringBoot中PathVariable通过@PathVariable注解实现URL参数与方法参数绑定,支持多参数接收、类型转换、可选参数、默认值及... 目录一. 基本用法与参数映射1.路径定义2.参数绑定&nhttp://www.chinasem.cnbs

JAVA中安装多个JDK的方法

《JAVA中安装多个JDK的方法》文章介绍了在Windows系统上安装多个JDK版本的方法,包括下载、安装路径修改、环境变量配置(JAVA_HOME和Path),并说明如何通过调整JAVA_HOME在... 首先去oracle官网下载好两个版本不同的jdk(需要登录Oracle账号,没有可以免费注册)下载完

Spring StateMachine实现状态机使用示例详解

《SpringStateMachine实现状态机使用示例详解》本文介绍SpringStateMachine实现状态机的步骤,包括依赖导入、枚举定义、状态转移规则配置、上下文管理及服务调用示例,重点解... 目录什么是状态机使用示例什么是状态机状态机是计算机科学中的​​核心建模工具​​,用于描述对象在其生命