js生成树结构

最新推荐文章于 2023-05-24 13:46:31 发布

曹筱君

最新推荐文章于 2023-05-24 13:46:31 发布

阅读量598

点赞数

分类专栏： js js数组文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/m0_53264079/article/details/126459090

版权

js 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

js数组

4 篇文章 0 订阅

订阅专栏

这段内容展示了如何将具有父ID的数组转换为树形结构。通过filter函数筛选出根节点，然后递归地将子节点附加到对应的父节点上，最终形成一个完整的树结构数据。这个过程对于组织层级数据非常有用，例如在前端开发中构建导航菜单或者组织树状视图。

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

let arr = [
      {
        id: 1,
        name: '一级1',
        pid: 0,
      },
      {
        id: 2,
        name: '一级2',
        pid: 0,
      },
      {
        id: 3,
        name: '一级3',
        pid: 0,
      },
      {
        id: 4,
        name: '二级11',
        pid: 1,
      },
      {
        id: 5,
        name: '二级12',
        pid: 1,
      },
      {
        id: 6,
        name: '二级21',
        pid: 2,
      },
      {
        id: 7,
        name: '二级22',
        pid: 2,
      },
      {
        id: 8,
        name: '三级11',
        pid: 4,
      },
    ]

    function getTree(data) {
      let parents = data.filter((v) => v.pid == 0)
      children = data.filter((v) => v.pid !== 0)
      dataToTree(parents, children)
      function dataToTree(parents, children) {
        parents.map((v) => {
          children.map((c, i) => {
            if (c.pid === v.id) {
              let _c = JSON.parse(JSON.stringify(children))
              _c.splice(i, 1)
              dataToTree([c], _c)

              if (v.children) {
                v.children.push(c)
              } else {
                v.children = [c]
              }
            }
          })
        })
      }
      return parents
    }