js实现 无限层级 树形数据结构

news2024/9/29 9:29:27

创建数据

const list = [];
for (let i = 0; i < 1000; i += 200) {
  if (i === 0) {
    list.push({ id: i - 1, age: '年龄-' + (i - 1) });
    list.push({ id: i, age: '年龄-' + i, parentId: -1 });
  } else {
    for (let index = i - 199; index <= i; index++) {
      list.push({ id: index, age: '年龄-' + index, parentId: i - 200 });
    }
  }
}

数据如图:

在这里插入图片描述

转换为children树结构


function treeData(source, id, parentId, children){   
    let cloneData = JSON.parse(JSON.stringify(source));
    return cloneData.filter(father=>{
        let branchArr = cloneData.filter(child => father[id] == child[parentId]);
        branchArr.length>0 ? father[children] = branchArr : '';
        return father[parentId] == -1; //返回第一层 我这里是-1 实际应用根据自己项目情况修改
    })
}
const data = treeData(list,'id','parentId','children')

转换后data如图,

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/730435.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

LED显示屏出现花屏故障怎么办

LED显示屏出现花屏故障时&#xff0c;可以尝试以下几个步骤来解决问题&#xff1a; 检查电源连接&#xff1a;确保LED显示屏的电源连接正常并牢固。检查电源线、插头和插座&#xff0c;确保它们没有松动或损坏。 检查信号源&#xff1a;检查LED显示屏的信号源&#xff0c;如视频…

现在低代码平台推进阻力那么大,有没有最好的解决办法?

前言 低代码是一种快速设计和开发软件应用程序并且手动编码最少的方法。通过在图形界面中使用可视化建模来组装和配置应用程序&#xff0c;开发人员可以跳过所有基础架构让开发速度提升起来。 一、发现问题 1.“在踏出一步之前&#xff0c;首先考虑能否退回去” 现在低代码平…

ACWing算法基础课

y总说 java不能用Scanner读入,要用Buffer.read();快十倍二十倍; 第一讲 基础算法 包括排序、二分、高精度、前缀和与差分、双指针算法、位运算、离散化、区间合并等内容。 快速排序 一定要先移动end(就是把大数移到右边),后移动start; 否则 先找小数,会出现end start重合…

Python capitalize()函数使用详解,Python首字母大写

「作者主页」&#xff1a;士别三日wyx 「作者简介」&#xff1a;CSDN top100、阿里云博客专家、华为云享专家、网络安全领域优质创作者 「推荐专栏」&#xff1a;小白零基础《Python入门到精通》 capitalize 1、返回的是新字符串2、转换规则3、转换列表的元素4、指定位置转换 c…

MySQL数据库的增、删、改、查案例,和常用语句

一、案例要求 二、解答过程 第一题 1、创建数据库Markte mysql> create database Market; mysql> use Market; 2、创建数据表customers&#xff0c;在c_num字段上添加主键约束和自增约束&#xff0c;在c_birth字段上添加非空约束 mysql> create table customers(…

Ae 效果:CC Threshold RGB

风格化/CC Threshold RGB Stylize/CC Threshold RGB CC Threshold RGB&#xff08;CC 阈值 RGB&#xff09;效果可以为红、绿、蓝三个原色通道分别设置阈值&#xff0c;即&#xff0c;通道上高于此阈值时为纯白&#xff0c;低于此阈值时纯黑&#xff0c;以实现对原色通道的二值…

JavaWeb 笔记——4

JavaWeb 笔记——4 一、JSP1.1、JSP概述1.2、JSP快速入门1.3、JSP原理1.4、JSP脚本1.5、JSP缺点1.6、EL表达式1.7、JSTL标签1.8、MVC模式和三层架构 二、介于三层框架下的案例2.1、准备环境2.2、查询所有2.3、添加2.4、修改2.4.1、修改-回显数据2.4.2、修改-修改数据 2.5、删除…

windows利用ffmpeg采集摄像头画面,支持服务启动,支持一键启动

项目情况 1. 我们再windows 系统下采用ffmpeg去采集笔记本电脑摄像头的时候需要先获取摄像头的信息 2. 因为每台电脑摄像头的信息不一样&#xff0c;如果名称不对会导致不能采集 解决方案 bat脚本实现&#xff0c;先去获取摄像头信息&#xff0c;筛选出摄像头的信息&#…

从视频源头到边缘智能:实现端到端AI解决方案的技术挑战与实践

