JavaScript 二叉树

已于 2023-02-14 10:15:17 修改
阅读量439 收藏
点赞数 1
分类专栏： 《学习JavaScript数据结构与算法》 JavaScript 文章标签： javascript 算法 开发语言
于 2023-02-13 20:54:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52697994/article/details/128993110
版权

文章目录

前言

同前面说到的散列表结构, 树也是一种非顺序数据结构, 对于存储需要快速查找的数据非常有用.
我会先叙述一下何为树结构, 然后去实现一个基本功能完备的二叉树作为例子.

一、何为 ‘树’

在《学习JavaScript数据结构与算法》第三次修订版本中对树的定义:

树是一种分层的抽象数据模型.

现实生活中比较常见的例子是家谱和公司组织架构图, 这种结构长得很像一棵秃毛的树， 只不过有时候是左右或者上下颠倒:

在这里插入图片描述
这是二叉树, 二叉树只是树结构中的一种, 树结构可以有多个分支.

1.根节点

一个树结构包含 ( 因为里面不只有父子关系所以不能说这是由父子关系构成的) 一系列存在父子关系的节点, 树接地的部分即起始节点为根节点, 除去根节点, 每个节点都有一个父节点以及零个或多个子节点.

2.外&内部节点

至少有一个子节点的节点称为内部节点, 否则为外部节点, 这两个概念和根节点并列, 根节点既非外部节点也非内部节点, 根节点就是根节点.

3.子树

子树指该树结构内部节点构成的树结构, 存在于’树’之中:

在这里插入图片描述

4.深度

一个节点的深度如何取决于其在树中的位置, 越靠近树冠, 深度越大.
具体的深度数值由其具有的祖先节点数量决定, 即’在第几层’的深度, 比如上图树冠节点算上根节点共有3个祖先节点, 那么其深度为3.

5.高度

等于树冠节点的深度, 当然, 是要取最大值的, 树冠的每个位置不一定同样深.

二、二叉树 & 二叉搜索树

其实上面画的图都是二叉树.

二叉树中的节点最多只能有两个子节点, 一个是左侧子节点, 一个是右侧子节点.

二叉搜索树(BinarySearchTree)是二叉树的一种, 它只允许在左侧节点存储比父节点小的值, 在右侧节点存储比父节点大的值.
创建一个类来代表二叉搜索树中的每个节点:

export class Node {
  constructor (key) {
    this.key = key; // 节点值
    this.left = null; // 右侧子节点引用
    this.right = null; // 左侧子节点引用
  }
}

再创建一个二叉搜索树:

import { Compare, defaultCompare } from '../util';
import { Node } from './models/node';

export default class BinarySearchTree {
  constructor (compareFn = defaultCompare) {
    this.compareFn = compareFn; // 用来比较节点值的函数
    this.root = null;
  }
}

export const Compare = {
  LESS_THAN: -1,
  BIGGER_THAN: 1,
  EQUALS: 0
};

export function defaultCompare(a, b) {
  if (a === b) {
    return Compare.EQUALS;
  }
  return a < b ? Compare.LESS_THAN : Compare.BIGGER_THAN;
}

1.二叉搜索树插入值

首先验证特殊情况, 如果需要插入的节点是根节点(现在树上什么都没有), 那么只需要创建一个Node实例并将这个实例赋值到this.root来将root指向这个新的节点, 而如果并非特殊情况则交付正常增添函数处理:

// 前置判定
insert (key) {
  if (this.root == null) {
    this.root = new Node(key);
  } else {
    this.insertNode(this.root, key);
  }
}

insertNode会在递归中运用, 所以里面会有’当前节点’这样的概念.

insertNode (node, key) { // 当前节点(非根节点) & 要插入的节点
  if (this.compareFn(key , node.key) === Compare.LESS_THAN) { // 如果要插入的节点比当前节点小(那么应当加在左子节点)
    if (node.left == null) { // 并且当前节点的左子节点为null, 那么就顺利的将更小的值加到左分支
      node.left = new Node(key);
    } else {
      this.insertNode(node.left, key); 
      // 如果左子节点有值那么需要比较现左子节点值和新值, 更大的留在该位置, 小的排在下一个(不一定是下一个)左子分支
    }
  } else { // 如果要插入的节点比当前节点大(那么应该插入到右子节点)
    if (node.right == null) { // 右子节点没值, 直接加
      node.right = new Node(key);
    } else { // 有值, 比较一下现右子节点值和新值, 更小的留在该位置, 大的排到下一个(不一定是下一个)右子分支
      this.insertNode(node.right, key);
    }
  }
}

