数组转成树

最新推荐文章于 2022-11-07 12:55:30 发布
最新推荐文章于 2022-11-07 12:55:30 发布
阅读量51 收藏 1
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qqpp_123456789/article/details/119423093
版权

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=`, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>toTree</title>
    </head>

    <body>
        <script>
            let source = [
  {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(data) {
                let result = []
                if(!Array.isArray(data)) {
                    return result
                }
                data.forEach(item => {
                    delete item.children;
                });
                let map = {};
                data.forEach(item => {
                    map[item.id] = item;
                });
                data.forEach(item => {
                    let parent = map[item.pid];
                    if(parent) {
                        (parent.children || (parent.children = [])).push(item);
                    } else {
                        result.push(item);
                    }
                });
                return result;
            }
            console.log(toTree(source))
        </script>
    </body>

</html>

qqpp_123456789
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
数组转树的两种方法
weixin_48837605的博客
08-05 5390
将下面的扁平数组 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
普通列表（数组）转换成树结构数组
Wonder
03-18 2579
普通列表转换成tree结构 情况一：整个数组转 var list = [ { idSelf: 1, label: '苹果', idParent: 100 }, { idSelf: 2, label: '茄子', idParent: 200 }, { idSelf: 3, label: '香蕉', idParent: 100 }, { idSelf: 4, label: '运动类型',
数组转树方法
moligc的博客
10-15 690
数组转树两种方法
数组转换成树形结构
皓皓的博客
03-23 4125
实现一个方法，把原始数组转换成树形结构，要求尽可能降低时间复杂度 以下数据结构中，id 代表部门编号，name 是部门名称，parentId 是父部门编号，为 0 代表一级部门，现在要求实现一个方法，把原始数据转换成树形结构，parentId 为多少就挂载在该 id 的属性 children 数组下，结构如下： // 原始数据如下 let data =[ {id:1,name:'部门A',parentId:0}, {id:2,name:'部门B',parentId:0}, {id:
如何快速高效的将数组转换成树形结构
写PHP的老王
01-27 1万+
任何无限极分类都会涉及到创建一个树状层级数组。从顶级分类递归查找子分类，最终构建一个树状数组。如果分类数据是一个数组配置文件，且子类父类id没有明确的大小关系。那么我们如何高效的从一个二维数组中构建我们所需要的树状结构呢。 假设数据源如下: return [ ['id'=&gt;1,'name'=&gt;'文章','parent_id'=&gt;0], ['id'=&gt;2,'name'=...
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;
List和tree相互转换
01-19
java中List结构与tree结构相互转化。可实现list转树与tree转list。本链接为解读https://jingyan.baidu.com/article/455a99507b687da1662778ec.html。
最小生成树（二维数组实现）
07-28
在二维数组中，我们可以将每个节点看作数组的一个行或列，数组元素的值表示对应节点间边的权重。如果两个节点没有直接相连，权重可以设置为无穷大或者一个非常大的数来表示不可达。 在这个ACM习题中，你可能需要...
php 数组转换成树形结构输出代码
02-03
php 数组转换成树形结构输出代码php 数组转换成树形结构输出代码php 数组转换成树形结构输出代码
把数组对象 转化成树结构
qq_41341185的博客
04-20 880
**把数组对象 转化成树结构** 1.例如我们经常用的树结构 dataArr: [//树形结构例子 { id: "101", label: "03黄金一代", children: [ { label: "李四", id: "10003", }, ], ...
Vue中实现 将数组转换为树形结构的两种方法
FellAsleep的博客
03-15 9071
第一种:递归实现数组转为树形结构 第一步: // 递归: 封装一个函数:将列表list数据转换成数据树形数据=>递归 // 遍历树形 有一个重点 要先找一个头 function transListDataToTreeData(list, root) { const arr = [] // 1.遍历 list.forEach((item) => { // 2.首次传入空字符串 判断list的pid是否为空 如果为空就是一级节点 if (item.pid ==...
数组转树形结构
weixin_56562996的博客
08-04 64
<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: .
【进阶篇】js数组转换为树结构函数
风中追风
12-18 2454
我们常常在做后台管理系统的时候 需要对数据进行组装成一个树装结构，这里特地将此方法进行封装： let data = [ { id: 1, text: 't11', parentId: 0 }, { id: 2, text: 't11', parentId: 0 }, { id: 3, text: 't11', parentId: 1 }, { id: 4, te...
JS深拷贝
一个前端工作者的博客
05-29 171
function deepClone(obj,map = new WeakMap()){ if(typeof obj !== "object" || obj == null) return obj // 最开始map是空的map，所以objFromMap是undefined const objFromMap = map.get(obj) console.log(obj,objFromMap); if(objFromMap) return objFromMap
如何将数组数据转化成树形结构（小案例演示）
背心的博客
11-07 2921
如何将数组数据转化成树形结构（小案例演示）
如何快速实现数组转树
m0_59006402的博客
06-29 381
utils (项目的工具文件) export function tranListToTreeData(list) { // 最终要产出的树状数据的数组 const treeList = [] // 所有项都使用对象存储起来 const map = {} // 建立一个映射关系：通过id快速找到对应的元素 list.forEach(item => { if (!item.children) { item.children = [] } m
前端js 数组转树结构数据
殇之何伤的博客
11-15 962
准备 通过pid,id关联的平铺数组结构，转成包含children数组的树状结构 代码 const toTree = (data) =>{ let result = [] if (!Array.isArray(data)) { return result } data.forEach(item => { delete item.children; }); let map = {}; data.forEac
js递归实现数组转化树状结构
热门推荐
黄治文的博客
10-19 1万+
最近做一个后台管理系统，左边数据需要从数据库获取，获取出来是一个一维数组，因此需要转化成树状结构，写了一个递归实现数据转化，代码如下： function filterArray(data, parent) { let vm = this; var tree = []; var temp;...
javaScript将数组转换成树
最新发布
05-27
可以使用递归来将数组转换为树形结构。假设数组中每个元素都是一个具有 `id` 和 `parentId` 属性的对象，其中 `id` 表示该节点的唯一标识符，`parentId` 表示该节点的父节点的标识符，根节点的 `parentId` 为 `null`...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值