js怎么把普通数组数据转为树形结构

白马非马的逻辑

已于 2023-07-03 17:13:30 修改

阅读量331

点赞数

文章标签： javascript 开发语言前端 vue.js 数据结构

于 2023-06-06 17:36:49 首次发布

本文链接：https://blog.csdn.net/qq_29705009/article/details/131072654

版权

文章展示了如何使用JavaScript处理数据列表，将具有parentId属性的对象转换成树形结构。两种方法被提及：一种是基于循环遍历的方式，另一种是采用递归函数实现。这两种方法都用于组织具有层级关系的数据。

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

<script>
  const list = [
    {
      id: 1,
      label: 'test1',
      parentId: 0,
    },
    {
      id: 2,
      label: 'test2',
      parentId: 1,
    },
    {
      id: 3,
      label: 'test3',
      parentId: 1,
    },
    {
      id: 4,
      label: 'test4',
      parentId: 2,
    },
    {
      id: 5,
      label: 'test5',
      parentId: 2,
    },
    {
      id: 6,
      label: 'test6',
      parentId: 3,
    },
    {
      id: 7,
      label: 'test7',
      parentId: 0,
    }
  ]

  // 循环的方式
  function getTreeList (list) {
    const treeList = []
    list.forEach((item) => {
      item.childList = list.filter((sec) => {
        return sec.parentId === item.id
      })
      if (item.parentId === 0) {
        treeList.push(item)
      }
    })
    return treeList
  }
  console.log(getTreeList(list))
  
  // 递归方式
  function getTreeList(list, parentId) {
    const treeList = []
    list.forEach((item) => {
      if (item.parentId == parentId) {
        treeList.push(item)
        item.childList = getTreeList(list, item.id)
      }
    })
    return treeList
  }
  console.log(getTreeList(list, 0))
</script>