当前位置: 首页 > news >正文

前端小技巧: TS实现数组转树,树转数组

将数组转为树

interface IArrayItem {id: number,name: string,parentId: number
}interface ITreeNode {id: numbername: stringchildren?: ITreeNode[]
}const arr = [{id: 1, name: '部门A', parentId: 0},{id: 2, name: '部门B', parentId: 1},{id: 3, name: '部门C', parentId: 1},{id: 4, name: '部门D', parentId: 2},{id: 5, name: '部门E', parentId: 2},{id: 6, name: '部门F', parentId: 3}
]function convert(arr: IArrayItem[]): ITreeItem | null {// 用于id和treeNode的映射关系表const idToTreeNode: Map<number, ITreeNode> = new Map()let root = nullarr.forEach(item => {const {id, name, parentId} = itemconst treeNode: ITreeNode = { id, name }idToTreeNode.set(id, treeNode)// 找到 parentNode 并加入到它的 childrenconst parentNode = idToTreeNode.get(parentId)if (parentNode) {!parentNode.children && parentNode.children = [] // 没有则初始化一个parentNode.children.push(treeNode)}// 找到根节点if (!parentId) root = treeNode})return root
}const tree = convert(arr)
console.log('tree: ', tree)
  • 遍历数组,生成 tree node

  • 找到parentNode,加入其children

  • 扩展:

    • 数组:像是mysql, 关系型
    • 树,像是文档型

将树转数组

const obj = {id: 1,name: '部门a',children: [{id: 2,name: '部门b',children: [{ id: 4, name: '部门d'}{ id: 5, name: '部门e'}]},{id: 3,name: '部门c',children: [{ id: 6, name: '部门f'}]}]
}interface IArrayItem {id: number,name: string,parentId: number
}interface ITreeNode {id: numbername: stringchildren?: ITreeNode[]
}const arr = []// 使用广度优先遍历,最好function convert(root: ITreeNode): IArrayItem[] {const nodeToParent: Map<ITreeNode, ITreeNode> = new Map()const arr: IArrayItem[] = []const queue = ITreeNode[] = []queue.unshift(root) // 根节点入队while(queue.length) {const curNode = queue.pop() // 出队if (!curNode) breakconst { id, name, children = [] } = curNode// 创建数组 item 并 pushconst parentNode = nodeToParent.get(curNode)const parentId = parentNode?.id || 0const item = { id, name, parentId }arr.push(item) // 只在这里加入// 子节点入队children.forEach(child => {// 映射 parentnodeToParent.set(child, curNode)// 入队queue.unshift(child)})}
}const arr = convert(obj)
console.log('arr:', arr)

相关文章:

前端小技巧: TS实现数组转树,树转数组

