js 实现 list转换成tree的方法示例(数组到树)

js中List、Tree互相转换 在js中通过递归的方法将List与Tree(树形数据)互相转换 立即下载

目标:

JS 将有父子关系的平行数组转换成树形数据

方法:双重遍历,一次遍历parentId,一次遍历id == parendId;

该方法应该能很容易被想到,实现起来也一步一步可以摸索出来;

const oldData = [

  {id:1,name:'boss',parentId:0},

  {id:2,name:'lily',parentId:1},

  {id:3,name:'jack',parentId:1},

  {id:4,name:'john',parentId:2},

  {id:5,name:'boss2',parentId:0},

]





function listToTree(oldArr){

  oldArr.forEach(element => {

    let parentId = element.parentId;

    if(parentId !== 0){

      oldArr.forEach(ele => {

        if(ele.id == parentId){ //当内层循环的ID== 外层循环的parendId时,(说明有children),需要往该内层id里建个children并push对应的数组;

          if(!ele.children){

            ele.children = [];

          }

          ele.children.push(element);

        }

      });

    }

  });

  console.log(oldArr) //此时的数组是在原基础上补充了children;

  oldArr = oldArr.filter(ele => ele.parentId === 0); //这一步是过滤,按树展开,将多余的数组剔除;

  console.log(oldArr)

  return oldArr;

}

listToTree(oldData);

以上就是本文的全部内容,希望对大家的学习有所帮助。

wg_listToTree1.1 wg_listToTree小插件 用 javascript 将List数组转换为Tree 包含一个小示例 立即下载

相关推荐

Contest 226 - C - Martial artist

from atcoder Problem Statement Time Limit: 2 sec / Memory Limit: 1024 MB Score :300300points Takahashi is a martial artist. There areNNmoves that a martial artist can learn, called Move11,22,\ldots…,NN. For each1 \leq i \leq N1≤i≤N, it takes...

m0_54674275的博客 1020

JS中list转为tree,tree转为list的实现

递归的思想就是找儿子节点:遍历arr中的元素,看看元素的pid是否和id相等,如果相等就是它的孩子,添加到children中,第一个参数是id,第二个参数是存放孩子的数组,第三个参数是所有的元素数组。首先我们捋一下非递归方法的思路:遍历arr中每一个元素,找这个元素的父亲(v.id === pid)。对于tree和list之间的两种状态转换,我们先捋清思路再练习,多敲敲熟悉代码。也是分为了递归和非递归两种方法,很简单,就直接给大家看代码吧!一、list转tree的方法。一、list转tree的方法。

qq_53740827的博客 2174

vTaskStartScheduler()详解

是启动 FreeRTOS 实时内核的“扳机”。在调用它之前,你只是创建了一些任务结构,但它们都处于“待命”状态,系统仍然在按传统的裸机前后台方式运行。调用这个函数后,FreeRTOS 内核会接管系统的控制权,开始根据优先级调度你创建的任务,多任务环境才真正开始。关键点:它没有参数。它的所有行为都由中的配置宏控制。它通常不会返回。一旦调用,除非没有任务可以运行(或者你显式地停止了调度器),否则程序流永远不会回到main()函数中调用它的下一行。是一个没有参数但行为由精密控制的函数。

Shylock_Mister的博客 1594

listToTree(js)

给出list: const list = [ {id: 0, val: 0, parentId: null}, {id: 1, val: 1, parentId: 0}, {id: 2, val: 2, parentId: 0}, {id: 3, val: 3, parentId: 1}, {id: 4, val: 4, parentId: 2} ] 将该list转变为树形结构: 方法一:递归,依次找到每个节点的children function list

qq_43119912的博客 1584

Aurora 8B/10B IP核介绍 —— Xilinx 技术文档Pg046

一、概述该IP核与用户接口之间支持AXI4-Stream协议,且基于ZYNQ SOC、A7、K7、V7以及UltraScale、UltraScale+系列FPGA的高速收发器(the high-speed serial transceivers)进行实现。多达 16 个连续绑定4 个连续绑定的 GTP 收发器framingstreaming以及全双工或单工加扰消扰CRC校验热插拔Aurora 8B/10B核心(图1-1)是一种可扩展的、轻量级的、用于高速串行通信的链路层协议;

