游乐游手机版
首页/系统平台/文章详情

前端JavaScript二叉树算法实现与应用详解

时间:2026-08-21 16:37
圣诞快乐接下来,咱们一起深入探讨一下js数据结构中的树。其实呀,这里的树和现实生活中的树很相似,都有树干、树枝。而在程序里,树可是一种非常重要的数据结构哦,对于存储那些需要快速查找的数据来说,它简直太有用啦!它是一种分层数据的抽象模型。一个树结构包含了一系列具有父子关系的节点。每个节点都有一个父节点


圣

诞

快

乐

接下来,咱们一起深入探讨一下js数据结构中的树。其实呀,这里的树和现实生活中的树很相似,都有树干、树枝。而在程序里,树可是一种非常重要的数据结构哦,对于存储那些需要快速查找的数据来说,它简直太有用啦!它是一种分层数据的抽象模型。一个树结构包含了一系列具有父子关系的节点。每个节点都有一个父节点,同时还可能有零个或者多个子节点。就像下面这样的一个树结构:)

和树相关的概念:1.子树:由节点和他的后代构成,如上图标示处。2.深度:节点的深度取决于它祖节点的数量,比如节点5有2个祖节点,他的深度为2。3.高度:树的高度取决于所有节点深度的最大值。

二叉树和二叉搜索树介绍

二叉树中的节点最多只能有2个子节点,一个是左侧子节点,一个是右侧子节点,这样定义的好处是有利于我们写出更高效的插入,查找,删除节点的算法。二叉搜索树是二叉树的一种,但是它只允许你在左侧子节点存储比父节点小的值,但在右侧节点存储比父节点大的值。接下来我们将按照这个思路去实现一个二叉搜索树。

1. 创建BinarySearchTree类

这里我们将使用构造函数去创建一个类:
function BinarySearchTree(){
// 用于创建节点的类
let Node = function(key) {
this.key = key;
this.left = null;
this.right = null;
}
// 根节点
let root = null;
}

我们将使用和链表类似的指针方式去表示节点之间的关系,如果不了解链表,请看我后序的文章《如何实现单向链表和双向链表》。

2.插入一个键

// 插入一个键
this.insert = function(key) {
let newNode = new Node(key);
root === null ? (root = newNode) : (insertNode(root, newNode))
}

向树中插入一个新的节点主要有以下三部分:1.创建新节点的Node类实例 --> 2.判断插入操作是否为根节点,是根节点就将其指向根节点 --> 3.将节点加入非根节点的其他位置。

insertNode的具体实现如下:

function insertNode(node, newNode){
if(newNode.key < node.key) {
node.left === null ? (node.left = newNode) : (insertNode(node.left, newNode))
}else {
node.right === null ? (node.right = newNode) : (insertNode(node.right, newNode))
}
}

这里我们用到递归,接下来要实现的search,del等都会大量使用递归,所以说不了解的可以先自行学习了解。我们创建一个二叉树实例,来插入一个键:

let tree = new BinarySearchTree();
tree.insert(20);
tree.insert(21);
tree.insert(520);
tree.insert(521);
插入的结构会按照二叉搜索树的规则去插入,结构类似于上文的第一个树图。

树的遍历

访问树的所有节点有三种遍历方式:中序,先序和后序。
  • 中序遍历:以从最小到最大的顺序访问所有节点
  • 先序遍历:以优先于后代节点的顺序访问每个节点
  • 后序遍历:先访问节点的后代节点再访问节点本身
根据以上的介绍,我们可以有以下的实现代码。
  1. 中序排序
this.inOrderTra verse = function(cb){
inOrderTra verseNode(root, cb);
}

// 辅助函数
function inOrderTra verseNode(node, cb){
if(node !== null){
inOrderTra verseNode(node.left, cb);
cb(node.key);
inOrderTra verseNode(node.right, cb);
}
}
使用中序遍历可以实现对树进行从小到大排序的功能。
  1. 先序排序
// 先序排序 --- 优先于后代节点的顺序访问每个节点
this.preOrderTra verse = function(cb) {
preOrderTra verseNode(root, cb);
}

// 先序排序辅助方法
function preOrderTra verseNode(node, cb) {
if(node !== null) {
cb(node.key);
preOrderTra verseNode(node.left, cb);
preOrderTra verseNode(node.right, cb);
}
}
使用先序排序可以实现结构化输出的功能。
  1. 后序排序
// 后续遍历 --- 先访问后代节点,再访问节点本身
this.postOrderTra verse = function(cb) {
postOrderTra verseNode(root, cb);
}

// 后续遍历辅助方法
function postOrderTra verseNode(node, cb) {
if(node !== null){
postOrderTra verseNode(node.left, cb);
postOrderTra verseNode(node.right, cb);
cb(node.key);
}
}
后序遍历可以用于计算有层级关系的所有元素的大小。

搜索树中的值

在树中有三种经常执行的搜索类型:最大值,最小值,特定的值。
  1. 最小值
