js扁平结构转树状结构

辰漪
2024-04-12 / 2 评论 / 33 阅读 / 正在检测是否收录...

扁平数据结构转换为树状结构

数据测试

const arr = [
  { id: 1, label: '系统管理', pid: 0 },
  { id: 2, label: '用户管理', pid: 1 },
  { id: 3, label: '角色管理', pid: 1 },
  { id: 4, label: '菜单管理', pid: 1 },
  { id: 5, label: '视频管理', pid: 0 },
  { id: 6, label: '视频分类', pid: 5 },
  { id: 7, label: '视频标签', pid: 5 },
  { id: 8, label: '视频标签-add', pid: 7 },
  { id: 9, label: '视频标签-del', pid: 7 },
]

// 递归方式
console.log(arrayToTree(arr, 'id', 'pid'))
// id映射引用方式
console.log(arrayToTree(arr))

测试输出

[
  {
    id: 1,
    label: '系统管理',
    pid: 0,
    children: [
      { id: 2, label: '用户管理', pid: 1 },
      { id: 3, label: '角色管理', pid: 1 },
      { id: 4, label: '菜单管理', pid: 1 },
    ],
  },
  {
    id: 5,
    label: '视频管理',
    pid: 0,
    children: [
      { id: 6, label: '视频分类', pid: 5 },
      {
        id: 7,
        label: '视频标签',
        pid: 5,
        children: [
          { id: 8, label: '视频标签-add', pid: 7 },
          { id: 9, label: '视频标签-del', pid: 7 },
        ],
      },
    ],
  }
]
2
选择打赏方式:
微信

评论 (2)

取消
  1. 头像
    肥饶国学
    Windows 10 · Google Chrome

    博主的主题好漂亮呀

    回复
    1. 头像
      辰漪 作者
      Windows 10 · Google Chrome
      @ 肥饶国学

      你的也挺好看的表情

      回复