在前端开发过程中，经常会遇到需要操作树形数据的情况，例如将树形数据展示在页面上、进行树的遍历、过滤等等。这时我们可以使用 tree-kit 这个 npm 包来方便地操作树形数据。
安装
在终端命令行中执行以下命令来安装 tree-kit ：
npm install tree-kit
如果你使用的是 yarn ，也可以使用以下命令来安装：
yarn add tree-kit
使用
导入
首先，在需要使用 tree-kit 的文件中，你需要将其导入：
import { tree } from 'tree-kit';
数据结构
tree-kit 支持使用以下格式的数据结构：
-- -------------------- ---- ------- ----- ---- - - - --- -- ----- -------- --------- - - --- --- ----- -------- -- - --- --- ----- --------- --------- - - --- ---- ----- --------- - - - - -- - --- -- ----- ------- - --展开代码
这个数据结构中，每个节点都包含 id 和 name 属性，而节点的子节点则存储在 children 属性中。
创建树
创建树非常简单，只需要传入数据和节点唯一标识的属性名称：
const rootNode = tree.create(data, 'id');
这里我们将节点唯一标识属性设置为 id 。如果你的数据格式不同（例如使用 uuid 作为节点唯一标识），你需要修改标识属性名称。
创建树后，你可以使用以下方法进行树的遍历：
遍历树
preorder(node, callback)—— 先序遍历postorder(node, callback)—— 后序遍历levelorder(node, callback)—— 层序遍历
这里的 callback 是一个函数，会在遍历到每个节点时被调用，同时会传入当前节点作为参数：
tree.preorder(rootNode, node => { // 输出节点名称 console.log(node.name); });
以上代码会输出如下结果：
Node1 Node11 Node12 Node121 Node2
获取节点
tree-kit 还提供了获取节点的方法，你可以传入节点标识来获取对应的节点：
const node = tree.get(rootNode, 12); console.log(node.name); // Node12
添加节点
如果你需要向树中添加节点，可以使用以下方法：
appendChild(node, childNode)—— 添加子节点insertBefore(node, newNode)—— 在当前节点前插入节点insertAfter(node, newNode)—— 在当前节点后插入节点
例如，我们想在节点 Node11 下添加一个新节点：
const node11 = tree.get(rootNode, 11); const newNode = { id: 111, name: 'Node111' }; tree.appendChild(node11, newNode);
删除节点
如果你需要删除节点，可以使用以下方法：
remove(node)—— 删除节点及其子节点
例如，我们想删除节点 Node12 及其子节点：
const node12 = tree.get(rootNode, 12); tree.remove(node12);
搜索节点
如果你需要搜索节点，可以使用以下方法：
search(node, condition)—— 根据条件搜索节点
例如，我们想搜索节点名称为 Node121 的节点：
const result = tree.search(rootNode, node => node.name === 'Node121'); console.log(result.name); // Node121
将树转换为数组
如果你需要将树转换为数组，可以使用以下方法：
toArray(node)—— 将树转换为数组
例如，我们想将 rootNode 转换为数组：
const arr = tree.toArray(rootNode); console.log(arr);
输出结果为：
[ { id: 1, name: 'Node1' }, { id: 11, name: 'Node11', parentId: 1 }, { id: 111, name: 'Node111', parentId: 11 }, { id: 2, name: 'Node2' } ]
将数组转换为树
如果你需要将数组转换为树，可以使用以下方法：
fromArray(array, idKey, parentIdKey)—— 将数组转换为树
例如，我们想将上文中输出的数组转换为树：
const data = [ { id: 1, name: 'Node1' }, { id: 11, name: 'Node11', parentId: 1 }, { id: 111, name: 'Node111', parentId: 11 }, { id: 2, name: 'Node2' } ]; const rootNode = tree.fromArray(data, 'id', 'parentId');
这里 idKey 和 parentIdKey 分别表示节点唯一标识属性和父级节点标识属性。
示例代码
以下是一个完整的示例代码，包含如何创建树、遍历树、添加节点、删除节点、搜索节点、将树转化为数组和将数组转化为树。
-- -------------------- ---- ------- ------ - ---- - ---- ----------- ----- ---- - - - --- -- ----- -------- --------- - - --- --- ----- -------- -- - --- --- ----- --------- --------- - - --- ---- ----- --------- - - - - -- - --- -- ----- ------- - -- ----- -------- - ----------------- ------ -- --- ----------------------- ---- -- - ----------------------- --- -- ---- ----- ---- - ------------------ ---- ----------------------- -- ---- ----- ------ - ------------------ ---- ----- ------- - - --- ---- ----- --------- -- ------------------------ --------- -- ---- ----- ------ - ------------------ ---- -------------------- -- ---- ----- ------ - --------------------- ---- -- --------- --- ----------- ------------------------- -- ------- ----- --- - ----------------------- ----------------- -- ------- ----- ---- - - - --- -- ----- ------- -- - --- --- ----- --------- --------- - -- - --- ---- ----- ---------- --------- -- -- - --- -- ----- ------- - -- ----- ----------- - -------------------- ----- ------------展开代码
总结
tree-kit 提供了一套简单易用的方法来操作树形数据，能够大大提高开发效率。通过学习本篇教程，你可以掌握 tree-kit 的使用方法，并在实际开发过程中应用它来处理树形数据。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67345
