概述
在前端开发的过程中，经常需要将扁平的数据转化为树形结构。list-to-tree-lite-sinnbo 是一款针对这种需求开发的 npm 包，使用广泛且易于学习。它支持将任意深度的数据组织成树形结构，并且可以自定义配置进行处理。
在这篇文章中，我们将详细介绍如何使用 list-to-tree-lite-sinnbo。
安装
在使用 list-to-tree-lite-sinnbo 之前，需要先进行安装。我们可以使用 npm 进行安装，具体操作如下：
--- ------- ------------------------ ------
注意：使用 list-to-tree-lite-sinnbo 需要保证你已经使用了 ES6 以上的语法。
使用
在安装完成 list-to-tree-lite-sinnbo 后，我们可以开始使用它来将扁平的数据转化为树形结构。使用 list-to-tree-lite-sinnbo 的过程分为两步：
- 对原始数据进行处理，将其转化为 list-to-tree-lite-sinnbo 可以识别的格式；
- 调用 list-to-tree-lite-sinnbo 的相关方法，将处理后的数据转化为树形结构。
下面我们将结合示例代码详细介绍这两个步骤。
第一步：对原始数据进行处理
在使用 list-to-tree-lite-sinnbo 之前，需要对原始数据进行处理，将其转化为一个类似于下面的数组：
----- ---- - -
-
--- --
----- --- ---
--------- ----
--
-
--- --
----- --- ---
--------- -
--
-
--- --
----- --- ---
--------- -
--
-
--- --
----- --- ---
--------- -
--
-
--- --
----- --- ---
--------- -
--
-
--- --
----- --- ---
--------- -
--
-
--- --
----- --- ---
--------- -
-
-可以看到，每个元素包括三个字段：
- id：节点的 ID；
- name：节点的名称；
- parentId：节点的父元素的 ID。如果一个节点是根节点，则 parentId 设置为 null。
list-to-tree-lite-sinnbo 会根据这些字段创建一个树形结构。
如果你的数据格式不同，可以使用 list-to-tree-lite-sinnbo 提供的 API 进行转化。例如，如果你的数据格式为：
----- ---- - -
-- -
----- --- ---
--------- -
-- -
----- --- ---
--------- -
-- -
----- --- --
--
-- -
----- --- --
-
-
--
-- -
----- --- ---
--------- -
-- -
----- --- --
--
-- -
----- --- --
-
-
-
-
-
-可以使用 list-to-tree-lite-sinnbo 提供的 listToTree API 进行转化：
------ - ---------- - ---- --------------------------
----- ---- - -
-- -
----- --- ---
--------- -
-- -
----- --- ---
--------- -
-- -
----- --- --
--
-- -
----- --- --
-
-
--
-- -
----- --- ---
--------- -
-- -
----- --- --
--
-- -
----- --- --
-
-
-
-
-
-
----- -------- - ---------------- -
------ -------
---------- ------------
--
---------------------这里 idKey 和 parentKey 分别指定了 ID 和父元素 ID 在数据中的字段名。
第二步：使用 list-to-tree-lite-sinnbo 转化为树形结构
处理完成原始数据后，我们可以使用 list-to-tree-lite-sinnbo 的相关 API 将其转化为树形结构。下面是一个示例代码：
------ - ---------- - ---- --------------------------
----- ---- - -
-
--- --
----- --- ---
--------- ----
--
-
--- --
----- --- ---
--------- -
--
-
--- --
----- --- ---
--------- -
--
-
--- --
----- --- ---
--------- -
--
-
--- --
----- --- ---
--------- -
--
-
--- --
----- --- ---
--------- -
--
-
--- --
----- --- ---
--------- -
-
-
----- -------- - ----------------
---------------------这里我们使用了 listToTree 方法将数据转化为树形结构。输出结果为：
-
-
----- --
------- --- ---
----------- -----
----------- -
-
----- --
------- --- ---
----------- --
----------- -
-
----- --
------- --- ---
----------- --
----------- --
--
-
----- --
------- --- ---
----------- --
----------- --
-
-
--
-
----- --
------- --- ---
----------- --
----------- -
-
----- --
------- --- ---
----------- --
----------- --
--
-
----- --
------- --- ---
----------- --
----------- --
-
-
-
-
-
-这里我们可以看到，根据 parentId 字段自动生成了树形结构。同时，也可以看到每个节点都有一个 children 属性用于存放子节点。
自定义配置
list-to-tree-lite-sinnbo 还支持自定义配置。你可以使用 listToTree 方法的第二个参数传入一些自定义的配置项。
下面是一个示例代码：
------ - ---------- - ---- --------------------------
----- ---- - -
-
--- --
----- --- ---
--------- -----
----- ----------
--
-
--- --
----- --- ---
--------- --
----- ----------
--
-
--- --
----- --- ---
--------- --
----- ---------
-
-
----- ------- - -
------ -----
---------- -----------
------------ --------
-------- -------
---------- ----------
-
----- -------- - ---------------- --------
---------------------这里我们使用了一些自定义的配置项：
- idKey：将 ID 字段设置为 id；
- parentKey：将父元素 ID 字段设置为 parentId；
- childrenKey：将子节点设置为 nodes；
- typeKey：指定节点类型字段为 type；
- typeValue：过滤出节点类型为 category 的节点。
输出结果为：
-
-
----- --
------- --- ---
----------- -----
------- -----------
-------- -
-
----- --
------- --- ---
----------- --
------- -----------
-------- --
-
-
-
-这里我们可以看到，输出的树形结构中只包含了类型为 category 的节点，同时使用了自定义的 childrenKey 和 typeKey 字段。
结论
通过本文，我们可以了解到 list-to-tree-lite-sinnbo 能够非常方便地将扁平的数据转化为树形结构。同时，你还可以使用自定义配置，让它更好地适配你的业务需求。
如果你在项目中需要将扁平的数据转化为树形结构，不妨试试 list-to-tree-lite-sinnbo。它一定会为你带来不少便利。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60056cf581e8991b448e6ac7