ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

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

2022-04-29 11:36:11  阅读:119  来源: 互联网

标签:树状 Js item let result 数组 null data children


1、示例数据

[
    {
        "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
    },

标签:树状,Js,item,let,result,数组,null,data,children
来源: https://www.cnblogs.com/psmart/p/16205972.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有