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 的相关文章

  • JavaScript onTouch 不工作

    谁能告诉我为什么这个 onTouch 处理程序没有触发 var myDiv document getElementById existingContent var myButton a href log out a myDiv append
  • Android 设备上的 PhoneGap 蓝牙插件

    我一直在尝试让 PhoneGap 工作的蓝牙插件 但我似乎不知道哪里出了问题 首先 我的测试设备是 Galaxy S3 GT 19305T 应用程序是使用PhoneGap CLI http docs phonegap com en 3 0
  • TypeError: props.render 不是一个函数(React hook 形式)

    我将方法作为我用react hook form制作的形式的道具传递 当从react hook form添加控制器时 它给了我 TypeError props render不是一个函数 我在网上找不到任何解决方案 因此感谢任何帮助 impor
  • 在 Wordpress 站点中进行 AJAX 调用时出现问题

    我在使用 Wordpress 站点功能的 AJAX 部分时遇到了一些问题 该功能接受在表单上输入的邮政编码 使用 PHP 函数来查找邮政编码是否引用特定位置并返回到该位置的永久链接 我的第一个问题是关于我构建的表单 现在我的表单操作是空白的
  • 如何监听 jQuery AJAX 请求?

    以下两种实现 ajaxRequest 1 2 的方法应该是等效的 话说回来 为什么验证回调已执行的单元测试 3 在 1 中成功而在 2 中失败 我应该如何重写测试 3 来监视 2 中的成功回调 如果我尝试stub jQuery ajax使用
  • Node.js:如何在检索数据(块)时关闭响应/请求

    我正在用 node js 构建一个应用程序 它加载多个页面并分析内容 因为 node js 发送块 所以我可以分析这些块 如果一个块包含例如索引 nofollow 我想关闭该连接并继续其余部分 var host example com to
  • 音频 blob 的 URL.createObjectURL 在 Firefox 中给出 TypeError

    我正在尝试从创建的音频 blob 创建对象 URLgetUserMedia 该代码在 Chrome 中可以运行 但在 Firefox 中存在问题 错误 当我打电话时stopAudioRecorder 它停在audio player src
  • 使用 KnockoutJs 映射插件进行递归模板化

    我正在尝试使用以下方法在树上进行递归模板化ko映射 插入 http knockoutjs com documentation plugins mapping html 但我无法渲染它 除非我定义separate每个级别的模板 在以下情况下
  • 将div设置为隐藏,延时后可见

    我试图在 X 时间后 也许甚至在随机时间之后 但现在我们只做固定时间 在黑色背景上出现一个黄色方块 function initialSetup if document getElementById yellow null document
  • Babel 7 Jest Core JS“TypeError:wks不是函数”

    将我的项目升级到 Babel 7 后 通过 Jest 运行测试会抛出以下错误 测试在 Babel 6 中运行没有任何问题 但在 Babel 7 中失败并出现以下错误 TypeError wks is not a function at Ob
  • 如何在react-native中获取Text组件的onPress值

    我是一名新的 React Native 开发人员 我想使用 onPress 获取 Text 组件的值并将其传递给函数
  • 如何使输入字段和提交按钮变灰

    我想变灰这两件事 http doorsplit heroku com 歌曲输入字段和提交按钮 直到用户输入艺术家 有没有一种简单的方法可以通过 JQuery 来做到这一点 艺术家输入字段的id是 request artist 你可以这样做
  • 提交表单并重定向页面

    我在 SO 上看到了很多与此相关的其他问题 但没有一个对我有用 我正在尝试提交POST表单 然后将用户重定向到另一个页面 但我无法同时实现这两种情况 我可以获取重定向或帖子 但不能同时获取两者 这是我现在所拥有的
  • Javascript 数组到 VBScript

    我有一个使用 Javascript 构建的对象数组 我需要使用 VBScript 读取它 如下例所示 我找不到在 VbScript 代码中循环遍历数组的方法myArray object 这个例子是我的问题的简化 我无法更改页面的默认语言 这
  • 为什么在 Internet Explorer 中访问 localStorage 对象会引发错误?

    我正在解决一个客户端问题 Modernizr 意外地没有检测到对localStorageInternet Explorer 9 中的对象 我的页面正确使用 HTML 5 文档类型 并且开发人员工具报告该页面具有 IE9 的浏览器模式和 IE
  • HTML 离线应用程序缓存,列出下载的文件

    作为我正在构建的离线 Web 应用程序的加载屏幕的一部分 使用缓存清单 http developer apple com library safari documentation iPhone Conceptual SafariJSData
  • 为什么我不能在 AngularJS 中使用 data-* 作为指令的属性名称?

    On the t他的笨蛋 http plnkr co edit l3KoY3 p preview您可以注意到属性名称模式的奇怪行为data 在指令中 电话 Test of data named attribute br
  • JQuery 图像上传不适用于未来的活动

    我希望我的用户可以通过帖子上传图像 因此 每个回复表单都有一个上传表单 用户可以通过单击上传按钮上传图像 然后单击提交来提交帖子 现在我的上传表单可以上传第一个回复的图像 但第二个回复的上传不起作用 我的提交过程 Ajax 在 php 提交
  • 如何在 pg-promise 中设置模式

    我正在搜索的文档pg 承诺 https github com vitaly t pg promise特别是在创建客户端时 但我无法找到设置连接中使用的默认架构的选项 它始终使用public架构 我该如何设置 通常 为数据库或角色设置默认架构
  • 使用 Ajax 请求作为源数据的 Jquery 自动完成搜索

    我想做的事 我想使用 jquery 自动完成函数创建一个输入文本字段 该函数从跨域curl 请求获取源数据 结果应该与此示例完全相同 CSS 在这里并不重要 http abload de img jquerydblf5 png http a

随机推荐

  • 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 结构 或者我们并不需要层