如何遍历树形结构提取含子节点的所有节点ID

我需要遍历指定树形结构，将所有包含子节点的节点的id提取为字符串数组，期望结果为const result = ['root', 'USER', 'ROLE', 'DASHBOARD', 'BRAND', 'COMPANY']，但自己编写的递归函数未能得到正确结果。

树形结构示例 #

{
  "id": "root",
  "name": "Roles and Permissions",
  "children": [
    {
      "id": "USER",
      "name": "USER",
      "children": [
        {
          "id": "1",
          "name": "VIEW"
        },
        {
          "id": "2",
          "name": "CREATE"
        },
        {
          "id": "3",
          "name": "EDIT"
        }
      ]
    },
    {
      "id": "ROLE",
      "name": "ROLE",
      "children": [
        {
          "id": "8",
          "name": "VIEW"
        },
        {
          "id": "9",
          "name": "CREATE"
        },
        {
          "id": "10",
          "name": "EDIT"
        },
        {
          "id": "11",
          "name": "DELETE"
        }
      ]
    },
    {
      "id": "DASHBOARD",
      "name": "DASHBOARD",
      "children": [
        {
          "id": "BRAND",
          "name": "BRAND",
          "children": [
            {
              "id": "52",
              "name": "VIEW"
            },
            {
              "id": "53",
              "name": "CREATE"
            },
            {
              "id": "54",
              "name": "EDIT"
            },
            {
              "id": "55",
              "name": "DELETE"
            }
          ]
        },
        {
          "id": "COMPANY",
          "name": "COMPANY",
          "children": [
            {
              "id": "56",
              "name": "VIEW"
            },
            {
              "id": "57",
              "name": "CREATE"
            },
            {
              "id": "58",
              "name": "EDIT"
            },
            {
              "id": "59",
              "name": "DELETE"
            }
          ]
        }
      ]
    }
  ]
}

尝试的递归函数 #

function getParent(nodes) {
    if(Array.isArray(nodes.children)) {
      return nodes.children.map((node) => getParent(node));
    }
    return nodes.name;
  }

问题分析与解决方案 #

原函数存在几个核心问题：

• 逻辑方向错误：没有收集当前节点的id，反而返回了name，且未判断子节点数组是否为空
• 返回结构混乱：使用map会生成嵌套数组，无法得到一维的结果数组
• 参数处理偏差：函数参数应为单个节点，但逻辑未从根节点开始正确遍历

以下是修正后的递归函数：

function getParentNodes(tree) {
  const result = [];

  function traverse(node) {
    // 仅当节点存在非空子节点数组时，收集其id
    if (Array.isArray(node.children) && node.children.length > 0) {
      result.push(node.id);
      // 递归遍历所有子节点
      node.children.forEach(child => traverse(child));
    }
  }

  // 从根节点启动遍历
  traverse(tree);
  return result;
}

函数说明 #

• 初始化一个空数组result用于存储目标id
• 定义内部递归函数traverse：检查当前节点是否有非空的children数组，若有则将节点id加入结果，再递归遍历每个子节点
• 调用traverse传入根节点，最后返回结果数组

调用该函数传入给定的树形结构，即可得到期望的['root', 'USER', 'ROLE', 'DASHBOARD', 'BRAND', 'COMPANY']数组。

内容的提问来源于stack exchange，提问作者user3318137