最小值通过定义可以知道即是左侧树的最底端的节点,具体实现代码如下:
// 最小值
this.min = function(){
return minNode(root)
}

function minNode(node) {
if(node) {
while(node && node.left !== null){
node = node.left;
}
return node.key
}
return null
}
相似的,实现最大值的方法如下:
// 最大值
this.max = function() {
return maxNode(root)
}

function maxNode(node) {
if(node){
while(node && node.right !== null){
node = node.right;
}
return node.key
}
return null
}
2.搜索一个特定的值
// 搜索树中某个值
this.search = function(key) {
return searchNode(root, key)
}

// 搜索辅助方法
function searchNode(node, key){
if(node === null) {
return false
}
if(key < node.key) {
return searchNode(node.left, key)
} else if(key > node.key) {
return searchNode(node.right, key)
}else {
return true
}
}
  1. 移除一个节点
this.remove = function(key){
root = removeNode(root, key);
}

// 发现最小节点
function findMinNode(node) {
if(node) {
while(node && node.left !== null){
node = node.left;
}
return node
}
return null
}

// 移除节点辅助方法
function removeNode(node, key) {
if(node === null) {
return null
}

if(key < node.key){
node.left = removeNode(node.left, key);
return node
} else if( key > node.key){
node.right = removeNode(node.right, key);
return node
} else {
// 一个页节点
if(node.left === null && node.right === null) {
node = null;
return node
}

// 只有一个子节点的节点
if(node.left === null) {
node = node.right;
return node
}else if(node.right === null) {
node = node.left;
return node
}

// 有两个子节点的节点
let aux = findMinNode(node.right);
node.key = aux.key;
node.right = removeNode(node.right, aux.key);
return node
}
}

删除节点需要考虑的情况比较多,这里我们会使用和min类似的实现去写一个发现最小节点的函数,当要删除的节点有两个子节点时,我们要将当前要删除的节点替换为子节点中最大的一个节点的值,然后将这个子节点删除。

至此,一个二叉搜索树已经实现,但是还存在一个问题,如果树的一遍非常深,将会存在一定的性能问题,为了解决这个问题,我们可以利用A VL树,一种自平衡二叉树,也就是说任何一个节点的左右两侧子树的高度之差最多为1。

如果想学习更多js算法和数据结构,可以继续观看哦~

点个在看,你最好看

本文分享自微信公众号 - 趣谈前端(beautifulFront)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。

来源:https://apiv1.oschina.net/oschinapi/blog/detail?id=4822091
上一篇TiDB分库分表方案解析:是否正在取代传统中间件? 下一篇编程之美:从线程池状态管理理解二进制操作原理
本站内容用于信息整理与展示,如有侵权或内容问题请及时联系处理。

相关推荐

补充同频道和同主题内容,方便继续浏览更多相关内容。

同类最新

继续查看同栏目最近更新的文章。

更多
VMware安装Ubuntu完整教程:创建虚拟机与启动验证
系统平台 · 2026-09-01

VMware安装Ubuntu完整教程:创建虚拟机与启动验证

本教程详细演示如何在VMware中创建Ubuntu虚拟机,涵盖ISO挂载、硬件配置、安装向导及启动验证。通过清晰的步骤与验证命令,帮助新手快速搭建可用的Linux学习环境。

Win10专业版U盘安装教程:制作启动盘与完整安装步骤
系统平台 · 2026-09-01

Win10专业版U盘安装教程:制作启动盘与完整安装步骤

本文提供Win10专业版U盘安装完整流程:准备8GB以上U盘与官方镜像,制作启动盘并核对盘符;通过F12 F11 Esc等快捷键或BIOS设置U盘为第一启动项;安装时选择专业版并谨慎分区;完成后在“设置—系统—关于”验证版本与激活状态。操作前务必备份数据。

Windows10系统字体太小怎么调大
系统平台 · 2026-08-27

Windows10系统字体太小怎么调大

Windows10系统字体太小怎么调大?只需两步:首先打开设置中的显示选项,将缩放比例调整为125%或150%;随后运行ClearType文本调谐器优化字体清晰度。此方法适用于高分屏及普通屏幕,无需修改注册表即可解决界面拥挤问题。

Win10磁盘占用100%基础排查:从监控到清理的完整步骤
系统平台 · 2026-08-27

Win10磁盘占用100%基础排查:从监控到清理的完整步骤

Windows 10系统出现磁盘占用100%会导致电脑卡顿、程序响应缓慢。本文提供基础排查方案:首先通过任务管理器确认是否为磁盘高负载,随后进入系统存储页面分析C盘占用类别,最后针对性清理临时文件。遵循此流程可有效缓解磁盘压力,避免盲目重装系统。

Windows10系统怎么显示此电脑和控制面板
系统平台 · 2026-08-27

Windows10系统怎么显示此电脑和控制面板

Windows10默认可能不显示桌面图标,导致找不到“此电脑”和“控制面板”。只需进入个性化设置,在“桌面图标设置”中勾选对应选项即可恢复。本文提供详细图文步骤,帮助快速找回系统入口。