从视频源头到边缘智能&#xff1a;实现端到端AI解决方案的技术挑战与实践 引言端到端AI解决方案打通视频源头采集视频传输和存储边缘计算和盒子设备 SDK示列 引言 随着人工智能技术的快速发展&#xff0c;端到端AI解决方案在各个领域的应用越来越广泛。这些解决方案能够实现从…

Git的使用--如何将本地项目上传到Github(三种简单、方便的方法)(二)(详解)

一、第一种方法&#xff1a; 1.首先你需要一个github账号&#xff0c;所以还没有的话先去注册吧&#xff01; https://github.com/ 我们使用git需要先安装git工具&#xff0c;这里给出下载地址&#xff0c;下载后一路&#xff08;傻瓜式安装&#xff09;直接安装即可&#x…

代码练习错误记录

更新数据库时报错 Exception in thread "main" java.sql.SQLSyntaxErrorException: You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near WHERE ID1 at line 1原因&#xff1…

Maven高级(一)--分模块设计与开发

一.Maven回顾 Maven是一款构建和管理java项目的工具。 如果我们需要开发一些中大型的项目&#xff0c;仅凭基础知识难以应付&#xff0c;所以我们接下来还需要学习Maven提供的一些高级功能&#xff0c;这些功能在中大型项目应用是非常多的。 Maven的高级内容包括&#xff1a;【…

vue3向对象中添加属性

使用场景&#xff1a;后端返回一个数组对象结构&#xff0c;会出现可能需要前端自己向对象中添加一个新的字段 在vue2中我们常常会遇到明明已经改变了数据&#xff0c;视图却没有实时更新这样的问题 这时vue2就提供了一个方法就是$set this.$set(this.userInfo, age, 12)但是在…

计算机组成原理综合实验设计:基于proteus的小型CPU的设计

基于proteus的小型CPU的设计 摘要 本文详细介绍了该小型CPU的设计模板及预估实现的功能&#xff0c;然后对模块的原理进行详实的概述。之后对项目设计进行了分析&#xff0c;从原理图和电路设计图方面进行了完整的呈现。在介绍完基本的设计框架后&#xff0c;本文对项目中的每…

Linux系统编程:文件描述符和重定向

目录 一. 文件描述符 1.1 什么是文件描述符 1.2 OS如何通过文件描述符找到指定文件 1.3 文件描述符的分配规则 二. 重定向 2.1 重定向的现象和底层原理 2.2 通过系统接口dup2实现重定向 三. 总结 一. 文件描述符 1.1 什么是文件描述符 Liunx操作系统为用户提供了四…

微积分习题课

目录 例题1&#xff1a; 例题2&#xff1a; 解法2&#xff1a; 例题3&#xff1a; 例题4&#xff1a; 方法2&#xff1a; 例题5&#xff1a; 例题6&#xff1a; 例题7&#xff1a; 例题8&#xff1a; 例题9&#xff1a; ​编辑 例题1&#xff1a; 例题2&#xff1a; 解法2&…

二元函数的泰勒展开

定理如下&#xff1a; 证明如下&#xff1a; 注意&#xff1a; 证明的核心要点是转化为关于新的变量的一元函数。

【Linux】进程间通信 -- 匿名管道 | pipe系统调用

什么是通信&#xff1f;为什么要有通信&#xff1f;如何实现&#xff1f;管道通信匿名管道 pipe系统调用读写特征管道的特征: 什么是通信&#xff1f; 进程具有独立性&#xff0c;我们现在的进程间需要通信&#xff0c;那么这个成本一定不低 数据传输&#xff1a;一个进程需要将…

@FeignClient源码浅析

Spring如何识别FeignClient 从EnableFeignClients 出发&#xff0c;寻找Spring如何识别FeignClient 从源码中查看到Import(FeignClientsRegistrar.class) Retention(RetentionPolicy.RUNTIME) Target(ElementType.TYPE) Documented Import(FeignClientsRegistrar.class) pub…

PyQt结合OpenCV实现实时人流量统计

1. 废话篇&#xff08;可跳过&#xff09; 之前学的基本都是Web端的技术。前两天的面试&#xff0c;让我深入的去学习一下 Qt 技术&#xff0c;了解完概念之后&#xff0c;才知道我之前接触的类 TkInter 技术&#xff0c;有点安卓开发的味道。。。 2. 人流量统计效果图 3. 业务…