JavaScript 扁平化数组转成Tree

2023-11-11

        有时候我们得到的数据结构并不是想要的,这个时候就需要对得到的数据进行处理了。比如,我们拿到的是扁平化的数组, 但我们要应用在 tree 树形组件或级联选择器组件中,这样的组件要求数据结构是具有层级递进关系的 tree 结构,或者我们并不需要层级递进的数据,那就要把它做扁平化处理了。

 扁平化数组 => Tree

        我们得到的数据是这个样子的,没有层级关系

var list = [
    {'name':'基本概括','pid':1,'id':11},
    {'name':'基本介绍','pid':11,'id':111},
    {'name':'基本经理','pid':111,'id':1111},
    {'name':'基本回报','pid':1,'id':12},
    {'name':'业绩表现','pid':12,'id':112}
]

        但我们需要的数据是这样的

[
    {
        "name": "基本概括",
        "pid": 1,
        "id": 11,
        "children": [
            {
                "name": "基本介绍",
                "pid": 11,
                "id": 111,
                "children": [
                    {
                        "name": "基本经理",
                        "pid": 111,
                        "id": 1111
                    }
                ]
            }
        ]
    },
    {
        "name": "基本回报",
        "pid": 1,
        "id": 12,
        "children": [
            {
                "name": "业绩表现",
                "pid": 12,
                "id": 112
            }
        ]
    }
]

         函数处理

function arrayToTree(list){
    const treeData = [];
    // forEach 遍历数组
    list.forEach(item => {
        // 根节点 直接push
        if(item.pid == 1) {
            treeData.push(item);
        }
        // pid等于id的属于它的子节点 放到children变量里
        const children = list.filter(data => data.pid == item.id);
        // 到达叶子节点后 return
        if(!children.length) return;
        // 把children放到对于的父节点里
        item.children = children;
    })
    return treeData;
}
var list = [
    {'name':'基本概括','pid':1,'id':11},
    {'name':'基本介绍','pid':11,'id':111},
    {'name':'基本经理','pid':111,'id':1111},
    {'name':'基本回报','pid':1,'id':12},
    {'name':'业绩表现','pid':12,'id':112}
]
console.log(arrayToTree(list));

 

数组扁平化

        1. ES6扩展运算符

var arr = [1,2,[3,4,5,[[6,7],8],9]];
    function flatten (arr) {
        while(arr.some(item => Array.isArray(item))){
            arr=[].concat(...arr);
         }
                return arr;
    }
console.log(flatten(arr));

        2. 递归

var arr = [1,2,[3,4,5,[[6,7],8],9]];
    function flatten(arr) {
    let result = [];
        arr.forEach((item, i, arr) => {
            if (Array.isArray(item)) {
                result = result.concat(flatten(item));
            } else {
                result.push(arr[i])
            }
        })
        return result;
    };
console.log(flatten(arr));

好啦,没啦,拜拜!

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

JavaScript 扁平化数组转成Tree 的相关文章

