Array to Tree 的三种方法

该文介绍了两种JavaScript方法将数组转换为树形结构数据:一种是利用map对象辅助遍历实现,另一种是通过递归函数处理。同时提到了第三方库array-to-tree的使用,该库提供了转化功能并支持自定义属性。

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

一、使用map遍历实现数组转树

export function tranListToTreeData(arr) {
  const treeArr = []

  // 帮助快速确定上级
  const map = {}
  arr.forEach(item => {
    item.children = []
    map[item.id] = item
  })
  console.log(map)
  // 写代码
  arr.forEach(item => {
    // 对arr进行循环,对每一个元素item,如果
    // 1. item有上级元素pItem, 把item添加到pItem.children
    // 2. item没有上级元素(根据item.pid去找,找不到元素), 添加到treeArr
    const pItem = map[item.pid]
    if (pItem) {
      pItem.children.push(item)
    } else {
      treeArr.push(item)
    }
  })
  return treeArr
}

二、使用递归函数实现树形数据处理

export function tranListToTreeData2(data, pid = '') {
  const arr = []
  data.forEach(item => {
  // 找出一级
    if (item.pid === pid) {
    // 找出二级
      const children = tranListToTreeData(data, item.id)
      if (children.length) {
      // 收集二级
        item.children = children
      }
      // 收集一级
      arr.push(item)
    }
  })
  return arr
}
console.log(tranListToTreeData2(data))

三、导包实现数组转树

(1)导入npm install array-to-tree -S

(2)在utils工具函数中定义函数

export function tranListToTreeData3(arr) {
  return arrayToTree(arr, {
    parentProperty: 'pid',
    customID: 'id'
  })

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值