树形结构数据扁平化js方法

news2024/11/27 8:21:18

最近在公司项目中遇到树形结构数据,在进行遍历查找指定的数据的时候一搬进行递归调用的查询,因为递归是效率很慢的方式,尤其是在数据量特别大的时候是及其浪费性能,所以我想了一个树形结构扁平化的方法,代码如下:

/**
 *
 * @param {Array} arrs 树形数据
 * @param {string} childs 树形数据子数据的属性名,常用'children'
 * @param {Array} attrArr 需要提取的公共属性数组(默认是除了childs的全部属性)
 * @returns
 */
const flatTree = (arrs,childs,attrArr) => {
  let attrList = [];
  if(!Array.isArray(arrs)&&!arrs.length)return [];
  if(typeof childs !== 'string')return [];
  if(!Array.isArray(attrArr)||Array.isArray(attrArr)&&!attrArr.length){
    attrList = Object.keys(arrs[0]);
    attrList.splice(attrList.indexOf(childs), 1);
  }else{
    attrList = attrArr;
  }
  let list = [];
  const getObj = (arr)=>{
    arr.forEach(function(row){
      let obj = {};
      attrList.forEach(item=>{
        obj[item] = row[item];
      });
      list.push(obj);
      if(row[childs]){
        getObj(row[childs]);
      }
    })
    return list;
  }
  return getObj(arrs);
}

示例数据

