递归书写树形图示例

简介: 递归书写树形图示例

大叫好,今天书写了一个扁型转换为树型的例子,使用的是递归,请大家食用,无毒

       

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>树结构</title>
  </head>
  <body>
    <script>
      let arr = [{
        id: 1,
        name: "中国",
        pid: 0
      }, {
        id: 78,
        name: "美国",
        pid: 0
      }, {
        id: 2,
        name: "河南",
        pid: 1
      }, {
        id: 3,
        name: "河北",
        pid: 1
      }, {
        id: 4,
        name: "新乡",
        pid: 2
      }, {
        id: 5,
        name: "开封",
        pid: 2
      }, {
        id: 6,
        name: "许昌",
        pid: 2
      }, {
        id: 7,
        name: "漯河",
        pid: 2
      }, {
        id: 8,
        name: "石家庄",
        pid: 3
      }, {
        id: 9,
        name: "邢台",
        pid: 3
      }, {
        id: 10,
        name: "秦皇岛",
        pid: 3
      }, {
        id: 11,
        name: "衡水",
        pid: 3
      }, {
        id: 12,
        name: "延津县",
        pid: 4
      }, {
        id: 13,
        name: "封丘县",
        pid: 4
      }, {
        id: 14,
        name: "长垣县",
        pid: 4
      }, {
        id: 15,
        name: "王楼镇",
        pid: 12
      }, {
        id: 16,
        name: "牛屯镇",
        pid: 12
      }, {
        id: 17,
        name: "王屯镇",
        pid: 12
      }, {
        id: 18,
        name: "刘庄乡",
        pid: 15
      }, {
        id: 19,
        name: "王庄乡",
        pid: 15
      }, {
        id: 20,
        name: "陈庄乡",
        pid: 15
      }, {
        id: 21,
        name: "娄庄乡",
        pid: 15
      }, {
        id: 22,
        name: "张庄乡",
        pid: 15
      }, {
        id: 23,
        name: "李庄乡",
        pid: 15
      }, {
        id: 24,
        name: "草庄乡",
        pid: 15
      }, {
        id: 25,
        name: "刘庄村",
        pid: 18
      }, {
        id: 26,
        name: "王庄村",
        pid: 18
      }, {
        id: 27,
        name: "李庄村",
        pid: 18
      }, {
        id: 28,
        name: "和庄村",
        pid: 18
      }];
 
      // 递归函数构建树结构
      function buildTree(arr, pid) {
        let result = [];
        for (let i = 0; i < arr.length; i++) {
          if (arr[i].pid === pid) {
            let children = buildTree(arr, arr[i].id);
            if (children.length) {
              arr[i].children = children;
            }
            result.push(arr[i]);
          }
        }
        return result;
      }
      // 构建树结构
      let tree = buildTree(arr, 0);
      console.log(tree);
    </script>
  </body>
</html>

请大家看完之后给我点个关注,谢谢您了

目录
相关文章
|
3月前
|
Arthas 监控 Java
-x [展开层数] 的详细用法和举例?
-x [展开层数] 的详细用法和举例?
36 5
|
9月前
|
JavaScript 前端开发
请解释JavaScript中的箭头函数,并给出一个使用箭头函数的例子。
请解释JavaScript中的箭头函数,并给出一个使用箭头函数的例子。
65 0
链表翻转循环和递归写法(画图分析)
链表翻转循环和递归写法(画图分析)
37 0
|
Python
巧用for循环嵌套结构
巧用for循环嵌套结构
110 0
Leecode 1111. 有效括号的嵌套深度
Leecode 1111. 有效括号的嵌套深度
62 0
|
C语言
【C语言】扫雷(递归展开 + 标记功能)2
【C语言】扫雷(递归展开 + 标记功能)
126 0
【C语言】扫雷(递归展开 + 标记功能)2
|
C语言
【C语言】扫雷(递归展开 + 标记功能)
【C语言】扫雷(递归展开 + 标记功能)
125 0
【C语言】扫雷(递归展开 + 标记功能)
|
JavaScript
树形组件(可动态添加属性、无限嵌套)及递归展示tree数据
树形组件(可动态添加属性、无限嵌套)及递归展示tree数据
树形组件(可动态添加属性、无限嵌套)及递归展示tree数据