当前位置:首页 > JavaScript

js实现树

2026-02-01 05:58:07JavaScript

实现树结构的基本方法

在JavaScript中实现树结构通常涉及创建节点(Node)和树(Tree)类,节点包含数据和子节点的引用,树类提供操作方法如插入、删除、遍历等。

定义节点类 每个节点包含数据(value)和子节点(children):

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

定义树类 树类包含根节点和操作方法:

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

  // 插入节点(需指定父节点)
  insert(value, parentValue) {
    const newNode = new TreeNode(value);
    if (!this.root) {
      this.root = newNode;
      return;
    }
    this._insertNode(this.root, newNode, parentValue);
  }

  _insertNode(currentNode, newNode, parentValue) {
    if (currentNode.value === parentValue) {
      currentNode.children.push(newNode);
      return;
    }
    for (const child of currentNode.children) {
      this._insertNode(child, newNode, parentValue);
    }
  }
}

树的遍历方法

深度优先遍历(DFS) 递归实现先序遍历:

class Tree {
  // ...其他代码
  traverseDFS(callback) {
    this._traverseDFSNode(this.root, callback);
  }

  _traverseDFSNode(node, callback) {
    callback(node.value);
    for (const child of node.children) {
      this._traverseDFSNode(child, callback);
    }
  }
}

广度优先遍历(BFS) 使用队列实现层级遍历:

class Tree {
  // ...其他代码
  traverseBFS(callback) {
    const queue = [this.root];
    while (queue.length > 0) {
      const currentNode = queue.shift();
      callback(currentNode.value);
      queue.push(...currentNode.children);
    }
  }
}

实际应用示例

创建树并操作

const tree = new Tree();
tree.insert(1);          // 根节点
tree.insert(2, 1);       // 子节点
tree.insert(3, 1);       // 子节点
tree.insert(4, 2);       // 孙子节点

// 遍历示例
tree.traverseDFS(console.log); // 输出: 1, 2, 4, 3
tree.traverseBFS(console.log); // 输出: 1, 2, 3, 4

特殊树结构的实现

二叉树实现 限制每个节点最多有两个子节点:

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

二叉搜索树(BST)插入

js实现树

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

  insert(value) {
    const newNode = new BinaryTreeNode(value);
    if (!this.root) {
      this.root = newNode;
      return;
    }
    let current = this.root;
    while (true) {
      if (value < current.value) {
        if (!current.left) {
          current.left = newNode;
          break;
        }
        current = current.left;
      } else {
        if (!current.right) {
          current.right = newNode;
          break;
        }
        current = current.right;
      }
    }
  }
}

性能优化建议

  • 对于大规模数据,使用循环代替递归防止栈溢出
  • 需要快速查找时,考虑平衡二叉搜索树(如AVL树)
  • 频繁插入/删除场景可使用B树或红黑树变体

标签: js
分享给朋友:

相关文章

js实现拖拽

js实现拖拽

实现拖拽的基本步骤 通过监听鼠标事件(mousedown、mousemove、mouseup)实现拖拽功能。以下是核心代码逻辑: const draggableElement = document.…

js实现换肤

js实现换肤

使用CSS变量实现换肤 通过CSS变量可以轻松实现主题切换功能。CSS变量在根元素中定义,通过JavaScript动态修改这些变量值。 :root { --primary-color: #349…

js实现tab选项卡切换

js实现tab选项卡切换

实现Tab选项卡切换的JavaScript方法 使用纯JavaScript实现Tab切换功能,可以通过监听点击事件动态切换内容显示状态。以下是两种常见实现方式: 基础DOM操作实现 /…

js实现自举

js实现自举

实现 JavaScript 自举的方法 JavaScript 自举(Bootstrap)通常指通过 JavaScript 动态加载自身或依赖的脚本,实现运行时环境的初始化或扩展。以下是几种常见实现方式…

js实现授权

js实现授权

授权流程设计 授权流程通常涉及前端与后端的交互,常见方案包括OAuth2.0、JWT等。以JWT为例的典型流程: 用户提交凭证(如用户名密码)到认证服务 服务端验证通过后生成包含用户信息的J…

js计算器的实现

js计算器的实现

实现基础结构 HTML部分需要创建计算器的基本框架,包含显示区域和按钮。使用<div>容器包裹整个计算器,内部设置一个显示屏和多个按钮。 <div class="calculato…