【评论参与抽奖】树状数据怎样扁平化处理?

1,042 阅读2分钟

今天出了一道数组扁平化的题目,小编写了两种方案,欢迎大家们踊跃参与评论可以写出更多更好的方法以供大家参考学习和交流。

  • 本文参与了掘金周边礼物🎁活动,只要在评论区留下你的想法和你的思路,或者也可以说说其他方面的哦,例如如何快速学习,推荐的书籍、想要对新人说的话等等都可以哦,或者做首诗也是可以不错的哦发挥想象创造力~时间截止到12日中午12点
  • 在本文评论区点赞数最高的两名用户可以获得掘金的新版徽章
  • 如果本文评论综合热度在活动Top 1-5 将获得 新版徽章1套 或 掘金新版IPT恤1件
  • 积极参与哦小伙伴们~ 题目:下面的数据多层树状结构处理成只有一层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)