Array to Tree 的三种方法_arraytotree-优快云博客

本文链接：https://blog.youkuaiyun.com/qwerrerfjj/article/details/128540846

该文介绍了两种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'
  })