将数组转为树 interface IArrayItem {id: number,name: string,parentId: number }interface ITreeNode {id: numbername: stringchildren?: ITreeNode[] }const arr [{id: 1, name: 部门A, parentId: 0},{id: 2, name: 部门B, parentId: 1},{id: 3, name: 部门C, parentId:…...

谷歌动态搜索广告被滥用引发恶意软件泛滥

研究人员发现了一种新方法&#xff0c;可以利用易受攻击的网站向搜索引擎用户发送恶意的、有针对性的广告&#xff0c;这种方法能够传播大量恶意软件&#xff0c;使受害者完全不知所措。 关键是“动态搜索广告”&#xff0c;谷歌利用网站登陆页面的内容将目标广告与搜索配对的…...

C语言实现 1.在一个二维数组中形成 n 阶矩阵,2.去掉靠边元素,生成新的 n-2 阶矩阵;3.求矩阵主对角线下元素之和:4.以方阵形式输出数组。

矩阵形式&#xff1a; 1 1 1 1 1 2 1 1 1 1 3 2 1 1 1 4 3 2 1 1 5 4 3 2 1 完整代码&#xff1a; /*编写以下函数 1&#xff0e;在一个二维数组中形成如以下形式的 n 阶矩阵&#xff1a; 1 1 1 1 1 2 1 1 1 1 3 2 1 1 1 4 3 2 1 1 5 4 3 2 1 2&#xff0e;去掉…...

我在Vscode学OpenCV 处理图像

既然我们是面向Python的OpenCV&#xff08;OpenCV for Python&#xff09;那我们就必须要熟悉Numpy这个库&#xff0c;尤其是其中的数组的库&#xff0c;Python是没有数组的&#xff0c;唯有借助他库才有所实现想要的目的。 # 老三样库--事先导入 import numpy as np import c…...

【python】路径管理+路径拼接问题

路径管理 问题相对路径问题绝对路径问题 解决os库pathlib库最终解决 问题 环境&#xff1a;python3.7.16 win10 相对路径问题 因为python的执行特殊性&#xff0c;使用相对路径时&#xff0c;在不同路径下用python指令会有不同的索引效果&#xff08;python的项目根目录根据执…...

C现代方法(第16章)笔记——结构、联合和枚举

文章目录 第16章 结构、联合和枚举16.1 结构变量16.1.1 结构变量的声明16.1.2 结构变量的初始化16.1.3 指示器(C99)16.1.4 对结构的操作 16.2 结构类型16.2.1 结构标记的声明16.2.2 结构类型的定义16.2.3 结构作为参数和返回值16.2.4 复合字面量(C99)16.2.5 匿名结构(C1X) 16.3…...

Python项目——识别指定物品

目录 1、百度EasyDL平台数据配置 1.1、训练图像上传 1.2、训练图像进行标注 1.3、训练模型 1.4、检验识别 1.5、申请发布 1.6、控制台权限配置 2、Python调用物体识别API 本项目是基于百度EasyDL平台制作的识别转盘内瓶子&#xff0c;且识别瓶子位置的一个项目。通过在…...

Spring-创建非懒加载的单例Bean源码

补充&#xff1a;关于扫描的逻辑 /*** Scan the class path for candidate components.* param basePackage the package to check for annotated classes* return a corresponding Set of autodetected bean definitions*/ public Set<BeanDefinition> findCandidateCo…...

Techlink TL24G06 网络变压器 10G 基座单端口变压器

功能特征&#xff1a; 1、符合IEEE 802.3标准。 2、符合RoHS。 3、工作温度范围&#xff1a;0C至70C。 4、储存温度范围&#xff1a;-20C至125C。...

Python操作PDF:PDF文件合并与PDF页面重排

处理大量的 PDF 文档是非常麻烦的事情&#xff0c;频繁地打开关闭文件会严重影响工作效率。对于一大堆内容相关的 PDF 文件&#xff0c;我们在处理时可以将这些 PDF 文件合并起来&#xff0c;作为单一文件处理&#xff0c;从而提高处理效率。同时&#xff0c;我们也可以选取不同…...

删除链表的倒数第n个节点(C++解法)

题目 给你一个链表&#xff0c;删除链表的倒数第 n 个结点&#xff0c;并且返回链表的头结点。 示例 1&#xff1a; 输入&#xff1a;head [1,2,3,4,5], n 2 输出&#xff1a;[1,2,3,5]示例 2&#xff1a; 输入&#xff1a;head [1], n 1 输出&#xff1a;[]示例 3&#…...

Apache服务的搭建与配置(超详细版)

前言 Apache是一种常见的Web服务器软件&#xff0c;广泛用于Linux和其他UNIX操作系统上。它是自由软件&#xff0c;可以通过开放源代码的方式进行自由分发和修改。Apache提供了处理静态和动态内容的能力&#xff0c;而且还支持多种编程语言和脚本&#xff0c;如PHP、Python和P…...

设计模式大赏(一):桥接模式,组合模式

设计模式大赏&#xff08;一&#xff09;&#xff1a;桥接模式&#xff0c;组合模式 导言 本篇文章是设计模式大赏中的第一篇文章&#xff0c;这个系列的文章中我们主要将介绍一些常见的设计模式&#xff0c;主要是我在看Android源码中发现用到的一些设计模式。本篇文章将主要…...

数据通信——应用层(DHCP的原理与配置)

引言 假如我们的网络中有N台设备&#xff0c;它们都要设置IP地址&#xff0c;如果人工去一个个配置不仅不方便管理还很麻烦。因此我们用DHCP来自动分配地址。 一&#xff0c;系统的启动流程 不仅是计算机、很多网络设备的启动流程如下&#xff1a; 设备上电后&#xff0c;硬件…...

力扣151.反转字符串中的单词

原题链接&#xff1a;力扣151.反转字符串中的单词 全代码&#xff1a; 需要复刷 class Solution { public:void reverse(string& s, int start, int end){ //翻转&#xff0c;区间写法&#xff1a;左闭右闭 []for (int i start, j end; i < j; i, j--) {swap(s[i],…...

vim三种模式,文本操作(操作字符/光标,列出行号可视化块模式/多文件查看)

目录 vim--文本编辑器 功能 基本概念 命令/默认模式 插入模式 底行模式 文本操作 引入 移动光标位置 删除字符 -- x/dd 复制/粘贴字符 -- yw/yyp 替换文本 -- r / %s 底行模式 全局替换 -- /g 撤销操作 -- u / ctrlr 修改字符 -- cw 示例 跳行 -- ctrlg 底行…...

jquery控制easyui中combobox、textbox显示隐藏

//combobox下拉框 $("#下拉框id.combo").hide();//textbox输入框 $("#输入框id.textbox").hide(); 参考网址&#xff1a; https://blog.csdn.net/Coldmood/article/details/128279727...

Android拖放startDragAndDrop拖拽onDrawShadow静态添加xml布局View,Kotlin(4)

Android拖放startDragAndDrop拖拽onDrawShadow静态添加xml布局View&#xff0c;Kotlin&#xff08;4&#xff09; import android.content.ClipData import android.graphics.Canvas import android.graphics.Point import android.os.Bundle import android.util.Log import a…...

Servlet 初始化参数(web.xml和@WebServlet)

1、通过web.xml方式 <?xml version"1.0" encoding"UTF-8"?> <web-app xmlns"http://xmlns.jcp.org/xml/ns/javaee"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http://xmlns.jcp.org/xm…...

shell_62.shell脚本生成一个标准的 SQL INSERT 语句

无论是将文件读入脚本&#xff0c;还是将数据从脚本输出到文件&#xff0c;都会用到文件重定向&#xff0c;这是一种很 常见的操作。本节中的示例脚本两种功能皆有。它会读取 CSV 格式的数据文件&#xff0c;输出 SQL INSERT 语句&#xff0c;并将数据插入数据库。 shell 脚本使…...

利用最小二乘法找圆心和半径

#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …...

手游刚开服就被攻击怎么办?如何防御DDoS?

开服初期是手游最脆弱的阶段&#xff0c;极易成为DDoS攻击的目标。一旦遭遇攻击&#xff0c;可能导致服务器瘫痪、玩家流失&#xff0c;甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案&#xff0c;帮助快速应对并构建长期防护体系。 一、遭遇攻击的紧急应…...

黑马Mybatis

Mybatis 表现层&#xff1a;页面展示 业务层&#xff1a;逻辑处理 持久层&#xff1a;持久数据化保存 在这里插入图片描述 Mybatis快速入门 ![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/6501c2109c4442118ceb6014725e48e4.png //logback.xml <?xml ver…...

vue3 字体颜色设置的多种方式

在Vue 3中设置字体颜色可以通过多种方式实现&#xff0c;这取决于你是想在组件内部直接设置&#xff0c;还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法&#xff1a; 1. 内联样式 你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...

【算法训练营Day07】字符串part1

文章目录 反转字符串反转字符串II替换数字 反转字符串 题目链接&#xff1a;344. 反转字符串 双指针法&#xff0c;两个指针的元素直接调转即可 class Solution {public void reverseString(char[] s) {int head 0;int end s.length - 1;while(head < end) {char temp …...

Axios请求超时重发机制

Axios 超时重新请求实现方案 在 Axios 中实现超时重新请求可以通过以下几种方式&#xff1a; 1. 使用拦截器实现自动重试 import axios from axios;// 创建axios实例 const instance axios.create();// 设置超时时间 instance.defaults.timeout 5000;// 最大重试次数 cons…...

拉力测试cuda pytorch 把 4070显卡拉满

import torch import timedef stress_test_gpu(matrix_size16384, duration300):"""对GPU进行压力测试&#xff0c;通过持续的矩阵乘法来最大化GPU利用率参数:matrix_size: 矩阵维度大小&#xff0c;增大可提高计算复杂度duration: 测试持续时间&#xff08;秒&…...

css3笔记 (1) 自用

outline: none 用于移除元素获得焦点时默认的轮廓线 broder:0 用于移除边框 font-size&#xff1a;0 用于设置字体不显示 list-style: none 消除<li> 标签默认样式 margin: xx auto 版心居中 width:100% 通栏 vertical-align 作用于行内元素 / 表格单元格&#xff…...

AspectJ 在 Android 中的完整使用指南

一、环境配置&#xff08;Gradle 7.0 适配&#xff09; 1. 项目级 build.gradle // 注意&#xff1a;沪江插件已停更&#xff0c;推荐官方兼容方案 buildscript {dependencies {classpath org.aspectj:aspectjtools:1.9.9.1 // AspectJ 工具} } 2. 模块级 build.gradle plu…...

Mysql中select查询语句的执行过程

目录 1、介绍 1.1、组件介绍 1.2、Sql执行顺序 2、执行流程 2.1. 连接与认证 2.2. 查询缓存 2.3. 语法解析&#xff08;Parser&#xff09; 2.4、执行sql 1. 预处理&#xff08;Preprocessor&#xff09; 2. 查询优化器&#xff08;Optimizer&#xff09; 3. 执行器…...