递归书写树形图示例

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

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

       

<!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>

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

目录
相关文章
|
监控
险境中的智慧航行:ERP系统的风险管理与应对策略
险境中的智慧航行:ERP系统的风险管理与应对策略
1484 5
|
存储 网络协议 编译器
探索C++14新特性:更强大、更高效的编程
探索C++14新特性:更强大、更高效的编程
探索C++14新特性:更强大、更高效的编程
|
机器人 测试技术 Python
作为测试人员,RobotFramework框架真的是必须掌握的吗?
本文探讨了Robot Framework(RF)作为自动化测试框架的重要性,指出虽然RF具有易用性和灵活性,但并非测试人员必须掌握的工具,因为存在许多可替代的自动化测试解决方案。
272 0
作为测试人员,RobotFramework框架真的是必须掌握的吗?
|
10月前
|
机器学习/深度学习 存储 人工智能
【AI系统】卷积操作原理
本文详细介绍了卷积的数学原理及其在卷积神经网络(CNN)中的应用。卷积作为一种特殊的线性运算,是CNN处理图像任务的核心。文章从卷积的数学定义出发,通过信号处理的例子解释了卷积的过程,随后介绍了CNN中卷积计算的细节,包括卷积核、步长、填充等概念。文中还探讨了卷积的物理意义、性质及优化手段,如张量运算和内存布局优化。最后,提供了基于PyTorch的卷积实现示例,帮助读者理解和实现卷积计算。
609 31
【AI系统】卷积操作原理
|
7月前
|
存储 SQL 关系型数据库
mysql的undo log、redo log、bin log、buffer pool
MySQL的undo log、redo log、bin log和buffer pool是确保数据库高效、安全和可靠运行的关键组件。理解这些组件的工作原理和作用,对于优化数据库性能和保障数据安全具有重要意义。通过适当的配置和优化,可以显著提升MySQL的运行效率和数据可靠性。
165 16
|
6月前
|
安全 算法 小程序
关于Sectigo证书那些事儿
Sectigo(原Comodo CA)成立于1998年,是全球领先的证书颁发机构之一,SSL证书市场占有率近40%。其提供SSL证书、代码签名证书、邮件安全证书及文档签名证书等丰富数字证书产品,支持多平台兼容。Sectigo以高安全性、全球信任、高性价比著称,广泛应用于网站加密、软件签名、邮件保护和文档验证等领域,助力企业保障在线业务安全与可信。近期动态包括收购Entrust可信CA业务、与IONOS战略合作及获网络安全奖项等。
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
264 2
|
8月前
|
机器学习/深度学习 存储 人工智能
Satori:快速体验MIT与哈佛推出7B参数的推理专家模型,具备自回归搜索和自我纠错能力
Satori 是由 MIT 和哈佛大学等机构联合推出的 7B 参数大型语言模型,专注于提升推理能力,具备强大的自回归搜索和自我纠错功能。
171 5
|
11月前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking?
通过以上针对 Webpack 或 Rollup 的配置方法,就可以在 Vue 项目中有效地启用 Tree Shaking,从而优化项目的打包体积,提高项目的性能和加载速度。在实际配置过程中,需要根据项目的具体情况和需求,对配置进行适当的调整和优化。
|
10月前
|
C语言
【C语言】全局搜索变量却找不到定义?原来是因为宏!
使用条件编译和 `extern` 来管理全局变量的定义和声明是一种有效的技术,但应谨慎使用。在可能的情况下,应该优先考虑使用局部变量、函数参数和返回值、静态变量或者更高级的封装技术(如结构体和类)来减少全局变量的使用。
165 5