qq_32147275的博客 1640

科普:Frenet坐标

理想情况下,描述这种常见驾驶行为在数学上应该很容易。一种方法是使用新的坐标系。现在,而不是放下一个正常的笛卡尔网格,我们做一些事情,就像你看到下面…Frenet Coordinates是一种以比传统x,y笛卡尔坐标更直观的方式表示道路位置的方式。如果我们想要方程式来描述这个动作,那就不容易了!想象一下像下面这样一条弯曲的道路,笛卡尔坐标系就位于它的上面…使用这些笛卡尔坐标,我们可以尝试描述车辆通常在路上行驶的路径…那么在Frenet坐标系下呈现的典型轨迹是什么样的?在这里,我们定义了一个新的坐标系统。

OceanStar的博客 1万+

js list to tree

这个函数首先创建一个空的对象 `lookup` 来存储列表中每个元素的引用,并最终用它来构建树。然后,它遍历列表,对于每个元素,将其添加到 `lookup` 对象中,并根据其 `parentId` 将其作为子元素添加到相应的父元素中。最后,函数返回根元素数组 `rootItems`,它包含了整个树结构。在JavaScript中,将列表转换为树结构是一种常见的操作,尤其是在处理需要层级展示的数据,如菜单、分类等。以下是一个简单的例子,展示了如何将一个扁平化的列表转换为多层级树结构。

qq_34874784的博客 574

国产化软件设计:遵循信创要求,助力信息技术自主创新

支持国产操作系统、CPU、数据库和中间件。确保网络通信的身份鉴别、数据传输机密性和完整性。实现应用和数据层的身份鉴别、数据传输机密性完整性、数据存储机密性完整性。依托法院密码服务平台提供的商用密码能力。

qq_41186565的博客 3372

js将list转化为tree格式的几种写法

