Js 数组与树状结构相互转换

简介: Js 数组与树状结构相互转换

Js 数组与树状结构相互转换

示例数据

[
    {
   
        "importProductNo":null,
        "periodTemplateId":null,
        "importButaoId":"4a60be081644438e89ebf8e3e426e3ba",
        "importButaoPid":"e723aed3e58d49e088edb732bfe20061",
        "periodButaoId":null,
        "periodButaoPid":null,
        "butaoNo":"butao002",
        "butaoName":"电机",
        "checked":null,
        "title":"电机"
    },
    {
   
        "importProductNo":null,
        "periodTemplateId":null,
        "importButaoId":"930d368fccbe455abf45cfec89d440d0",
        "importButaoPid":"e723aed3e58d49e088edb732bfe20061",
        "periodButaoId":null,
        "periodButaoPid":null,
        "butaoNo":"butao003",
        "butaoName":"叶片",
        "checked":null,
        "title":"叶片"
    },
    {
   
        "importProductNo":null,
        "periodTemplateId":null,
        "importButaoId":"e723aed3e58d49e088edb732bfe20061",
        "importButaoPid":null,
        "periodButaoId":null,
        "periodButaoPid":null,
        "butaoNo":"butao001",
        "butaoName":"机组总装配",
        "checked":null,
        "title":"机组总装配"
    }
]

2、数组转树形结构

 baseToTree(data) {
   
    let result = []
    if (!Array.isArray(data)) {
   
      return result
    }
    data.forEach((item) => {
   
      delete item.children
    })
    let map = {
   }
    data.forEach((item) => {
   
      map[item.importButaoId] = item
    })
    data.forEach((item) => {
   
      let parent = map[item.importButaoPid]
      if (parent) {
   
        ;(parent.children || (parent.children = [])).push(item)
      } else {
   
        result.push(item)
      }
    })
    return result
  },

3、树形结构转数组

    baseToArr(data) {
   
      const result = []
      data.forEach((item) => {
   
        const loop = (data) => {
   
          result.push(data)
          let child = data.children
          if (child) {
   
            for (let i = 0; i < child.length; i++) {
   
              loop(child[i])
            }
          }
        }
        loop(item)
      })
      return result
    },

转自:https://www.cnblogs.com/psmart/p/16205972.html

目录
相关文章
|
11月前
|
运维 监控 JavaScript
基于 Node.js 图结构的局域网设备拓扑分析算法在局域网内监控软件中的应用研究
本文探讨图结构在局域网监控系统中的应用,通过Node.js实现设备拓扑建模、路径分析与故障定位,提升网络可视化、可追溯性与运维效率,结合模拟实验验证其高效性与准确性。
540 3
|
JSON 前端开发 Serverless
Mock.js 语法结构全解析
Mock.js 的语法规范介绍,从数据模板定义规范和数据占位符定义规范俩部分介绍, 让你更好的使用 Mock.js 来模拟数据并提高开发效率。
|
JavaScript 前端开发 API
JavaScript中通过array.map()实现数据转换、创建派生数组、异步数据流处理、复杂API请求、DOM操作、搜索和过滤等,array.map()的使用详解(附实际应用代码)
array.map()可以用来数据转换、创建派生数组、应用函数、链式调用、异步数据流处理、复杂API请求梳理、提供DOM操作、用来搜索和过滤等,比for好用太多了,主要是写法简单,并且非常直观,并且能提升代码的可读性,也就提升了Long Term代码的可维护性。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
数据采集 JavaScript 前端开发
JavaScript中通过array.filter()实现数组的数据筛选、数据清洗和链式调用,JS中数组过滤器的使用详解(附实际应用代码)
用array.filter()来实现数据筛选、数据清洗和链式调用,相对于for循环更加清晰,语义化强,能显著提升代码的可读性和可维护性。博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
JavaScript 前端开发 Java
【javaScript数组,函数】的基础知识点
【javaScript数组,函数】的基础知识点
209 5
|
JavaScript
js删除数组中已知下标的元素
js删除数组中已知下标的元素
551 4
|
JavaScript 前端开发 测试技术
JS都有哪些操作数组的方法
JS都有哪些操作数组的方法
637 3
|
自然语言处理 前端开发 JavaScript
🛠️ JavaScript数组操作指南:20个精通必备技巧🚀
本文详细介绍了 JavaScript 中的 20 个高效数组操作技巧,涵盖了从基本的添加、移除元素,到数组转换和去重等高级操作。强调了不可变性的重要性,提供了清晰的代码示例,帮助开发者编写更整洁和高效的代码。无论是新手还是经验丰富的开发者,这些技巧都将显著提升您的编码能力,使您在项目中更具竞争力。
412 2
|
JavaScript 前端开发 索引
探索JavaScript数组:基础
探索JavaScript数组:基础
170 3
|
缓存 JavaScript 前端开发
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
318 1