js这个树状数据怎么扁平化处理

Question

下面的数据多层树状结构怎么处理成，只有一层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"
      }
    ]
  }
]

Answer 1

写了一个可自由定义扁平化层级的代码，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
}

Answer 2

先写一个全部扁平化的递归给你

const 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"
              }
            ]
          }
        ]
      }
    ]
  }
]


function flatten(array) {
  const arr = [];
  (function recurrence(array) {
    Array.from(array, (item) => {
      arr.push({ name: item.name, path: item.path });
      if (item.children) {
        recurrence(item.children);
      }
    });
  })(array);
  return arr;
}

console.log(flatten(data));

输出结果:

[
  { name: 'About', path: '/about' },
  { 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' }
]

Answer 3

function flat(arr){

  let list=[];
  function each(arr){
     for(let n of arr){
      if(n.children){
         list.push(n.children);
         each(n.children);
      }
    }
  }
  each(arr)
  list.flat(Infinity);
  data[0].children=list;
  return 
}

Answer 4

var recursiveFunction3 = function(){
    var aa=[]
    var cc=[]
    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)
    cc.push({
        name: aa[0].name,
        path: aa[0].path,
        children:aa.slice(1)
    })
    console.log(cc)
}
recursiveFunction3()

又优化了一下代码

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)
    aa= [{...data[0],children:aa}]
    console.log(aa)
}
recursiveFunction4()