当前位置:首页 > 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)插入

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
分享给朋友:

相关文章

jquery.js

jquery.js

jQuery 简介 jQuery 是一个快速、简洁的 JavaScript 库,用于简化 HTML 文档遍历、事件处理、动画设计和 Ajax 交互。它的设计宗旨是“Write Less, Do Mor…

vue实现js休眠

vue实现js休眠

Vue 中实现 JavaScript 休眠 在 Vue 中实现 JavaScript 休眠通常需要使用异步方式,以避免阻塞主线程。以下是几种常见方法: 使用 setTimeout 和 Pro…

js实现vue路由

js实现vue路由

Vue路由基础实现 使用Vue Router实现前端路由需要先安装并配置路由库。Vue Router是Vue.js官方的路由管理器。 安装Vue Router: npm install vue-r…

css3结合js制作

css3结合js制作

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

js实现vue

js实现vue

Vue.js 简介 Vue.js 是一个渐进式 JavaScript 框架,用于构建用户界面。其核心库专注于视图层,易于与其他库或现有项目整合。 实现 Vue.js 的基本步骤 安装 Vue.…

js实现拖拽

js实现拖拽

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