数组转树状结构

最新推荐文章于 2023-06-13 15:33:53 发布
最新推荐文章于 2023-06-13 15:33:53 发布
阅读量842 收藏 2
点赞数 1
分类专栏： vue javascript 文章标签： vue.js javascript 算法 数据结构
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42343307/article/details/120012010
版权

数组转树状结构

数组的原始结构

const data = [
        { id: '01', name: '张大大', pid: '', job: '项目经理' },
        { id: '02', name: '小亮', pid: '01', job: '产品leader' },
        { id: '03', name: '小美', pid: '01', job: 'UIleader' },
        { id: '04', name: '老马', pid: '01', job: '技术leader' },
        { id: '05', name: '老王', pid: '01', job: '测试leader' },
        { id: '06', name: '老李', pid: '01', job: '运维leader' },
        { id: '07', name: '小丽', pid: '02', job: '产品经理' },
        { id: '08', name: '大光', pid: '02', job: '产品经理' },
        { id: '09', name: '小高', pid: '03', job: 'UI设计师' },
        { id: '10', name: '小刘', pid: '04', job: '前端工程师' },
        { id: '11', name: '小华', pid: '04', job: '后端工程师' },
        { id: '12', name: '小李', pid: '04', job: '后端工程师' },
        { id: '13', name: '小赵', pid: '05', job: '测试工程师' },
        { id: '14', name: '小强', pid: '05', job: '测试工程师' },
        { id: '15', name: '小涛', pid: '06', job: '运维工程师' }
      ]

方法一for循序实现

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      const data = [
        { id: '01', name: '张大大', pid: '', job: '项目经理' },
        { id: '02', name: '小亮', pid: '01', job: '产品leader' },
        { id: '03', name: '小美', pid: '01', job: 'UIleader' },
        { id: '04', name: '老马', pid: '01', job: '技术leader' },
        { id: '05', name: '老王', pid: '01', job: '测试leader' },
        { id: '06', name: '老李', pid: '01', job: '运维leader' },
        { id: '07', name: '小丽', pid: '02', job: '产品经理' },
        { id: '08', name: '大光', pid: '02', job: '产品经理' },
        { id: '09', name: '小高', pid: '03', job: 'UI设计师' },
        { id: '10', name: '小刘', pid: '04', job: '前端工程师' },
        { id: '11', name: '小华', pid: '04', job: '后端工程师' },
        { id: '12', name: '小李', pid: '04', job: '后端工程师' },
        { id: '13', name: '小赵', pid: '05', job: '测试工程师' },
        { id: '14', name: '小强', pid: '05', job: '测试工程师' },
        { id: '15', name: '小涛', pid: '06', job: '运维工程师' }
      ]
      
      function toTree(arr, parentId) {
        function loop(parentId) {
          let res = []
          for (let i = 0; i < arr.length; i++) {
            let item = arr[i]

            if (item.pid !== parentId) {
              continue
            }

            item.children = loop(item.id)
            res.push(item)
          }
          return res
        }
        return loop(parId)
      }

      const result = toTree(data, '')
      console.log(result)
      
    </script>
  </body>
</html>

方法二reduce实现

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      const data = [
        { id: '01', name: '张大大', pid: '', job: '项目经理' },
        { id: '02', name: '小亮', pid: '01', job: '产品leader' },
        { id: '03', name: '小美', pid: '01', job: 'UIleader' },
        { id: '04', name: '老马', pid: '01', job: '技术leader' },
        { id: '05', name: '老王', pid: '01', job: '测试leader' },
        { id: '06', name: '老李', pid: '01', job: '运维leader' },
        { id: '07', name: '小丽', pid: '02', job: '产品经理' },
        { id: '08', name: '大光', pid: '02', job: '产品经理' },
        { id: '09', name: '小高', pid: '03', job: 'UI设计师' },
        { id: '10', name: '小刘', pid: '04', job: '前端工程师' },
        { id: '11', name: '小华', pid: '04', job: '后端工程师' },
        { id: '12', name: '小李', pid: '04', job: '后端工程师' },
        { id: '13', name: '小赵', pid: '05', job: '测试工程师' },
        { id: '14', name: '小强', pid: '05', job: '测试工程师' },
        { id: '15', name: '小涛', pid: '06', job: '运维工程师' }
      ]

      function toTree(arr, parentId) {
        function loop(parentId) {
          return arr.reduce((acc, cur) => {
            if (cur.pid === parId) {
              cur.children = loop(cur.id)
              acc.push(cur)
            }
            return acc
          }, [])
        }
        return loop(parId)
      }

      const result = toTree(data, '')
      console.log(result)
    </script>
  </body>
