处理树结构太繁琐？这个库让你5分钟搞定所有操作作为前端开发者，你是否经常遇到需要处理树结构的场景？比如菜单树、组织架构、

🚀 推荐一个功能全面的树结构操作库：@suzilong/tree

作为前端开发者，你是否经常遇到需要处理树结构的场景？比如菜单树、组织架构、分类目录等。手动实现树的遍历、查找、修改等操作不仅繁琐，而且容易出错。今天，我要向大家推荐一个功能全面、使用简单的树结构操作库——@suzilong/tree。

🌟 库的特点

1. 功能全面

遍历：支持深度优先（前序/后序）、广度优先遍历
查找：查找单个节点、查找所有匹配节点、查找节点路径
修改：添加、删除、替换、移动节点
转换：数组转树、树转数组、映射、过滤、归约、扁平化
查询：获取节点数量、叶子节点数量、树深度、祖先/后代/兄弟节点
其他：克隆、全匹配、部分匹配

2. 设计优雅

不可变：所有操作均返回新树，不修改原数据
灵活：支持自定义子节点字段名
轻量：无依赖，纯 TypeScript 编写，类型安全
支持森林：可以处理多根节点的树结构
健壮：防御性编程，处理各种边界情况

📦 安装与使用

安装

npm i @suzilong/tree
# 或
yarn add @suzilong/tree
# 或
pnpm i @suzilong/tree

基本使用

import { forEach, find, arrayToTree } from '@suzilong/tree'

// 遍历树
const tree = {
  id: '1',
  children: [
    { id: '1-1', children: [{ id: '1-1-1' }] },
    { id: '1-2' }
  ]
}

forEach(tree, (node) => {
  console.log(node.id)
})
// 输出: 1, 1-1, 1-1-1, 1-2

// 查找节点
const foundNode = find(tree, (node) => node.id === '1-2')
console.log(foundNode) // 输出: { id: '1-2' }

// 数组转树
const array = [
  { id: '1', parentId: null },
  { id: '2', parentId: '1' },
  { id: '3', parentId: '1' }
]
const newTree = arrayToTree(array)
console.log(newTree)
// 输出: [{ id: '1', children: [{ id: '2' }, { id: '3' }] }]

🔍 核心功能详解

1. 遍历操作

forEach：对树中的每个节点执行函数
depthFirst：深度优先遍历（支持前序/后序）
breadthFirst：广度优先遍历

2. 查找操作

find：查找第一个满足条件的节点
findAll：查找所有满足条件的节点
findPath：查找节点并返回路径

3. 修改操作

appendChild：向父节点追加子节点
prependChild：向父节点前置子节点
insertBefore：在指定节点前插入
insertAfter：在指定节点后插入
remove：移除满足条件的节点
replace：替换满足条件的节点
move：移动节点到新位置

4. 转换操作

arrayToTree：将扁平数组转换为树结构
treeToArray：将树结构转换为扁平数组
map：对每个节点执行映射函数
filter：过滤树中的节点
reduce：对树中的节点执行归约操作
flat：将树结构扁平化为节点数组

5. 查询操作

getCount：获取节点数量
getLeafCount：获取叶子节点数量
getDepth：获取树的深度
getAncestors：获取节点的所有祖先
getDescendants：获取节点的所有后代
getSiblings：获取节点的所有兄弟

💡 实际应用场景

场景1：构建菜单树

import { arrayToTree } from '@suzilong/tree'

// 从后端获取的扁平菜单数据
const menuData = [
  { id: '1', name: '首页', parentId: null },
  { id: '2', name: '用户管理', parentId: null },
  { id: '3', name: '用户列表', parentId: '2' },
  { id: '4', name: '角色管理', parentId: '2' }
]

// 转换为树结构
const menuTree = arrayToTree(menuData)
// 现在可以直接用于前端渲染嵌套菜单

场景2：处理组织架构

import { find, getDescendants } from '@suzilong/tree'

// 组织架构树
const orgTree = {
  id: 'company',
  name: '公司',
  children: [
    {
      id: 'dept1',
      name: '技术部',
      children: [
        { id: 'emp1', name: '张三' },
        { id: 'emp2', name: '李四' }
      ]
    },
    {
      id: 'dept2',
      name: '市场部',
      children: [
        { id: 'emp3', name: '王五' }
      ]
    }
  ]
}

// 查找特定员工
const employee = find(orgTree, (node) => node.id === 'emp1')
console.log(employee.name) // 输出: 张三

// 获取技术部的所有成员
const techMembers = getDescendants(orgTree, (node) => node.id === 'dept1')
console.log(techMembers.length) // 输出: 2

场景3：树形数据过滤

import { filter } from '@suzilong/tree'

// 产品分类树
const categoryTree = {
  id: 'root',
  name: '所有分类',
  children: [
    {
      id: 'electronics',
      name: '电子产品',
      children: [
        { id: 'phone', name: '手机' },
        { id: 'laptop', name: '笔记本电脑' }
      ]
    },
    {
      id: 'clothing',
      name: '服装',
      children: [
        { id: 'shirt', name: '衬衫' },
        { id: 'pants', name: '裤子' }
      ]
    }
  ]
}

// 过滤出电子产品分类
const electronicsTree = filter(categoryTree, (node) => 
  node.id === 'root' || node.id === 'electronics' || node.id.includes('electronics-')
)
console.log(electronicsTree.children.length) // 输出: 1

🎯 为什么选择 @suzilong/tree？

功能丰富：覆盖了树操作的几乎所有常见场景
使用简单：API 设计直观，易于理解和使用
类型安全：纯 TypeScript 编写，提供完整的类型定义
性能优秀：针对树操作进行了优化，处理大型树结构也很高效
无依赖：轻量小巧，不会增加项目体积
支持森林：可以处理多根节点的树结构
不可变设计：所有操作都返回新树，避免副作用
边界情况处理：健壮的错误处理，应对各种特殊输入

📝 总结

@suzilong/tree 是一个功能全面、设计优雅的树结构操作库，它为开发者提供了一套完整的工具，简化了树结构的处理。无论是构建菜单、组织架构，还是处理复杂的分类数据，它都能轻松应对。

如果你在项目中需要处理树结构，不妨试试 @suzilong/tree，它会让你的开发工作变得更加高效和愉快！

GitHub 地址：github.com/suzilong666…

NPM 地址：www.npmjs.com/package/@su…

赶快安装使用，体验树结构操作的便捷与高效吧！🚀