首页 > 其他分享 >树转数组的实现方法

树转数组的实现方法

时间:2023-09-04 15:31:47浏览次数:32  
标签:name tree pid id children result 数组 方法 树转

//树形数据
const listTree = [
  {
    id: 1,
    name: '部门1',
    pid: 0,
    children: [
      {
        id: 2,
        name: '部门1-1',
        pid: 1,
        children: [
          {
            id: 4, 
            name: '部门1-1-1', 
            pid: 2,
            children: []
          }
        ]
      },
      {
        id: 3,
        name: '部门1-2',
        pid: 1,
        children: [
          {
            id: 5, 
            name: '部门1-2-1', 
            pid: 3,
            children: []
          }
        ]
      }
    ]
  },
  {
    id: 6,
    name: '部门2',
    pid: 0,
    children: [
      {
        id: 7, 
        name: '部门2-1', 
        pid: 6,
        children: []
      }
    ]
  },
  {
    id: 8,
    name: '部门3',
    pid: 0,
    children: []
  }
]

reduce取树行数据的所有子集

function treeTransList(tree, key) {
  return tree.reduce(function(con, item) {
    var callee = arguments.callee;
    con.push(item);
    if (item[key] && item[key].length >0)
      item[key].reduce(callee, con);
    return con;
  }, []).map(function(item){
    item[key] = [];
    return item;
  })
}
treeTransList(listTree, 'children')

递归实现

function getItem(tree, result) {
  for (let i = 0; i < tree.length; i++) {
    if(tree[i].children) {
      getItem(tree[i].children, result)
      delete tree[i].children;
    }
    result.push(tree[i])
  }
  return result;
}

function treeToList(tree) {
  const result = [];
  getItem(tree, result);
  return result;
}
treeToList(listTree)

广度优先遍历法

function treeToList(tree, childName = 'children') {
  // 设置临时数组,用来存放队列
  let queen = [];
  // 设置输出数组,用来存放要输出的一维数组
  const result = [];
  queen = queen.concat(tree);
  // 对树对象进行广度优先的遍历
  while(queen.length) {
    const first = queen.shift();
    if (first[childName]) {
      queen = queen.concat(first[childName]);
      delete first[childName]
    }
    result.push(first);
  }
  return result;
}  
treeToList(listTree, 'children')

实现效果

 [
  {id: 1, name: '部门1', pid: 0},
  {id: 2, name: '部门1-1', pid: 1},
  {id: 3, name: '部门1-2', pid: 1},
  {id: 4, name: '部门1-1-1', pid: 2},
  {id: 5, name: '部门1-2-1', pid: 3},
  {id: 6, name: '部门2', pid: 0},
  {id: 7, name: '部门2-1', pid: 6},
  {id: 8, name: '部门3', pid: 0},
]

标签:name,tree,pid,id,children,result,数组,方法,树转
From: https://blog.51cto.com/u_15930000/7351273

相关文章

  • 2845. 统计趣味子数组的数目-361
    2845.统计趣味子数组的数目给你一个下标从0开始的整数数组nums,以及整数modulo和整数k。请你找出并统计数组中趣味子数组的数目。如果子数组nums[l..r]满足下述条件,则称其为趣味子数组:在范围[l,r]内,设cnt为满足nums[i]%modulo==k的索引i的数量。......
  • VMware Workstation使用方法
    在VMware中如何创建新虚拟机?vmware虚拟机怎么安装系统?      1、打开我们已经安装好的vmware软件,进入主界面后点击【创建新虚拟机】按钮。2、打开新建虚拟机向导,点击下一步继续。      3、选择要安装的操作系统,有两种安装方式:1)安装程序光盘,可点击选择。2)安装程序光盘映......
  • Vue.js 组件的2种创建使用方法
    创建组件的两种方式1.全部注册组件Vue.commpent('自定义标签名',{ //组件有自己的一个data函数,也只能是函数 组件不可有根节点el属性 data:function(){ return{ //返回data中的数据 } //模板 template:` `, methods:{ //组件的方法 }, computed:{ //计算属性 }, watch:{ //......
  • 数据结构-树状数组
    新接触到的数据结构,根据百度百科:树状数组或二叉索引树(英语:Binary IndexedTree),又以其发明者命名为Fenwick树,最早由PeterM.Fenwick于1994年以ANewDataStructure for Cumulative Frequency Tables为题发表在SOFTWARE PRACTICE ANDEXPERIENCE。其初衷是解决数据压缩里......
  • BI经销商调用方法
    import{getListByCodeType}from"../../api/JryjList";onMounted(()=>{getDealer("dealer");//在onMounted加载后调用});constgetDealer=async(codeType)=>{try{getListByCodeType({codeType:codeType,......
  • slice()方法详解
    JavaScript的slice()方法是一个可在数组或字符串上调用的方法,用于从数组中提取元素或从字符串中提取字符,生成一个新的数组或字符串。数组的slice()方法:语法:array.slice(start,end)参数:start:可选参数,规定从何处开始选取,如果是负数,那么它规定从数组尾部开始算起的位置,例如,-......
  • VUE 打开新页面方法记录
    1.使用VUERouter主要使用router的resolve方法进行路径及参数构造jumpPage(){letrouteData=this.$router.resolve({name:"newPage",query:{name:"zs"}})window.open(routeData.href,"_blank&qu......
  • 性能问题分析排查的实践方法
    知识星球有同学遇到了一个性能问题,问题表现是这样的:静态资源放在Nginx,资源大概十几M大小,Nginx用docker部署,压测时发现静态资源加载很慢。在群里问该如何排查和分析。这是很常见的一种性能问题,导致这种现象的原因一般是带宽、内存等资源不足导致的。当然,性能问题分析不能仅凭借猜......
  • 铺先生:让转店更快的方法,不知道就吃亏了
    不少朋友开点一段时间过后都有过转店的想法吧,但是又会被转店的繁琐事宜感到烦恼。其中最让他们头疼的是不知道让转店更快的方法,自己能想到的只有把转让价格降低,但是其实大家都不愿看到这样的结果。那么下面小编就说一些方法帮助大家。1. 清楚自身优势店铺转让最重要的就是宣传,而......
  • 彻底关闭谷歌浏览器自动更新方法分享 取消chrome自动更新
    不想让Chrome浏览器自动更新主要是因为70版本后的Ui无法更改,强迫症的我实在无法忍受。看了网上的很多方法都不管用,后来找到这个方法测试成功后真的太开心了。现在分享给大家,希望给需要的人一点帮助吧。我们做法是:清空Update文件夹,并设置权限,让chrome没有权限改这个文件夹。原理:......