建个树试一下:

const Compare = {
  LESS_THAN: -1,
  BIGGER_THAN: 1,
  EQUALS: 0
};

function defaultCompare(a, b) {
  if (a === b) {
    return Compare.EQUALS;
  }
    return a < b ? Compare.LESS_THAN : Compare.BIGGER_THAN;
}

class Node {
  constructor(key) {
    this.key = key;
    this.left = null;
    this.right = null;
  }
}

class BinarySearchTree {
  constructor(compareFn = defaultCompare) {
    this.compareFn = compareFn;
    this.root = null;
  }
  insert(key) {
    if (this.root == null) {
      this.root = new Node(key);
    } else {
      this.insertNode(this.root, key);
    }
  }
  insertNode(node, key) {
    if (this.compareFn(key, node.key) === Compare.LESS_THAN) {
      if (node.left == null) {
        node.left = new Node(key);
      } else {
        this.insertNode(node.left, key);
      }
    } else {
      if (node.right == null) {
        node.right = new Node(key);
      } else {
        this.insertNode(node.right, key);
      }
    }
  }
}

var tree = new BinarySearchTree();
const arr = [11, 7, 15, 5, 3, 9, 8, 10, 13, 12, 14, 20, 18, 25];

for (let i = 0; i < arr.length; i++) {
    tree.insert(arr[i]);
}

console.log(tree);

在这里插入图片描述

2.遍历二叉搜索树

访问二叉树的每一个节点并对其实施操作, 有中序, 先序和后序三种方式.

I.中序遍历

中序遍历以上行顺序访问所有树节点, 即以最小到最大的方式遍历

inOrderTraverse (callback) {
  this.inOrderTraverseNode (this.root, callback);
}

inOrderTraverseNode (node, callback) {
  if (node !== null) { // 基线条件
    this.inOrderTraverseNode (node.left, callback);
    callback(node.key);
    this.inOrderTraverseNode(node.right, callback);
  }
}

printNode (value) {
  console.log(value);
}
tree.inOrderTraverse(printNode);

加到树内:

const Compare = {
  LESS_THAN: -1,
  BIGGER_THAN: 1,
  EQUALS: 0
};

function defaultCompare(a, b) {
  if (a === b) {
    return Compare.EQUALS;
  }
  return a < b ? Compare.LESS_THAN : Compare.BIGGER_THAN;
}

function printNode(value) {
  console.log(value);
}

class Node {
  constructor(key) {
    this.key = key; // 节点值
    this.left = null; // 右侧子节点引用
    this.right = null; // 左侧子节点引用
  }
}

class BinarySearchTree {
  constructor(compareFn = defaultCompare) {
    this.compareFn = compareFn; // 用来比较节点值的函数
    this.root = null;
  }
  
  insert(key) {
    if (this.root == null) {
      this.root = new Node(key);
    } else {
      this.insertNode(this.root, key);
    }
  }
  
  insertNode(node, key) {
    if (this.compareFn(key, node.key) === Compare.LESS_THAN) {
      if (node.left == null) {
        node.left = new Node(key);
      } else {
        this.insertNode(node.left, key);
      }
    } else {
      if (node.right == null) {
        node.right = new Node(key);
      } else {
      this.insertNode(node.right, key);
      }
    }
  }
  
  inOrderTraverse(callback) {
    this.inOrderTraverseNode(this.root, callback);
  }

  inOrderTraverseNode(node, callback) {
    if (node !== null) { // 基线条件
      this.inOrderTraverseNode(node.left, callback);
      callback(node.key);
      this.inOrderTraverseNode(node.right, callback);
    }
  }
}

var tree = new BinarySearchTree();
const arr = [11, 7, 15, 5, 3, 9, 8, 10];

for (let i = 0; i < arr.length; i++) {
  tree.insert(arr[i]);
}

tree.inOrderTraverse(printNode);
console.log(tree);

在这里插入图片描述

如果当前节点存在右分支(右分支不存在会被阻止), 那么执行完左分支再执行右分支.
到了右分支如果发现了左分支也会再优先执行左分支.

在这里插入图片描述
放在此处, 从11开始, 检查到7和15两个子分支, 先检查7的左分支5再检查5的左分支3, 全部检查完堆好了执行栈开始执行, 5结束后7的左支完成开始执行7的右支, 7的右支9上有左支8于是先输出8.
输出了10之后整个7分支执行完毕, 输出11后11的左支完成, 开始执行11的右支输出15.

