js递归怎么把json处理成树形

使用JavaScript递归将JSON数据转换为树形结构

在处理具有层级关系的数据时，将扁平的JSON数据转换为树形结构是一种常见的需求，递归是实现这种转换的优雅而高效的方法,本文将详细介绍如何使用JavaScript递归函数将扁平的JSON数据转换为树形结构。

理解树形结构

树形结构是一种层次化的数据结构，由节点组成，每个节点可以有零个或多个子节点，在树形结构中，有一个特殊的节点称为根节点，它没有父节点,其他节点都有且仅有一个父节点。

扁平JSON数据示例

假设我们有以下扁平的JSON数据，其中每个对象都有一个id和parentId字段来表示层级关系：

const flatData = [
  { id: 1, name: '根节点', parentId: null },
  { id: 2, name: '子节点1', parentId: 1 },
  { id: 3, name: '子节点2', parentId: 1 },
  { id: 4, name: '孙节点1', parentId: 2 },
  { id: 5, name: '孙节点2', parentId: 2 },
  { id: 6, name: '孙节点3', parentId: 3 }
];

递归转换方法

创建辅助函数

我们需要一个辅助函数来查找某个节点的子节点：

function findChildren(parentId, data) {
  return data.filter(item => item.parentId === parentId);
}

递归构建树形结构

我们使用递归函数来构建树形结构：

function buildTree(data, parentId = null) {
  const tree = [];
  const children = findChildren(parentId, data);
  for (const child of children) {
    const node = {
      ...child,
      children: buildTree(data, child.id)
    };
    tree.push(node);
  }
  return tree;
}

使用递归函数转换数据

我们可以使用上面的递归函数来转换我们的扁平数据：

const treeData = buildTree(flatData);
console.log(JSON.stringify(treeData, null, 2));

完整代码示例

以下是完整的代码示例：

// 扁平数据
const flatData = [
  { id: 1, name: '根节点', parentId: null },
  { id: 2, name: '子节点1', parentId: 1 },
  { id: 3, name: '子节点2', parentId: 1 },
  { id: 4, name: '孙节点1', parentId: 2 },
  { id: 5, name: '孙节点2', parentId: 2 },
  { id: 6, name: '孙节点3', parentId: 3 }
];
// 查找子节点的辅助函数
function findChildren(parentId, data) {
  return data.filter(item => item.parentId === parentId);
}
// 递归构建树形结构
function buildTree(data, parentId = null) {
  const tree = [];
  const children = findChildren(parentId, data);
  for (const child of children) {
    const node = {
      ...child,
      children: buildTree(data, child.id)
    };
    tree.push(node);
  }
  return tree;
}
// 转换数据
const treeData = buildTree(flatData);
// 输出结果
console.log(JSON.stringify(treeData, null, 2));

输出结果

运行上述代码后,我们将得到以下树形结构：

[
  {
    "id": 1,
    "name": "根节点",
    "parentId": null,
    "children": [
      {
        "id": 2,
        "name": "子节点1",
        "parentId": 1,
        "children": [
          {
            "id": 4,
            "name": "孙节点1",
            "parentId": 2,
            "children": []
          },
          {
            "id": 5,
            "name": "孙节点2",
            "parentId": 2,
            "children": []
          }
        ]
      },
      {
        "id": 3,
        "name": "子节点2",
        "parentId": 1,
        "children": [
          {
            "id": 6,
            "name": "孙节点3",
            "parentId": 3,
            "children": []
          }
        ]
      }
    ]
  }
]

优化与注意事项

性能考虑：对于大型数据集，递归可能会导致性能问题,可以考虑使用迭代方法或优化递归逻辑。
循环引用检测：如果数据中可能存在循环引用,需要添加检测逻辑以避免无限递归。
字段映射：如果JSON数据的字段名与树形结构所需的字段名不同,可以在递归函数中进行字段映射。
空节点处理：可以根据需要处理没有子节点的节点，例如不添加children属性或设置为空数组。

更通用的实现

以下是一个更通用的实现,允许自定义子节点字段名和父节点标识符：

function buildTreeGeneric(data, options = {}) {
  const {
    idKey = 'id',
    parentKey = 'parentId',
    childrenKey = 'children',
    rootParentId = null
  } = options;
  const tree = [];
  const children = data.filter(item => item[parentKey] === rootParentId);
  for (const child of children) {
    const node = {
      ...child,
      [childrenKey]: buildTreeGeneric(data, {
        ...options,
        rootParentId: child[idKey]
      })
    };
    tree.push(node);
  }
  return tree;
}
// 使用示例
const treeData = buildTreeGeneric(flatData, {
  idKey: 'id',
  parentKey: 'parentId',
  childrenKey: 'children'
});

使用递归将扁平的JSON数据转换为树形结构是一种直观且高效的方法，通过递归地查找每个节点的子节点并构建嵌套结构，我们可以轻松地创建出所需的树形数据，这种方法适用于大多数具有明确父子关系的数据转换场景,并且可以根据实际需求进行灵活调整。

企鹅直播企鹅直播足球直播爱奇艺直播爱奇艺足球直播足球直播