小白看了都会的js树转数组

爱学习的curry

已于 2022-06-16 08:40:15 修改

阅读量2.4k

点赞数 2

文章标签： javascript 前端 vue.js

于 2022-06-15 15:27:09 首次发布

本文链接：https://blog.csdn.net/lx_curry/article/details/125297578

版权

树结构数组转换 JavaScript 递归数据处理

关键词由CSDN通过智能技术生成

目标： 实现树状数据结构转为数组

若树的子节点最多只有一个children子节点

const tree = [
  {
    id: 1,
    title: '研发部',
    pid: null,
    children: [
      {
        id: 5,
        title: '前端研发部',
        pid: 1
      },
      { id: 6, title: '后端研发部', pid: 1 },
      { id: 7, title: '算法研发部', pid: 1 }
    ]
  },
  {
    id: 2,
    title: '研发部',
    pid: null,
    children: [
      { id: 5, title: '前端研发部', pid: 2 },
      { id: 6, title: '后端研发部', pid: 2 },
      { id: 7, title: '算法研发部', pid: 2 }
    ]
  },
  {
    id: 3,
    title: '市场部',
    pid: null
  },
  {
    id: 4,
    title: '销售部',
    pid: null
  }
]
function treeToArray(tree) {
  const obj = []
  tree.forEach((item) => {
    if (item.children) {
      obj.push( item, ...item.children )
      // ES6新增的 删除对象的属性 Reflect.deleteProperty(对象，属性名)
      Reflect.deleteProperty(item,'children')
    } else {
      obj.push(item)
    }
  })
  return obj
}
console.log(treeToArray(tree))

在这里插入图片描述

若树的子节点下还有children子节点

const tree = [
  {
    id: 1,
    title: '研发部',
    pid: null,
    children: [
      {
        id: 5,
        title: '前端研发部',
        pid: 1,
        children: [
          {
            id: 10,
            title: '人工智能',
            pid: 2
          }
        ]
      },
      { id: 6, title: '后端研发部', pid: 1 },
      { id: 7, title: '算法研发部', pid: 1 }
    ]
  },
  {
    id: 2,
    title: '研发部',
    pid: null,
    children: [
      { id: 5, title: '前端研发部', pid: 2 },
      { id: 6, title: '后端研发部', pid: 2 },
      { id: 7, title: '算法研发部', pid: 2 }
    ]
  },
  {
    id: 3,
    title: '市场部',
    pid: null
  },
  {
    id: 4,
    title: '销售部',
    pid: null
  }
]