</html>


function toTree(arr,parentId){
	function loop(parentId) {
		return arr.reduce(
            (acc, cur) => (cur.pid === parId ? ((cur.children = loop(cur.id)), acc.push(cur)) : '', acc),
            []
          )
	}
}

方法三对象实现

export function tranListToTreeData(list) {
  // 最终要产出的树状图 数据的数组
  const treeList = []
  // 所有项都使用对象存储起来
  const map = {}
/* 基本思路 把数组转成对象格式存入到map中 数组中的id当对象的键 数组中的对象当值
	遍历原数组 使用map[item.pid] 取对象里面的值 如果能取到 表明pid和某项id相等 把这一项追加到 children中
	如果不能取到 表明这一项没有父级了追加到新的数组中
*/
  // 建立映射关系 通过id快速找到对应的元素
  list.forEach(item => {
    if (!item.children) {
      item.children = []
    }
    map[item.id] = item
  })
  // {
  //   "312c": { 'id': '312c', 'pid': '',     'name': '财务部',    children: [{ 'id': '312d', 'pid': '312c', 'name': '财务核算部',children: []}] },
  //   "312d": { 'id': '312d', 'pid': '312c', 'name': '财务核算部',children: []}
  // }
  list.forEach(item => {
    const parent = map[item.pid]
    if (parent) {
      parent.children.push(item)
    } else {
      treeList.push(item)
    }
  })
  return treeList
}

转发自 https://blog.csdn.net/m0_57712926/article/details/119973975

