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

最新推荐文章于 2024-01-31 08:15:00 发布

Mr.Meng_95

最新推荐文章于 2024-01-31 08:15:00 发布

阅读量402

点赞数

分类专栏： vue 项目文章标签： javascript 前端开发语言

原文链接：https://www.cnblogs.com/psmart/p/16205972.html

版权

项目同时被 2 个专栏收录

179 篇文章 11 订阅

订阅专栏

vue

25 篇文章 3 订阅

订阅专栏

本文介绍了如何在JavaScript中将数组转换为树形结构以及将树形结构转换回数组。提供的示例数据展示了如何操作包含层级关系的对象数组，通过遍历和构建映射表来实现转换。这两个函数对于处理具有层级关系的数据非常有用。

摘要由CSDN通过智能技术生成

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
    },