II.先序遍历

这东西看起来就只是跟中序遍历换了一下输出位置:

inOrderTraverse (callback) {
  this.inOrderTraverseNode (this.root, callback);
}

inOrderTraverseNode (node, callback) {
  if (node !== null) { // 基线条件
    callback(node.key);
    this.inOrderTraverseNode (node.left, callback);
    this.inOrderTraverseNode(node.right, callback);
  }
}

printNode (value) {
  console.log(value);
}
tree.inOrderTraverse(printNode);

但其实执行逻辑是有比较大的变动的, 中序遍历里我们明明从根节点出发, 但是却先输出了左侧最深的子节点, 这是优先访问子节点再访问自身, 但是先序遍历则是先访问自身再访问子节点.
这个逻辑更加通畅, 看起来更合理:

在这里插入图片描述
在这里插入图片描述
优先执行左分支, 11到左分支: 7左分支, 7左分支: 5, 5左分支3, 全部完成后, 7右分支: 9, 9左分支: 8, 9右分支: 10.
然后11右分支15.

III.后序遍历

看起来仍旧只是变化了输出位置, 但逻辑正好与先序遍历相反, 先序遍历会先访问节点本身, 所有不先访问节点本身的都是从树冠往回输出, 而后序遍历在这基础上遍历完左分支后并不先回调回到节点本身, 而是先去右分支, 再回到节点本身:

const Compare = {
  LESS_THAN: -1,
  BIGGER_THAN: 1,
  EQUALS: 0
};

function defaultCompare(a, b) {
  if (a === b) {
    return Compare.EQUALS;
  }
  return a < b ? Compare.LESS_THAN : Compare.BIGGER_THAN;
}

function printNode(value) {
  console.log(value);
}

class Node {
  constructor(key) {
    this.key = key;
    this.left = null;
    this.right = null;
  }
}

class BinarySearchTree {
  constructor(compareFn = defaultCompare) {
    this.compareFn = compareFn;
      this.root = null;
  }
    insert(key) {
        if (this.root == null) {
            this.root = new Node(key);
        } else {
            this.insertNode(this.root, key);
        }
    }
    insertNode(node, key) {
        if (this.compareFn(key, node.key) === Compare.LESS_THAN) {
            if (node.left == null) {
                node.left = new Node(key);
            } else {
                this.insertNode(node.left, key);
            }
        } else {
            if (node.right == null) { // 右子节点没值, 直接加
                node.right = new Node(key);
            } else {
                this.insertNode(node.right, key);
            }
        }
    }
    inOrderTraverse(callback) {
        this.inOrderTraverseNode(this.root, callback);
    }

    inOrderTraverseNode(node, callback) {
        if (node !== null) { // 基线条件
            this.inOrderTraverseNode(node.left, callback);
            this.inOrderTraverseNode(node.right, callback);
            callback(node.key);
        }
    }
}

var tree = new BinarySearchTree();
const arr = [11, 7, 15, 5, 3, 9, 8, 10, 13, 12, 14, 20, 18, 25];

for (let i = 0; i < arr.length; i++) {
    tree.insert(arr[i]);
}

tree.inOrderTraverse(printNode);

在这里插入图片描述
在这里插入图片描述

3.查找节点

传入一个起始节点和一个值, 查找某属性为该值的节点.
递归, 每次把当前节点和需要查找的节点比较一下大小以确认下一步是向左or向右查找, 此外如果相等就返回.

search (key) {
  return this.searchNode(this.root, key);
}

searchNode(node, key) {
  if (node == null) { // 你在找什么?
    return false;
  }
  if (this.compareFn(key, node.key) === Compare.LESS_THAN) { // 如果当前值大于待查值那么往左找
    return this.searchNode(node.left, key);
  } else if (this.compareFn(key, node.key) === Compare.BIGGER_THAN) { // 如果当前值小于待查值那么往右找
    return this.searchNode(node.right, key);
  } else { // 相等, 返回
    console.log(node)
    return node;
  }
}

4.移除节点

难点在于移除一个非树冠节点后剩下的节点该做什么处理以确保树的结构依然正确.
原书使用了一个函数来处理(‘这是我们在本书中要实现的最复杂的方法’), 这里抽离成两部分, 第一部分查找, 第二部分专用于去除.