沉迷...
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
js代码-数组转化树形结构
07-15
js代码-数组转化树形结构
实现数据的链式调用，把数组数据转换成树形结构数据
01-21
let data = [ { id: 1, name: "目录1", parentId: 0, }, { id: 2, name: "目录1-1", parentId: 1, }, { id: 3, name: "目录1-2", parentId: 1, }, { id: 4, name: "目录1-1-1", parentId: 2, }, { id: 5, name: "目录1-1-2", parentId: 2, }, { id: 6, name: "目录2", parentId: 0, }, { id: 7, name: "目录2-1", parentId: 6, }, { id: 8, name: "目录2-2", parentId: 6, }, ];
Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)
12-29
数据结构为数组中包含对象–树形结构，用Vue组件的写法实现以下的效果： 树形列表，缩进显示层级，第5级数据加底色，数据样式显色，点击展开折叠数据。本文为用Vue实现方式，另有一篇为用knockout.js的实现方法。 html代码 <div id=table-component-div> <table v-for=item v-bind:list=item></table> </div> 组件模板代码 <script type=text/x-template id=table-component-tem
如何将数组数据转化成树形结构（小案例演示）
背心的博客
11-07 2860
如何将数组数据转化成树形结构（小案例演示）
数组转为树形结构
Grey的博客
10-20 3131
<script> /** * 把平铺的数组结构转成树形结构 */ const arr = [ { 'id': '29', 'pid': '', 'name': '总裁办' }, { 'id': '2c', 'pid': '', 'name': '财务部' }, { 'id': '2d', 'pid': '2c', 'name': '财务核算部'}, { 'id': '2f', 'pid': '2c', 'name': '薪资管理部'}, { 'id': ..
将数组转化为tree结构
weixin_56132330的博客
03-07 2270
学习笔记
将数组转化为树状结构
m0_56895352的博客
02-25 1282
第四个参数：代表回调函数，回调函数一般用来处理数据，所以传递的是map集合存储的一项数据作为参数传入，这个后面会有事例。这是我写的一个通用的处理方式，arrayToTree就是主要处理的函数，而loopTree则是递归函数。第六个参数：代表回调函数处理了新数据的pid的key（依据key是否变化）1.数组顺序是乱的，防止处理时有遗漏，需要将第一层级数据先放到数组的前面。第五个参数：代表回调函数处理了新数据的id的key（依据key是否变化）第三个参数：代表数组中每一项的pid(父类id)的key。
普通数组转成树状数组(树形结构)详解(数组扁平化)
DavisCZ的博客
06-28 4991
普通数组转树形结构数组
将数组数据转化成树形结构
weixin_63473024的博客
03-26 4583
将数组数据转化成树形结构以便于操作带有层级的下拉选项 数据结构 观察相对应的结构 要将列表型的数据转化成树形数据，需要用到递归算法 思路 找树形结构的字段 id pid比较合适 再发现 没有子节点的pid为空 有子节点的 pid 是父节点的id 例如 当id=1 pid='' id=2 pid=1 也就是id=1的下面有子节点, id=3 pid=2 id=2下面有子节点 甚至id=4 pid=2 也就是有节点 上重点 ...
数组数据转化成树形结构的两种方法（使用reduce函数或者使用递归算法）
qq_43710066的博客
04-20 1504
数组数据转化成树形结构的两种方法:使用reduce函数处理树形结构以及使用递归处理树形结构
js数组转换成tree结构数组
08-22
js数组转换成tree结构数组算法
java将list转为树形结构的方法（后台和前台）
01-20
前台： function listToTree(myId,pId,list){ function exists(list, parentId){ for(var i=0; i<list.length; i++){ if (list[i][myId] == parentId) return true; } return false;
树状数组的题目解法c++代码
03-05
通过了解树状数组的原理和定义来解决有关给定一个由n个不同的整数组成的序列，最少需要交换多少次交换相邻的两个数，使其升序排列。
bit.cpp（树状数组基本框架）
04-03
树状数组是一类比较简单的数据结构，和线段树比较像。树状数组是维护前缀和的一种数据结构。这就导致它能用较短的时间来实现查询和改变值。 树状数组比线段树、平衡树要容易写，代码复杂度低。但不足的是适用面较窄...
数据结构-树状数组的构建示例(C++实现)
11-09
数据结构：树状数组的构建示例，包含构造函数、查询、更新、打印操作，还有调用示例。是用C++实现的。
普通数组转成树状数组(tree树形结构)详解(数组扁平化)
qq_44716001的博客
05-31 444
/ 方法一 常规思路 递归// 这个就是一级数组 最后上面的数组只有三个是一级的/** 这个就是小蝌蚪找妈妈的具体实现,其实可以写在一个函数里面,但是为了易懂,就麻烦点儿摘出来一个函数 **/},// 这一步递归 如果没有下面三行代码 只能找到第一级对应的children第二级目录// 简单深拷贝一下// 能走到这儿，说明这个娃 已经找到父亲了 不需要在遍历了 所以删了 你要是非的不删也可以// 注意这里是具体根据业务的，如果不同父目录下面可能有相同的子目录，这里就不能删除了。
Vue中实现 将数组转换为树形结构的两种方法
qq_38210427的博客
06-13 1600
第二种:下载三方插件 使用arrayTotree插件 将扁平化数组转换为数组 并赋值给listdata中的自定义数组 = arrayToTree(获取请求的数组, { parentProperty: '父级id', customID: '二级id'})
构建二叉树模板大全
hjxxxxx123491857的博客
08-30 715
有许多关于构建二叉树的题目，并且这些题目有固定的模板，我将对这类题目将进行分类总结。本篇致力于让读者能够融会贯通，抓住要领，建立模板化思维，看见一题想到一类。构造二叉树一般分为构造普通的二叉树，和构造二叉搜索树。构造二叉树我们学会一种思想，就是第一步先找当前根节点看哪一个数组能够明确确定根节点。第二步划分左区间，右区间。这里需要考察的是对vector的掌握，明确左开右闭，并且如何拷贝，如何resize。二叉搜索树的构建，也是先寻找当前根节点。只不过这里是对一个vector进行操作。......
js-数组转树型结构
weixin_70134200的博客
05-19 1534
解释了数组转树型结构原理、应用场景和实现代码
js 扁平数组转树状数组
最新发布
04-19
在JavaScript中，将扁平数组转换为树状数组是一种常见的操作。树状数组是一种用于表示层次结构数据的数据结构，它由父节点和子节点组成。 以下是一种常见的方法来实现扁平数组转树状数组： 1. 首先，我们需要定义一个空的树状数组，用于存储转换后的结果。 2. 遍历扁平数组，对于每个元素，我们需要找到它在树状数组中的位置，并将其插入到相应的位置。 3. 对于每个元素，我们需要找到它的父节点。可以通过元素中的某个属性（如id）与父节点的属性（如parentId）进行匹配来确定父节点。 4. 如果找到了父节点，我们将当前元素添加到父节点的子节点列表中。 5. 如果没有找到父节点，说明当前元素是根节点，我们将其添加到树状数组的顶层。 6. 最后，返回转换后的树状数组。 下面是一个示例代码来实现这个过程： ```javascript function flatToTree(flatArray) { const treeArray = []; flatArray.forEach(item => { const parent = treeArray.find(node => node.id === item.parentId); if (parent) { if (!parent.children) { parent.children = []; } parent.children.push(item); } else { treeArray.push(item); } }); return treeArray; } ``` 使用这个函数，你可以将一个扁平数组转换为树状数组。你只需要将扁平数组作为参数传递给`flatToTree`函数，它将返回转换后的树状数组。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值