树状数据怎样扁平化处理?

简介: 树状数据怎样扁平化处理的方式
今天出了一道数组扁平化的题目,小编写了两种方案,欢迎大家们踊跃参与评论可以写出更多更好的方法以供大家参考学习和交流。
  • 积极参与哦小伙伴们~

题目:下面的数据多层树状结构处理成只有一层children的结构

data = [
  {
    name: "About",
    path: "/about",
    children: [
      {
        name: "About US",
        path: "/about/us"
      },
      {
        name: "About Comp",
        path: "/about/company",
        children: [
          {
            name: "About Comp A",
            path: "/about/company/A",
            children: [
              {
                name: "About Comp A 1",
                path: "/about/company/A/1"
              }
            ]
          }
        ]
      }
    ]
  }
]
// 处理后的结构
[
  {
    name: "About",
    path: "/about",
    children: [
      {
        name: "About US",
        path: "/about/us"
      },
      {
        name: "About Comp",
        path: "/about/company",
        
      },
      {
        name: "About Comp A",
        path: "/about/company/A"
      },
      {
         name: "About Comp A 1",
         path: "/about/company/A/1"
      }
    ]
  }
]

代码实现:

方法一

//递归遍历实现
var recursiveFunction4 = function(){
    var aa=[]
    const getStr = function(data){
        data.forEach(item => {
        aa.push({
            name: item.name,
            path: item.path
        })
        if(item.children?.length){
            let children=getStr(item.children)
        }
    })
    }
    getStr(data[0].children)
    //...展开运算符  因为前两项数据没变直接拿来用了拷贝 然后把最后一项children替换掉
    aa= [{...data[0],children:aa}]
    console.log(aa)
}
recursiveFunction4()//基于recursiveFunction3()优化

方法二

//写了一个可自由定义扁平化层级的代码,level代码不扁平的层级
function flatTree(data, level = 0, index = 0){
    let result = [], obj;
    data.forEach(item => {
        result.push(obj = {
            name: item.name,
            path: item.path
        })
        
        if(item.children?.length){
            let children = flatTree(item.children, level, index + 1)
            if(level > index){
                obj.children = children
            }else{
                result = result.concat(children)
            }
        }
    })
    return result
}

12.21更新~

题目:把树结构转为列表平行结构

//题目
let data = [
    {
      id: 1,
      name: "hei",
      children: [
        { id: 3, name: "bai" },
        { id: 4, name: "hong", children: [{ id: 6, name: "lv" }] }
      ]
    },
    { id: 2, name: "jack", children: [{ id: 5, name: "lan" }] }
  ];
  //转换成这个格式
  let list = [
    { id: 1, name: "hei" },
    { id: 3, name: "bai" },
    { id: 4, name: "hong" },
    { id: 6, name: "lv" },
    { id: 2, name: "jack" },
    { id: 5, name: "lan" },
  ];

解题思路代码:

var data = [
    {
        id: 1,
        name: "hei",
        children: [
            { id: 3, name: "bai" },
            { id: 4, name: "hong", children: [{ id: 6, name: "lv" }] }
        ]
    },
    { id: 2, name: "jack", children: [{ id: 5, name: "lan" }] }
];
var result = [];
function flatTree(data){
    data.forEach(item => {
        result.push({
            id: item.id,
            name: item.name
        })
        if(item.children?.length){
            result=flatTree(item.children);
        }
    });
    console.log(result)
    return result
}
flatTree(data)
目录
相关文章
|
7月前
|
算法 前端开发 JavaScript
若依框架---数据转树状层级
若依框架---数据转树状层级
560 0
如果数据给的是树形 转好的树形结构并且是有两个二级children的话 该如何写?
如果数据给的是树形 转好的树形结构并且是有两个二级children的话 该如何写?
|
7月前
|
JavaScript 前端开发 数据管理
扁平数据转树形结构,让数据管理更清晰
扁平数据转树形结构,让数据管理更清晰
树型结构(二叉树的基础)
树型结构(二叉树的基础)
49 0
|
机器学习/深度学习
56.【树型结构】(一)
56.【树型结构】
83 0
|
JSON 数据格式
树形结构展示数据
树形结构展示数据
78 0
|
存储 索引
神奇的数据——树形结构
树 1. 树和二叉树 1.1 什么是树 树(tree)是n(n>=0)个节点的有限集。当n=0时,称为空树。在任意一个非空树中存在以下特点: 有且仅有一个特定的点称为根节点。 当n>1时其余的节点可分为m个互不相交的有限集,每一个集合本身又是一个树,并称为根的子树。 1.1.1 名词: 根节点(root):顶端没有“父亲”,称为根节点。 叶子节点(leaf):末端没有“孩子”,称为叶子节点。 父节点(parent):节点的上一级。 孩子节点(child) :节点的下一级。 兄弟节
245 2
神奇的数据——树形结构