remove(node, key) { // 查找方向确定, 查找
  if (node == null) {
    return null;
  }
  if (this.compareFn(key, node.key) === Compare.LESS_THAN) { // 向左一路找下去
    node.left = this.remove(node.left, key);
    return node;
  }
  if (this.compareFn(key, node.key) === Compare.BIGGER_THAN) { // 向右一路找下去
    node.right = this.remove(node.right, key);
    return node;
  } else {
    removeNode(node, key); // 相等, 交付removeNode处理
  }
}

removeNode(node, key) {
  if (node.right == null && node.left == null) {
    node = null;
    return node;
  }
  if (node.right == null) {
    node = node.left;
    return node;
  } else {
    node = node.right;
    return node;
  }
  // 有两个子节点的节点
  const aux = this.minNode(node.right); // 获取右侧子树中最小的节点(不一定是它的直接子节点)
  node.key = aux.key; // 右侧子树最小节点赋值到该节点, 该节点值此时合理, 但是存在了两个重复节点
  node.right = this.remove(node.right, aux.key); // 删除右侧子树最小节点以去重
  return node;
}

总结

本来应该叫’JavaScript 树’的, 但是我一直在说二叉树…整个篇幅基本给了二叉树, 然后索性就叫二叉树了.
栈的话前一段时间做了个撤销恢复功能, 用双端队列改造了一下限制了步数.
这种结构目前没想到要怎么去应用, 或许在使用一些库的时候能用到?

