首页 > web前端 > js教程 > 如何在 JavaScript 中有效地将 JSON 对象的平面数组转换为分层树结构?

如何在 JavaScript 中有效地将 JSON 对象的平面数组转换为分层树结构?

Patricia Arquette
发布: 2024-12-16 05:50:09
原创
984 人浏览过

How to Efficiently Convert a Flat Array of JSON Objects into a Hierarchical Tree Structure in JavaScript?

在 JavaScript 中将平面数组转换为分层树结构

在 JavaScript 中,我们经常遇到需要分层组织数据的情况。一种常见的表示形式是树结构,其中节点通过父子关系互连。本文探讨了一种将平面 JSON 对象数组转换为此类分层树结构的有效技术。

问题描述

给定一个 JSON 对象数组,每个对象代表树中的一个节点,使用“id”、“parentId”、“level”和“text”等属性,我们的目标是将这个平面数组转换为嵌套的 JSON 对象,其中每个节点都包含其孩子们。

解决方案

一种有效的方法是利用地图查找算法。通过创建一个映射,将每个节点的“id”与其在数组中对应的索引关联起来,我们可以高效地遍历数组并构建层次结构。

首先,我们初始化映射并确保每个节点都有一个空的“children”数组来存储其后代。然后,我们迭代该数组,并针对每个节点检查其“parentId”。如果它不是“0”,我们将使用映射中的“id”找到父节点,并将当前节点作为子节点追加。 “parentId”为“0”的节点代表树的根。

该解决方案的主要优点是其效率和处理多个根的能力。它不依赖于外部库,并且可以处理悬挂分支(没有父节点的子节点)。

这是实现此解决方案的 JavaScript 代码片段:

function list_to_tree(list) {
  var map = {}, node, roots = [], i;
  
  for (i = 0; i < list.length; i += 1) {
    map[list[i].id] = i; // initialize the map
    list[i].children = []; // initialize the children
  }
  
  for (i = 0; i < list.length; i += 1) {
    node = list[i];
    if (node.parentId !== "0") {
      // if you have dangling branches check that map[node.parentId] exists
      list[map[node.parentId]].children.push(node);
    } else {
      roots.push(node);
    }
  }
  return roots;
}
登录后复制

使用提供的示例输入,该函数将生成预期的分层输出,如下例所示:

var entries = [{
        "id": "12",
        "parentId": "0",
        "text": "Man",
        "level": "1",
        "children": null
      },
      {
        "id": "6",
        "parentId": "12",
        "text": "Boy",
        "level": "2",
        "children": null
      },
      {
        "id": "7",
        "parentId": "12",
        "text": "Other",
        "level": "2",
        "children": null
      },
      {
        "id": "9",
        "parentId": "0",
        "text": "Woman",
        "level": "1",
        "children": null
      },
      {
        "id": "11",
        "parentId": "9",
        "text": "Girl",
        "level": "2",
        "children": null
      }
    ];

console.log(list_to_tree(entries));
登录后复制

这种方法提供了一种简单而有效的解决方案从平面数组构建层次树结构,满足您的数据管理和可视化需求。

以上是如何在 JavaScript 中有效地将 JSON 对象的平面数组转换为分层树结构?的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板