在前端开发中，我们常常需要处理由后端返回的嵌套数据。而将嵌套数据转换为前端更容易处理的平面数组或树形结构，则成为了一个常见的问题。
本文将介绍如何使用JavaScript构建平面数组和树形结构，并提供详细的实现方法和示例代码，帮助读者深入理解这一问题并掌握相关技能。
构建平面数组
一个嵌套的对象数组，转化为平面数组可以方便地进行遍历和操作。下面是一个嵌套的对象数组：
-- -------------------- ---- -------
----- ---- - -
-
--- --
----- ----
--------- -
-
--- --
----- ----
--------- -
---- -- ----- -----
---- -- ----- ----
-
-
-
--
-
--- --
----- ---
-
-我们可以通过递归来将它转化为平面数组：
-- -------------------- ---- -------
-------- ------------- -
--- ------ - --
--- ---- - - -- - - ------------ ---- -
----- ---- - -------
-----------------
-- -------------- -- -------------------- - -- -
------ - -------------------------------------
------ -------------
-
-
------ ------
-
----- -------- - -------------
---------------------这里的 flatten 函数接受一个嵌套的对象数组，并返回一个平面数组。基本思路是遍历整个数据，将每个节点添加到结果数组中，同时如果节点有子节点，则递归调用 flatten 函数，并将返回结果拼接到当前结果数组中。
构建树形结构
与构建平面数组相对应的问题是如何构建树形结构。下面是一个示例平面数组：
const flatData = [
{id: 1, name: 'A', parentId: null},
{id: 2, name: 'B', parentId: 1},
{id: 3, name: 'C', parentId: 2},
{id: 4, name: 'D', parentId: 2},
{id: 5, name: 'E', parentId: null},
]其中，每个节点都包含一个 id 和一个 parentId 字段，表示该节点的父节点。我们可以使用以下代码来将其转换为树形结构：
-- -------------------- ---- -------
-------- ------------------- -
----- ---- - --
----- ----------- - --
-- ------
--- ---- - - -- - - ---------------- ---- -
----- ---- - ---------------- --------- ---
-------------------- - ----
-
-- ------
--- ---- - - -- - - ---------------- ---- -
----- ---- - -----------
----- ------ - --------------------------
-- -------- -
------------------------------------------
- ---- -
-------------------------------
-
-
------ ----
-
----- ---- - -------------------
-----------------这里的 buildTree 函数接受一个平面数组，并返回一个树形结构。基本思路是先创建所有节点，并将它们存储在一个映射表中。然后遍历整个数据，将每个节点与其父节点连接起来，最终返回构建好的树形结构。
总结
通过本文的介绍，我们了解了如何使用JavaScript构建平面数组和树形结构，以及相关的实现方法和示例代码。这些技能在前端开发中非常有用，希望读者可以通过本文的学习和实践，掌握它们
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/13855