随机推荐

  • Web存储

    1 Web存储 locationStorage 用于永久性保存数据 sessionStorage 用于临时存储数据 关闭页面时 数据丢失 用法 两个对象用法一致 setItem key value 存储数据 getItem key 取数据
  • Java如何制作图片输入验证码

    Java如何制作图片输入验证码 简介 验证码 CAPTCHA 是 Completely Automated Public Turing test to tell Computers and Humans Apart 全自动区分计算机和人类的
  • 树莓派4b串口设置教程(适用于新手)

    树莓派4b串口设置教程 适用于新手 树莓派4b串口配置 适用于新手 本人也是刚刚学习了树莓派 考虑到目前入坑的像我一样的小白比较多 所以我整理了一下前辈们的各种经验 准备针对树莓派4b这款最新的产品 做一个比较详细简单的串口配置介绍 1 基
  • 似然和概率的透彻解析 ------- 最大似然估计(Maximum likelihood estimation)

    似然与概率 在统计学中 似然函数 likelihood function 通常简写为likelihood 似然 是一个非常重要的内容 在非正式场合似然和概率 Probability 几乎是一对同义词 但是在统计学中似然和概率却是两个不同的概
  • Cocos Creator Android打包 apk

    文章目录 1 引言 2 配置打包环境 2 1 下载Java SDK JDK 2 2 下载NDK 3 配置原生发布环境路径 4 打包发布原生平台 5 构建原生工程 6 通过编译器去编译和运行 7 总述 8 结束语 1 引言 今天事情不是很多抽
  • el-select与el-tree结合使用,实现select框下拉使用树形结构选择数据

    使用el select与el tree 实现如下效果 代码如下 注意点 搜索input框的代码一点放在option上面 不要放在option里面 否则一点击搜索框 下拉框就会收起来 不能使用
  • 05-JVM内存分配机制深度剖析

    上一篇 04 JVM对象创建深度剖析 1 对象栈上分配 我们通过JVM内存分配可以知道JAVA中的对象都是在堆上进行分配 当对象没有被引用的时候 需要依靠GC进行回收内存 如果对象数量较多的时候 会给GC带来较大压力 也间接影响了应用的性能
  • react入门必看攻略

    一 react是什么 react是一个用于构建用户界面的 JavaScript 库 二 使用步骤 安装react 1 安装脚手架 npm i create react app g 2 创建项目 create react app 项目名 3
  • JavaScript 全局

    解释 JavaScript 全局属性和方法可用于创建Javascript对象 JavaScript 全局属性 属性 描述 Infinity 代表正的无穷大的数值 NaN 指示某个值是不是数字值 undefined 指示未定义的值 JavaS
  • 宝塔面板解决跨域

    1 找到宝塔面板配置nginx文件的地方 2 增加如下代码 add header Access Control Allow Origin add header Access Control Allow Methods POST PUT GE
  • 使用git查看修改记录

    查看文件中每行代码的最近一次修改人 git blame file name git blame
  • 判断能否被3,5,7整除

    输入一个整数 判断它能否被3 5 7整除 并输出以下信息 1 能同时被3 5 7整除 直接输出3 5 7 每个数中间一个空格 2 能被其中两个数整除 输出两个数 小的在前 大的在后 例如 3 5或者 3 7或者5 7 中间用空格分隔 3 能
  • 简单的Arima模型自动最优拟合与预测

    昨天用R折腾了一个简单的时间序列数据Arima自动拟合与预测 过程不复杂 但由于用得不多 为了防止忘记 撰文记录 打开R 安装一个叫做 Forecast 的包 每次开启R后 使用之前用 library forecast 加载该包 这里我用传
  • pickle.load,pickle.dump构建Coco数据集labels的pickle文件

    1 效果图 write pickle coco classes pickle done loading coco classes pickle person bicycle car motorcycle airplane bus train
  • OSI七层模型,报文数据包帧详解,tcp三次握手与四次挥手说明,WireShark抓包分析

    目录 浅谈OSI参考模型 七层模型 什么是OSI参考模型 OSI参考模型的划分 OSI模型与TCP IP模型的比较 七层详解 工作流程 TCP IP协议栈 简介 通用协议栈描述 报文 数据报 报文段 数据包 帧的概念 tcp三次握手与四次挥
  • Callable接口详解

    Callable接口详解 Callable 返回结果并且可能抛出异常的任务 优点 可以获得任务执行返回值 通过与Future的结合 可以实现利用Future来跟踪异步计算的结果 Runnable和Callable的区别 1 Callable
  • pg_dump实例详解

    本文转自 http blog chinaunix net uid 354915 id 3504632 html 一 pg dump的用法 数据库的导入导出是最常用的功能之一 每种数据库都提供有这方面的工具 例如Oracle的exp imp
  • 密封类(sealed class)

    密封类 使用关键字 sealed 密封类里面可以有若干个子类 这些子类如果要继承密封类 则必须和密封类在同一个文件里 sealed class LicenseStatus2 单例继承密封类 object UnQualified Licens
  • 转-如何绘制业务流程图(二)

    转自 http blog jobbole com 22509 本来写完上篇 我发现没有太多必要单纯讨论这一部分内容 因为对于很多人来讲 缺的不是具体的做法 而是做这件事情的意义以及目标性的明确 一旦对这件事情的意义和目标有深刻认同 那自然会
  • JavaScript 扁平化数组转成Tree

    有时候我们得到的数据结构并不是想要的 这个时候就需要对得到的数据进行处理了 比如 我们拿到的是扁平化的数组 但我们要应用在 tree 树形组件或级联选择器组件中 这样的组件要求数据结构是具有层级递进关系的 tree 结构 或者我们并不需要层