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

目录
相关文章
|
3月前
|
自然语言处理 前端开发 JavaScript
🛠️ JavaScript数组操作指南:20个精通必备技巧🚀
本文详细介绍了 JavaScript 中的 20 个高效数组操作技巧,涵盖了从基本的添加、移除元素,到数组转换和去重等高级操作。强调了不可变性的重要性,提供了清晰的代码示例,帮助开发者编写更整洁和高效的代码。无论是新手还是经验丰富的开发者,这些技巧都将显著提升您的编码能力,使您在项目中更具竞争力。
52 2
|
3月前
|
JavaScript 前端开发 测试技术
JS都有哪些操作数组的方法
JS都有哪些操作数组的方法
46 3
|
3月前
|
JavaScript
js删除数组中已知下标的元素
js删除数组中已知下标的元素
59 4
|
3月前
|
缓存 JavaScript 前端开发
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
58 1
|
3月前
|
JavaScript 前端开发 Java
【javaScript数组,函数】的基础知识点
【javaScript数组,函数】的基础知识点
34 5
|
3月前
|
JavaScript 前端开发 索引
探索JavaScript数组:基础
探索JavaScript数组:基础
24 3
|
3月前
|
JavaScript 前端开发 索引
JS 删除数组元素( 5种方法 )
JS 删除数组元素( 5种方法 )
84 1
|
3月前
|
JavaScript 前端开发
如何在JS中声明一个数组
如何在JS中声明一个数组
35 0
|
3月前
|
存储 JavaScript 前端开发
JavaScript Array(数组) 对象
JavaScript Array(数组) 对象
38 3
|
4月前
|
JavaScript 前端开发
js删除数组最后一个元素
js删除数组最后一个元素
下一篇
开通oss服务