最近在考虑一个树状结构存储。 最终需要将list转化为tree格式 源数据示例 源数据共401条 [{ "menuId" : "5f50c5fb8f0d74536bbfb7a4", "menuName" : "菜单管理", "parentMenuId" : null }, { "menuId" : "5f524416ff216c2cbc554907", "menuName" : "频道管理", "parentMenuId" : "5f50c5fb8f0d74536bbfb7a4" }, { "menuId"

shb7433185的博客 2056

RustFS vs MinIO:深入对比分布式存储的性能、功能与选型指南

RustFS与MinIO是两款热门分布式存储系统,分别针对高性能与通用场景设计。RustFS基于Rust语言,在吞吐量(最高提升46%)、延迟(降低37%)和资源效率(内存占用减少67%)上显著优于MinIO,适合AI训练、金融级应用等高性能需求。MinIO凭借成熟的S3兼容性、云原生集成和企业级功能,更适用于混合云及现有S3生态。许可方面,RustFS采用Apache 2.0,MinIO为AGPLv3。选型建议:优先RustFS应对性能敏感场景,选择MinIO注重生态兼容性,也可考虑混合架构策略。

分布式存储与RustFS的博客 2023

关于STM32编译报错:Error: L6218E: Undefined symbol SystemInit (referred from startup_stm32f10x_md.o).

今天新建工程发现出现一个错误 —— …\Output\CG.axf: Error: L6218E: Undefined symbol SystemInit (referred from startup_stm32f10x_md.o). 但我觉得我的操作没有任何问题,而且配置和上一个文件比较是一模一样的。 于是我开始百度查询,然后发现了下面几个博客—— @weixin_44133391——STM32 编译错误 @dorlolok——iel5 编译报错 error: L6235E: More than one

纯粹,学术,热爱。 9403

20200819 layui tree js 实现 list转换成tree的方法示例(数组到树)

方法: //调用后台获取list数据 //树形菜单ok getLefttree(); functiongetLefttree(){ $.ajax({ type:"POST", url:sysURL+"/cegtPermission/findPermissionTree/", dataType:"json", success:function(data){ varresData=data; ...

do what you like && brave 564

PCB压合原理与工艺全流程深度解析

PCB压合是多层印制电路板制造中的核心工序,其本质并非简单物理叠加,而是高分子树脂流动、玻璃布应力释放、铜箔热膨胀及界面能调控的协同过程。理解压合原理,需掌握温度-压力-时间三维曲线动态关系;优化工艺流程,须兼顾叠板精度、热压参数匹配与冷却策略;关键影响因素如半固化片(PP)选型、铜箔表面处理、设备温场均匀性、结构对称性、环境湿度及操作手法,共同决定层间结合力、翘曲度与孔壁质量。本文围绕PCB压合原理、工艺流程、关键影响因素三大维度展开,融合IPC标准、实测数据与产线案例,为工艺工程师、NPI人员及设备维护

weixin_29191081的博客 257

js 中转换成list集合_js 实现 list转换成tree的方法示例(数组到树)

目标:JS 将有父子关系的平行数组转换成树形数据方法:双重遍历,一次遍历parentId,一次遍历id == parendId;该方法应该能很容易被想到,实现起来也一步一步可以摸索出来;const oldData = [{id:1,name:'boss',parentId:0},{id:2,name:'lily',parentId:1},{id:3,name:'jack',parentId:1},...

weixin_39976951的博客 261

Camera2Demo

在Camera2 的基础上进行封装,使得Camera2一堆初始化逻辑与Activity分离,降低耦合度,完成预览拍照并保存的操作

LinePhone3.2.7(android端最新版本) sip客户端

SIP客户端For android:LinePhone3.2.7(最新版本),官网地址:http://www.linphone.org/

js 中转换成list集合_js 实现 list转换成tree(数组到树)

目标:JS 将有父子关系的平行数组转换成树形数据方法一:双重遍历,一次遍历parentId,一次遍历id == parendId;该方法应该能很容易被想到,实现起来也一步一步可以摸索出来;const oldData = [{id:1,name:'boss',parentId:0},{id:2,name:'lily',parentId:1},{id:3,name:'jack',parentId:1}...

weixin_42552716的博客 309

jdk-8u144-linux-x64.tar.gz.

该资源为搭建Linux系统Java环境用,资源的后缀为tar.gz格式的压缩包

js 实现 list转换成tree;tree转换成list

1、list转换成tree;2、tree转换成list;

qqjuanqq的博客 1158

汉书HE8,好用的汇编代码编写工具

汉书HE8,好用的汇编代码编写工具早期编写汇编代码所用功能强大

JavaScript:list和tree转换

// 将树形数组转换成扁平数组 treeToArray(tree) { let data = JSON.parse(JSON.stringify(tree)) let newData = [] const callback = (item) => { (item.children || (item.children = [])).map(v => { callback(v) .

1111111111 1436

js数组转树

js的list转tree

437

isset php 二维数组_PHP普通二维数组转换成树形结构函数

/***转换成树行结构的二维数组*@paramarray$list要转换的二维结果集*@paramstring$id主键标记字段*@paramstring$pidparent标记字段*@paramstring$childchild标记字段*@returnarray*/functionlist_to_tree($list,$pk='id'...

weixin_30842027的博客 164

tree转换成list---递归遍历

treeToArray (list, newArr = []) { list.forEach((item) => { const { children } = item if (children) { delete item.children if (children.length) { newArr.push(item) return this.treeToArray

string佳佳的博客 828

JavaScript ABC

 一 变量类型和值:1基本数据类型(传值):boolean number string属于弱类型语言,用var声明2复合数据类型(传引用):object(对象):var obj = new Object();obj.s = “str”;obj[”n”] = 1;上面3行简写成:var obj = {”s”:”str”,”n”:1};用for…in遍历fo

LENEL的砖篮 3122
上一篇: vue中按钮防止暴力点击,多次提交数据的问题,组件通用化封装
下一篇: div在body中可以任意拖动
哈哈hyc
博客等级 码龄8年 131粉丝 87原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值