当前位置:首页 > JavaScript

js树实现

2026-01-14 14:24:59JavaScript

树的基本概念

树是一种非线性的数据结构,由节点和边组成。每个节点包含一个值和指向子节点的引用。树的顶部节点称为根节点,没有子节点的节点称为叶节点。

树的实现方式

在JavaScript中,树可以通过对象或类来实现。以下是两种常见的实现方式:

js树实现

使用对象字面量

const tree = {
  value: 1,
  children: [
    {
      value: 2,
      children: []
    },
    {
      value: 3,
      children: [
        {
          value: 4,
          children: []
        }
      ]
    }
  ]
};

使用类

class TreeNode {
  constructor(value) {
    this.value = value;
    this.children = [];
  }

  addChild(childNode) {
    this.children.push(childNode);
  }
}

const root = new TreeNode(1);
const child1 = new TreeNode(2);
const child2 = new TreeNode(3);
const grandChild = new TreeNode(4);

root.addChild(child1);
root.addChild(child2);
child2.addChild(grandChild);

树的遍历方法

树的遍历是指访问树中所有节点的过程。常见的遍历方式有深度优先遍历(DFS)和广度优先遍历(BFS)。

js树实现

深度优先遍历(DFS)

function dfs(node) {
  console.log(node.value);
  node.children.forEach(child => dfs(child));
}

广度优先遍历(BFS)

function bfs(root) {
  const queue = [root];
  while (queue.length > 0) {
    const node = queue.shift();
    console.log(node.value);
    node.children.forEach(child => queue.push(child));
  }
}

二叉树实现

二叉树是每个节点最多有两个子节点的树结构。

二叉树节点类

class BinaryTreeNode {
  constructor(value) {
    this.value = value;
    this.left = null;
    this.right = null;
  }
}

二叉搜索树插入

class BinarySearchTree {
  constructor() {
    this.root = null;
  }

  insert(value) {
    const newNode = new BinaryTreeNode(value);
    if (this.root === null) {
      this.root = newNode;
    } else {
      this.insertNode(this.root, newNode);
    }
  }

  insertNode(node, newNode) {
    if (newNode.value < node.value) {
      if (node.left === null) {
        node.left = newNode;
      } else {
        this.insertNode(node.left, newNode);
      }
    } else {
      if (node.right === null) {
        node.right = newNode;
      } else {
        this.insertNode(node.right, newNode);
      }
    }
  }
}

树的常见操作

查找节点、删除节点、计算深度等是树的常见操作。

查找节点

function findNode(root, value) {
  if (root === null) return null;
  if (root.value === value) return root;
  for (const child of root.children) {
    const found = findNode(child, value);
    if (found) return found;
  }
  return null;
}

计算树深度

function treeDepth(node) {
  if (node === null) return 0;
  let maxDepth = 0;
  node.children.forEach(child => {
    maxDepth = Math.max(maxDepth, treeDepth(child));
  });
  return maxDepth + 1;
}

标签: js
分享给朋友:

相关文章

css3结合js制作

css3结合js制作

CSS3 结合 JavaScript 制作动态效果 CSS3 和 JavaScript 结合可以实现丰富的动态效果,包括动画、交互和响应式设计。以下是几种常见的实现方式: CSS3 动画与 Java…

js实现复制

js实现复制

使用document.execCommand方法 在较旧的浏览器中,可以使用document.execCommand('copy')实现复制功能。创建一个临时的textarea或input元素,将需要…

js 进度条的实现

js 进度条的实现

使用 HTML 和 CSS 创建基础进度条 HTML 结构可以简单使用一个 div 元素作为容器,内部嵌套另一个 div 表示进度: <div class="progress-containe…

js实现变形

js实现变形

使用 CSS 和 JavaScript 实现元素变形 在 JavaScript 中实现变形效果通常结合 CSS 的 transform 属性,通过动态修改该属性实现元素的旋转、缩放、倾斜或平移。…

js实现驼峰

js实现驼峰

实现驼峰命名的几种方法 使用正则表达式和字符串替换 通过正则表达式匹配字符串中的特定模式(如下划线或短横线),并将其后的字母转换为大写,同时移除分隔符。 function toCamelCase(s…

js实现祖玛

js实现祖玛

实现祖玛游戏的核心思路 祖玛游戏的核心玩法是发射彩色珠子,形成三个或以上相同颜色的珠子即可消除。以下是使用JavaScript实现的基本框架。 游戏初始化 创建画布并初始化游戏状态: const…