JS数组转树形结构实例详解：listToTree函数实现

在JavaScript编程中，将一个表示有父子关系的平行数组转换为树形数据结构是一项常见的任务，特别是在构建动态菜单、组织层级数据或构建家族树等场景下。本文提供了一个详细的示例，用于演示如何利用双重遍历来实现这个功能。 首先，我们有一个名为`oldData`的示例数组，其中包含员工及其上级的信息，每个对象有id、name和parentId属性，表示员工ID、姓名和上级ID： ```javascript const oldData = [ { id: 1, name: 'boss', parentId: 0 }, { id: 2, name: 'lily', parentId: 1 }, { id: 3, name: 'jack', parentId: 1 }, { id: 4, name: 'john', parentId: 2 }, { id: 5, name: 'boss2', parentId: 0 }, ]; ``` 函数`listToTree`的核心逻辑是通过双重遍历来完成转换。外部循环遍历每个父节点（通过`parentId`），内部循环则检查当前元素是否是父节点的子节点（通过`ele.id == parentId`）。如果找到子节点，就在对应的父节点对象中创建一个`children`数组，并将子节点添加进去。这样，当遇到具有非零`parentId`的元素时，数组中的结构会逐渐形成树状结构。 经过第一次遍历后，原始数组`oldArr`中包含了子节点关联到其父节点的信息。接下来，通过`filter`操作剔除那些没有父节点（`parentId === 0`）的元素，这样我们就得到了一个只包含完整树形结构的数组。 最终的`listToTree`函数调用： ```javascript let result = listToTree(oldData); console.log(result); ``` 运行这个函数，输出的结果就是一个按照树形结构组织的数组，每个对象都有一个`children`属性，表示其子节点列表。这样的转换对于维护和处理复杂的层次数据非常有用。 总结来说，本文展示了如何通过JavaScript的双重遍历和条件判断，将一个表示父子关系的列表转换为树形结构。这对于前端开发者在构建可扩展的DOM结构或动态数据展示时，理解和掌握这种数据结构的转换方法至关重要。