关于平铺数据处理为树形方法以及树形拍平

最新推荐文章于 2024-01-02 17:19:45 发布

前端僵尸

最新推荐文章于 2024-01-02 17:19:45 发布

阅读量592

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_66996746/article/details/130322928

版权

本文展示了如何使用JavaScript进行数据转换，包括从列表构建树形结构，将树形结构拍平为列表，以及通过映射关系将平铺的数组转换回树形结构。这些方法利用递归和循环操作，实现了数据结构间的灵活变换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、使用递归

// 转树形
const dataTree = (data, pid) => {
  const res = [] 
  data.forEach((item) => {
    if (item.sjid === pid) {
      const itemChildren = dataTree(data, item.id)
      if (itemChildren.length) item.children = itemChildren
      res.push(item)
    }
  })
  return res
}

二、树形拍平

// 树形拍平
const getNode = (treeData) => {
  const flatData = []
  function flatten(node, parent) {
    const flatNode = { ...node }
    flatNode.parentId = parent
    flatData.push(flatNode)
    if (node.children) {
      node.children.forEach((child) => {
        flatten(child, node.id)
      })
      delete flatNode.children
    }
  }
  treeData.forEach((node) => {
    flatten(node, null)
  })
  // console.log(flatData)
  return flatData
}

三、通过循环map映射

/**
 * 把平铺的数组结构转成树形结构
 */
 export function tranListToTreeData(list) {
  // 1. 定义两个变量
     const treeList = []
     const map = {}
  // 2. 建立一个映射关系，并给每个元素补充children属性.
  // 映射关系: 目的是让我们能通过id快速找到对应的元素
  // 补充children：让后边的计算更方便
  list.forEach(item => {
    if (!item.children) {
      item.children = []
    }
    map[item.xh] = item
  })

  // 循环
  list.forEach(item => {
    // 对于每一个元素来说，先找它的上级
    // 如果能找到，说明它有上级，则要把它添加到上级的children中去
    // 如果找不到，说明它没有上级，直接添加到 treeList
    const parent = map[item.pid]
    // 如果存在上级则表示item不是最顶层的数据
    if (parent) {
      parent.children.push(item)
    } else {
      // 如果不存在上级 则是顶层数据,直接添加
      treeList.push(item)
    }
  })
  // 返回
  return treeList
}