白瑕
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript二叉树相关的知识
yyh231366的博客
09-01 417
作者我呢,在学这个之前,也是在学习了C语言的数据结构和算法的一些东西,然后我去看这个javascript,因为我感觉那个比较专业一点,好了,我们一起来看一下,什么是二叉树。介绍一下什么是树(tree),抽象一下,树是不是有很多节点,一棵树至少会有一个节点(根节点),// 如果新节点值大于当前节点值，则插入右子节点。// 如果新节点值小于当前节点值，则插入左子节点。如何用js代码写一个二叉查找树呢?// 查询树排序插入。...
javascript二叉树
weixin_30355437的博客
05-24 64
javascript中的二叉树一（binary tree） 　　毕业也快2年了，毕业之后就没有认真写过博客了，都是那里学习一下，这里弄一下。学习了也不做笔记，过后就忘记了。我对这种状态打从心里是讨厌的。 　　进入正题，今天的笔记是记录javascript二叉树的学习，是非常基本的知识加上一些自己的认识。适合想了解javascript二叉树的萌新，大神请绕路走，当然如果发现有什么理解上的错误，还...
Javascript二叉树的数据结构
MyBlog
09-18 145
Javascript二叉树 结构 1、插入 2、查询 先序遍历 中、左、右 中序遍历 左、中、右 后序遍历 左、右、中 3、测试输出结果 4、代码 // 封装二次上搜索树 function BinarySerachTree() { function Node(key) { this.key = key; this.left = null; this.right = null; } // 属性 t
学习打卡 JavaScript二叉树及常用方法实现
巴茹真者囧侠客
05-28 142
1. 二叉树的创建及基本方法代码实现 （全部封装在Tree的构造函数内） function Tree(){ var num = 0; //二叉树的结点个数 var lNum = 0; //二叉树的叶子结点个数 var h = 1; //二叉树层数 //结点初始化 传入 结点的值 左-子结点 以及 右-子结点 var Node = function(key){ this.key = key; this.left = null; this.right = null; .
JavaScript二叉树及各种遍历算法详情
百创科技
06-26 541
二叉树是每个节点最多只能有两个子节点的树，如下图所示：第i层的节点最有只有2^(i-1)个；如果这颗二叉树的深度为k，那二叉树最多有2^k-1个节点；在一个非空的二叉树中，若使用n0表示叶子节点的个数，n2是度为2的非叶子节点的个数，那么两者满足关系。
JavaScript二叉树遍历
Chef_Front的博客
03-21 603
本文主要讲述二叉树的先序、中序、后序递归遍历及非递归遍历，并讲述如何使用JavaScript实现遍历逻辑。 下面，我们通过一个例子来回顾一下先序、中序、后序遍历： 上面二叉树先序、中序、后序遍历结果分别为： 先序：ABCDEF 中序：CBDAEF 后序：CDBFEA 从上例可以总结出先序、中序、后序的规则： 先序:遍历到一个节点时，输出节点的值，然后遍历此节点...
javascript-二叉树
qq_43368682的博客
09-25 314
二叉树 二叉树（Binary Tree）也称为二分树、二元树或对分树等。它是n（n≥0）个有限元素的集合，该集合或者为空，或者由一个称为根（root）的元素及两个不相交的、被分别称为左子树和右子树的二叉树组成。当集合为空时，称该二叉树为空二叉树。 重要性质 性质1：一棵非空二叉树的第i层上最多有2i-1个结点（i≥1）。 性质2：一棵深度为k的二叉树中，最多具有2k-1个结点，最少有k个结点。 性质3：对于一棵非空的二叉树，度为0的结点（即叶子结点）总是比度为2的结点多一个，即如果叶子结点数为n0，度数为2
JavaScript二叉树
ProgrammingRoad
03-19 850
在JavaScript中使用数组对象实现二叉树的深度与广度搜索。var t = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19];//下面这段深度优先搜索方法出自Aimingoo的【JavaScript语言精髓与编程实践】var deepView = function(aTree,iNode){    (iNode in aTree) && (
JavaScript实现二叉树
李豆豆的博客
10-08 324
Document function BinaryTree() { var Node = function(key) {//节点 this.key = key; this.left = null; this.right = null;
JavaScript二叉树遍历1
08-08
JavaScript二叉树遍历一 二叉树是一种树形数据结构，每个节点最多存在左右两个分支。通常分支被称作“左子树”或“右子树”，节点有根节点和子节点。二叉树的分支顺序不能随意颠倒。二叉树遍历有两种方式：深度遍历...
javascript 二叉树部分功能实现
09-05
javascript 二叉树功能实现。（功能有插值、查询、最小值、最大值、删除、清除、前序遍历、中序遍历、后序遍历）
javascript实现二叉树的代码
10-19
本篇文章主要介绍了javascript实现二叉树的代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
JavaScript排序二叉树
05-05
简单的JavaScript排序二叉树，方便理解，由浅入深学习必备
javascript实现二叉树，包括二叉树的构建，中序遍历，先序遍历，后续遍历，查找等功能
最新发布
05-20
JavaScript 实现二叉树 本文介绍如何使用 JavaScript 实现二叉树，包括构建二叉树、中序遍历、先序遍历、后序遍历和节点查找等功能。二叉树是一种每个节点最多有两个子节点的数据结构，常用于实现高效的查找和排序...
async&await异步请求处理办法
白瑕 的博客
07-27 3608
async&await异步请求处理办法 目录async&await异步请求处理办法前言一、async1、async函数2、回调async函数以获取结果二、await末 前言 async函数(官方):使用async关键字声明的函数,是AsyncFunction构造函数的实例， 内部可以使用await关键字。两者的结合让我们可以用一种更简洁的方式完成基于Promise的异步行为，而无需刻意地链式调用Promise。 因为await在没说完async的情况下不好进行,我打算先说async,当然
两个原生JS跨页面传值的小方法
白瑕 的博客
07-28 3556
文章目录前言一、localStorage本地存储二、URL传值总结 这会不会是今天写的最简单的一篇文…? 前言 今天在学校做2020年的题,碰到一个需求:用户在这个页面选择了症状,需要在下一个页面显示出用户选择的项; 这,这就触及到我的知识盲区了… 我突然想到前几天写Vue用了localStorage,总算是没空着,但还是想知道会不会有更好的方法. 一、localStorage本地存储 不能用sessionStorage,sessionStorage在当前会话关闭之后会进行销毁,存储的东西在下个页面全是
for (var key in Obj)遍历JS对象/数组
白瑕 的博客
03-04 2876
这个方法还可以遍历数组，就放在一起写了。 在遍历对象时： var file = { sd:"dskdn", fg:"dadfc", hk:"iel" } for (var k in file) { console.log(k);//得到属性名、方法名 console.log(file[k]); } 下面是遍历对象时输出k的结果，输出属性名： 但在遍历数组时，输出
解决原生template标签在Vue中失效的问题
白瑕 的博客
02-17 2716
需要原生Javascript + three.js的数据标注平台加入Vue框架.本来挺顺利的, 我直接在mounted周期做了初始化, 然后剩下的操作还是交给JavaScript文件执行, 最后发现里面有很明显的事件触发问题.
二叉树 JavaScript实现
03-20
二叉树的 JavaScript 实现可以使用对象来表示每个节点，每个节点包含一个值和两个指向左右子节点的指针。以下是一个简单的实现： ``` class Node { constructor(value) { this.value = value; this.left = null;...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值