const list = [
                {
                    name: 'name1',
                    code: 'code1',
                    children: [
                        {
                            name: 'name2',
                            code: 'code2',
                            children: [
                                {
                                    name: 'name2-1',
                                    code: 'code2-1',
                                    children: [
                                        {
                                            name: 'name2-1-1',
                                            code: 'code2-1-1',
                                            children: [
                                                {
                                                    name: 'name2-1-1-1',
                                                    code: 'code2-1-1-1',

                                                }
                                            ]
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            name: 'name3',
                            code: 'code3',
                            children: [
                                {
                                    name: 'name3-1',
                                    code: 'code3-1',
                                    children: [
                                        {
                                            name: 'name3-1-1',
                                            code: 'code3-1-1',
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            name: 'name4',
                            code: 'code4',
                            children: [
                                {
                                    name: 'name4-1',
                                    code: 'code4-1',
                                    children: [
                                        {
                                            name: 'name4-1-1',
                                            code: 'code4-1-1',
                                        }
                                    ]
                                }
                            ]
                        }
                    ]
                }
            ]

调用方法

const handletest = () => {
            let data = this.extractTree(this.list, 'children', ['name', 'code'])
            console.log(data);
        }

结果
在这里插入图片描述

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

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

相关文章

Java面向对象程序设计实验报告(实验五 接口的练习)

✨作者:命运之光 ✨专栏:Java面向对象程序设计实验报告 ​ 目录 ✨一、需求设计 ✨二、概要设计 ✨三、详细设计 ✨四、调试结果 ✨五、测试结果 ✨附录:源程序代码(带注释) demo5类 Instrument类 Piano类 …

SpringSecurity入门

SpringSecurity 为什么要有SpringSecurity?SpringSecurity入门案例SpringSecurity基本原理SpringSecurity两个重要接口 SpringSecurity-web权限方案认证整合数据库 为什么要有SpringSecurity? 正如你可能知道的关于安全方面的两个主要区域是“认证”和“…

Linux:如何在虚拟机中装配JDK 与Tomcat服务器?【2023最新版】

Linux系统版本:centos 7.5 x64位 VMware版本: VMware Workstation Pro 16 Xshell工具版本:Xshell 7 (for home and free) Xftp工具版本:Xftp 7 (for home and free) 文章目录 一、如…

chatgpt赋能Python-pycharm_python版本切换

Pycharm Python版本切换指南 作为广受欢迎的Python IDE之一,Pycharm 提供了快捷的Python版本切换功能以适应不同的项目需求。本文将为您介绍如何在Pycharm 中进行Python版本切换,并解答一些与版本兼容性相关的常见问题。 如何在Pycharm中进行Python版本…

E6—4路GTX实现40G光纤通信2023-05-17

1.场景 从发送端(一块硬件板卡)通过40G QSFP接光纤连接到接收端(另一块硬件板卡),实现从数据的发送与接收。连接如下,官方的example design即可实现这一功能,因此直接使用官方的代码即可。 2.硬…

【Redis】聊一下RDB持久化机制

上一篇文章中,AOF虽然可以通过重写机制减少AOF文件的大小,但是AOF数据恢复的时候依然是一个很耗费时间的操作,那么也就是不能够快速的进行数据的恢复,RDB正好可以解决这个问题。 RDB RDB(Redis 数据库)&a…

深度学习用于医学预后-第二课第四周5-10节-为个体患者制定风险评估模型

文章目录 相对风险按风险对患者进行排序个体与基线风险吸烟者与不吸烟者年龄对风险的影响 在本课中,您将学习 Cox 比例风险模型(Cox Proportional Hazards Model)。您将了解 Cox 模型如何考虑患者变量来比较不同患者的风险,使用他们的患者概况。 但到目前…

“出圈”警博会,欧科云链推动链上合规监管进程

5月13日,在由公安部主办的第11届中国国际警用装备博览会(下简称“警博会”)上,欧科云链接受中国警察网邀请,展开了“链上天眼科技助警”成果分享会,分享欧科云链持续创新应用区块链技术助力智慧警务的成果。…

chatgpt赋能Python-pandas_错位相减

Pandas:错位相减的重要性 如果你使用pandas进行数据处理,在一些数据分析的场景中你必须要逐行遍历并做一些数学计算,譬如你想要计算数据集中的同一列中相邻行之间的差异或“错位相减”以获得新的数据列。这在分析股票价格、交易和其他时间序…

nodejs 框架选型express koa egg midwayjs nestjs 对比

最近要做个开源项目,又要写node 工程,之前用的是koa 框架,最近看到了nestjs egg midwayjs 等框架一时间难以抉择。 人工智能的答案 文心一言 midwayjs 还写错了,感觉的很少,最后总结等于白说各有千秋。 chatgpt 好…

【Linux】7. 进程概念

在进程的学习之前首先需要理解并掌握冯诺依曼体系结构及操作系统的相关概念 1. 冯诺依曼体系结构 最终我们得到的结论是: 在数据层面上 CPU不与外部设备进行交互,而是直接和内存交互所有的外部设备需要数据载入,只能载入到内存中。数据从内…

相见恨晚的Matlab编程小技巧(3)-程序运行太慢了咋解决——合理使用循环语句(1)

相信大家在使用matlab时候经常会收到程序运行太慢的困扰,当程序比较复杂时,常常需要很长时间等待。我有个朋友就是这样,每次debug都要很长时间,等着的时候就想耍会手机,结果耍完一抬头发现程序运行结束了,但…

利用废旧手机搭建一台属于自己的服务器

1. Termux —— 手机终端模拟器App 1.1 使用F-Droid应用商店安装Termux # F-Droid 下载地址:https://f-droid.org/packages/com.termux/ 1.2 使用Termux安装环境 在手机上打卡Termux软件(操作很不方便),后面介绍使用ssh服务通过…

基于ARIMA-LSTM组合模型的预测方法研究(Python代码实现)

💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势:🌞🌞🌞博客内容尽量做到思维缜密,逻辑清晰,为了方便读者。 ⛳️座右铭&a…

Vector - CAPL - CANoe DBC消息相关自动化_02

目录 GetMessageID -- 获取报文ID​编辑 代码示例 GetMessageName -- 获取报文名称 代码示例 getNextCANdbFilename -- 获取指定位置数据库文件命名 代码示例 getNextCANdbName -- 获取指定数据库的名称 代码示例 setSignalStartValues -- 设置目标信号初始值 代码示例…

计算机网络知识点大全

文章目录 1 计算机网络概述1.1.1 概念、组成、功能和分类1.1.2 标准化工作及相关组织1.1.3 速率相关的性能指标1.1.4 时延、时延带宽积、往返时间RTT、利用率1.2.1 分层结构、接口、协议、服务1.2.2 OSI参考模型1.2.4 TCP/IP与五层参考模型 第一章知识大纲2.物理层2.1 物理层基…

Docker实用篇

文章目录 Docker实用篇0.学习目标1.初识Docker1.1.什么是Docker1.1.1.应用部署的环境问题1.1.2.Docker解决依赖兼容问题1.1.3.Docker解决操作系统环境差异1.1.4.小结 1.2.Docker和虚拟机的区别1.3.Docker架构1.3.1.镜像和容器1.3.2.DockerHub1.3.3.Docker架构1.3.4.小结 1.4.安…

vue3的push问题

今天在处理动态数据时,使用push方法像数组中添加数据,会导致数组中所有参数都发生变化,解决方法可以搜到很多,这里使用的是如下的方法: 需要注意的是, 在push的时候需要newVal_value才能获取到深拷贝的值

常见的两种通信方式

引言 随着后端服务的发展,业务难度增加;单体的后端服务逐渐满足不了快速迭代,敏捷开发的节奏,在这样的背景下,分布式系统架构思想逐渐发展,并流行起来;在微服务思想下,将原有复杂的…

【c语言】文件的基本操作

创作不易&#xff0c;本篇文章如果帮助到了你&#xff0c;还请点赞 关注支持一下♡>&#x16966;<)!! 主页专栏有更多知识&#xff0c;如有疑问欢迎大家指正讨论&#xff0c;共同进步&#xff01; &#x1f525;c语言系列专栏&#xff1a;c语言之路重点知识整合 &#x…