数组与树形数据互转(轮子,直接cv即可)

这篇文章介绍了如何使用JavaScript将部门列表转换为树形结构,主要涉及递归函数的应用。提供了两个函数,list2Tree用于列表转树,treetolist处理树转列表,特别地,文章还考虑了多级子属性的情况。这两个函数对于处理层级关系的数据结构非常有用。
摘要由CSDN通过智能技术生成

此文件为js文件,复制直接封装组件按需导出即可

// 部门列表转为树形结构思路:
// 1.如果pid为空,说明当前部门是一级部门
// 2.如果pid不为空,判断谁的id与当前部门的pid全等,如果全等说明当前id的这个部门是pid部门的爹,要给爹这个添加孩子注意:对于树形结构的处理、常用手段就是函数的递归
// 列表转树
// list:待转换的列表
// pid:查找几级部门
export const list2Tree = (list, pid) => {
  // 存储结果的树形数组
  const arr = []
  // 遍历list数组
  list.forEach((item) => {
    // 查找一级部门
    if (item.pid === pid) {
      // 查找二级甚至是多级部门
      // 函数递归,查找item的子部门
      const children = list2Tree(list, item.id)
      // 如果children不为空,说明item有子部门
      if (children.length) {
        // 需要给item添加children属性
        item.children = children
      }
      // 添加一级部门到结果树形数组中
      arr.push(item)
    }
  })
  // 返回结果的树形数组
  return arr
}
//如果有三级即孙子级别的子属性与子属性属性名不同时,在提取子属性之前提前提取孙级属性
//points即此处的孙级属性,如果属性名不同更改即可
export const treetolist = (arr) => {
  const list = []
  arr.forEach((item) => {
    if (item.points) {
      const children = treetolist(item.points)
      list.push(item, ...children)
      delete item.points
    } else if (item.childs) {
      const children = treetolist(item.childs)
      list.push(item, ...children)
      delete item.childs
    } else {
      list.push(item)
    }
  })
//返回数据为普通数组
  return list
}


//在子数据属性都一样时使用此函数即可
//注意函数名不要用错
export const tree2list = (arr) => {
  const list = []
  arr.forEach((item) => {
    if (item.childs) {
      const children = treetolist(item.childs)
      list.push(item, ...children)
      delete item.childs
    } else {
      list.push(item)
    }
  })
//返回结果为普通数组
  return list
}


此文章若果对您有效还望点赞

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Ashindn

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值