JS: 数组和树的相互转换

最新推荐文章于 2024-08-11 22:08:10 发布
最新推荐文章于 2024-08-11 22:08:10 发布
阅读量2.7k 收藏 3
点赞数
分类专栏： 前端 js 文章标签： javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_47135993/article/details/125957048
版权
前端 同时被 2 个专栏收录
29 篇文章 3 订阅
订阅专栏
js
18 篇文章 4 订阅
订阅专栏
这篇博客介绍了如何将数组转换为树形结构以及将树形结构转换回数组。通过`arrayToTree`函数实现了从数组到树的转换，而`tree2arr`函数则用于将树结构还原为数组。这些方法在数据组织和遍历中非常实用。
摘要由CSDN通过智能技术生成

一、数组转树

let arr = [{
            "categoryCode": "90000",
            "categoryCnName": "A1级别",
            "bdictCode": "111",
            "bdictDesc": "测试1",
            "bparentCode": "0",
            "validStatus": "1"
        }, {
            "categoryCode": "90000",
            "categoryCnName": "A1级别",
            "bdictCode": "222",
            "bdictDesc": "测试2",
            "bparentCode": "0",
            "validStatus": "1"
        }, {
            "categoryCode": "90000",
            "categoryCnName": "A1级别",
            "bdictCode": "333",
            "bdictDesc": "测试3",
            "bparentCode": "0",
            "validStatus": "1"
        }, {
            "categoryCode": "90000",
            "categoryCnName": "A1级别",
            "bdictCode": "444",
            "bdictDesc": "测试4",
            "bparentCode": "0",
            "validStatus": "1"
        }, {
            "categoryCode": "90000",
            "categoryCnName": "A1级别",
            "bdictCode": "555",
            "bdictDesc": "测试5",
            "bparentCode": "0",
            "validStatus": "1"
        }, {
            "categoryCode": "90000",
            "categoryCnName": "A1级别",
            "bdictCode": "DOCA",
            "bdictDesc": "测试6",
            "bparentCode": "0",
            "validStatus": "1"
        }, {
            "categoryCode": "90000",
            "categoryCnName": "A1级别",
            "bdictCode": "DOCA01",
            "bdictDesc": "测试7",
            "bparentCode": "DOCA",
            "validStatus": "1"
        }, {
            "categoryCode": "90000",
            "categoryCnName": "A1级别",
            "bdictCode": "DOCA0101",
            "bdictDesc": "测试8",
            "bparentCode": "DOCA01",
            "validStatus": "1"
        }, {
            "categoryCode": "90000",
            "categoryCnName": "A1级别",
            "bdictCode": "DOCA0102",
            "bdictDesc": "测试9",
            "bparentCode": "DOCA01",
            "validStatus": "1"
        }, {
            "categoryCode": "90000",
            "categoryCnName": "A1级别",
            "bdictCode": "DOCA0103",
            "bdictDesc": "测试10",
            "bparentCode": "DOCA01",
            "validStatus": "1"
        }, {
            "categoryCode": "90000",
            "categoryCnName": "A1级别",
            "bdictCode": "DOCA02",
            "bdictDesc": "测试11",
            "bparentCode": "DOCA",
            "validStatus": "1"
        }, {
            "categoryCode": "90000",
            "categoryCnName": "A1级别",
            "bdictCode": "DOCA03",
            "bdictDesc": "测试12",
            "bparentCode": "DOCA",
            "validStatus": "1"
        }, {
            "categoryCode": "90000",
            "categoryCnName": "A1级别",
            "bdictCode": "DOCA0301",
            "bdictDesc": "测试13",
            "bparentCode": "DOCA03",
            "validStatus": "1"
        }, {
            "categoryCode": "90000",
            "categoryCnName": "A1级别",
            "bdictCode": "DOCA0302",
            "bdictDesc": "测试14",
            "bparentCode": "DOCA03",
            "validStatus": "1"
        }, {
            "categoryCode": "90000",
            "categoryCnName": "A1级别",
            "bdictCode": "DOCA04",
            "bdictDesc": "测试15",
            "bparentCode": "DOCA",
            "validStatus": "1"
        }, {
            "categoryCode": "90000",
            "categoryCnName": "A1级别",
            "bdictCode": "DOCA05",
            "bdictDesc": "测试16",
            "bparentCode": "DOCA",
            "validStatus": "1"
        }, {
            "categoryCode": "90000",
            "categoryCnName": "A1级别",
            "bdictCode": "DOCA06",
            "bdictDesc": "测试17",
            "bparentCode": "DOCA",
            "validStatus": "1"
        }, {
            "categoryCode": "90000",
            "categoryCnName": "A1级别",
            "bdictCode": "DOCA07",
            "bdictDesc": "测试18",
            "bparentCode": "DOCA",
            "validStatus": "1"
        }, {
            "categoryCode": "90000",
            "categoryCnName": "A1级别",
            "bdictCode": "DOCA08",
            "bdictDesc": "测试19",
            "bparentCode": "DOCA",
            "validStatus": "1"
        }, {
            "categoryCode": "90000",
            "categoryCnName": "A1级别",
            "bdictCode": "DOCA09",
            "bdictDesc": "测试20",
            "bparentCode": "DOCA",
            "validStatus": "1"
        }, {
            "categoryCode": "90000",
            "categoryCnName": "A1级别",
            "bdictCode": "DOCA10",
            "bdictDesc": "测试21",
            "bparentCode": "DOCA",
            "validStatus": "1"
        }, ]

        function arrayToTree(list, parentID) {
            const child = function(pareID) {
                //先定义一个数组，用于存储所查到的子元素
                const childs = [];
                //循环数组
                for (let i = 0; i < list.length; i++) {
                    //如果数组其中一项的bparentCode等于传入的，说明这一项是传入的子元素，把他push进数组，然后重复递归自己找该项的子元素
                    if (list[i].bparentCode === pareID) {
                        if (child(list[i].bdictCode).length > 0) {
                            list[i].children = child(list[i].bdictCode);
                        }
                        childs.push(list[i]);
                    }
                }
                //最后将查到的所有子元素返回
                return childs;
            };
            return child(parentID);
        }
        let res = arrayToTree(arr, '0')
        console.log(res);

二、树转数组

树转数组，实现的要点还是在于递归查找，定义一个空数组，去接收没有children属性的每一项

        let treeRes = [];

        function tree2arr(res) {
            res.forEach(item => {
                if (!item.children) {
                    treeRes.push(item)
                } else {
                    tree2arr(item.children)
                }
            })
        }
        // 此处的res取的是上边的数组转树的结果
        tree2arr(res)
        console.log(treeRes);

你吃香蕉吗？
关注
专栏目录
数组转换为树、树转换为数组
m0_38066007的博客
05-24 452
定义一个 `convert` 函数，将以下数组转换为树结构 const arr = [ { id: 1, name: '部门A', parentId: 0 }, // 0 代表顶级节点，无父节点 { id: 2, name: '部门B', parentId: 1 }, { id: 3, name: '部门C', parentId: 1 }, { id: 4, name: '部门D', parentId: 2 }, { id: 5, name: '部门E', par
JS实现数组与树结构的相互转换
少吃点肉的博客
01-15 1492
1.数组转换为数结构 let data= [ { id: 2, name: '部门B', parentId: 0 }, { id: 3, name: '部门C', parentId: 1 }, { id: 1, name: '部门A', parentId: 2 }, { id: 4, name: '部门D', parentId: 1 }, { id: 5, name: '部门E', p
js数组转换成tree结构数组
08-22
js数组转换成tree结构数组算法
JS【详解】数组转树 vs 树转数组
最新发布
朝阳39的博客
08-11 206
【代码】JS【详解】数组转树 vs 树转数组。
js 数组转树，树转数组
csdn_wwp的博客
07-20 348
js 数组转树，树转数组。
JavaScript数组和树互相转换
小绵杨
10-11 1015
先把数据转成Map去存储，之后遍历的同时借助对象的引用，直接从Map找对应的数据做存储。在前端业务场景中，将数组转为树型数据结构说经常会遇到的需求。相比于递归，非递归具有更高的性能。
js-数组转树型结构
weixin_70134200的博客
05-19 1698
解释了数组转树型结构原理、应用场景和实现代码
js数组与字符串的相互转换方法
10-25
下面将详细介绍JavaScript中数组与字符串相互转换的具体方法。 首先，我们来讨论如何将数组转换为字符串。在JavaScript中，最常用的数组转字符串的方法是使用Array对象的join()方法。join()方法可以将数组中的所有...
一维数组和树形结构相互转换
yangpan2014的博客
07-09 6174
昨晚做了一道笔试题，将一维数组转化为树结构，感觉没写好，今天重新整理一下 数据结构如下： let dataArr = [ { "node_id": 1, "parent_id": 0, "name": '一级1.0.1' }, { "node_id"...
js最简单的 数组转树
知无涯
01-15 6555
一开始我以为数组转树是一个很复杂的事，因为你可能要写一个在树中寻找某个父节点的方法，还要判断哪个是最顶级节点。 但是利用下面这个方法，化繁为简。真是牛P。 最核心的是map[ownercn].children.push(item) 这句 ，这里的ownercn可以看做是父节点的id。获取父节点idownercn后，使用map[ownercn] 获取父节点。将当前节点push到父节点中。完美。 这种方法就是有点占内存。毕竟你还要维护一个map。 const result = [] const map = {}
js数组和树的相互转化
sinat_36048532的博客
11-05 380
var list = [ {id: 0, pid: "", name: "北京"}, {id: 1, pid: 0, name: "昌平"}, {id: 2, pid: 1, name: "顺安"}, {id: 3, pid: 1, name: "哈哈"}, ] console.log(toTree(list)); function ToTree(arr){ return dfs(arr, ""); } function dfs(arr, local_id){
js数组和树互转
ww_1069955的博客
08-04 248
1. 数组转树 const data = [ {id:"01", name: "张大大", pid:"", job: "项目经理"}, {id:"02", name: "小亮", pid:"01", job: "产品leader"}, {id:"03", name: "小美", pid:"01", job: "UIleader"}, {id:"04", name: "老马", pid:"01", job: "技术leader"}, {id:"05", name: "老王", pid:"
js数组转成树
qsya的博客
03-06 669
面试题 解决方法 /** * 1.先根据parent_ind分组，没有parent_ind的也会生成key为undefined的一组，将作为第一层 * 2.定义formatTree方法，参数为分好的组和一个父pid,如果组中没有pid则放反回{} * 3.找到的组后再次循环，并把name作为父pid去递归查找子节点 */ let insustry_list = [{ "parent_ind": "女装", "name": "连衣裙" }, { "name": "女装" }, { "parent_i
【进阶篇】js数组转换为树结构函数
风中追风
12-18 2480
我们常常在做后台管理系统的时候 需要对数据进行组装成一个树装结构，这里特地将此方法进行封装： let data = [ { id: 1, text: 't11', parentId: 0 }, { id: 2, text: 't11', parentId: 0 }, { id: 3, text: 't11', parentId: 1 }, { id: 4, te...
js 数组转树
qq_40285497的博客
07-22 525
转载自等风来的博客：https://www.cnblogs.com/mengff/p/13142128.html 数组结构如下 const arr = [ {id:1, parentId: null, name: 'a'}, {id:2, parentId: null, name: 'b'}, {id:3, parentId: 1, name: 'c'}, {id:4, parentId: 2, name: 'd'}, {id:5, parentId: 1, n
JS数组转树
yaoxinying101的博客
05-30 58
JS数组转树 第一种方法:使用map映射。第二种方法:累加+递归。
JS数组和树形结构的相互转换
weixin_52368011的博客
06-09 1207
js数组和树形结构的相互转换
JS 数组转树状结构
m0_59128154的博客
08-05 5180
JS 数组转树状结构 需求: 将如下数组转成树状结构 // 需转化数组示例 data = [ { id: '01', lable: '项目经理', pid: '' }, { id: '02', lable: '产品leader', pid: '01' }, { id: '03', lable: 'UIleader', pid: '01' }, { id: '04', lable: '技术leader', pid: '01' }, { id: '05', lable: '
数组和集合怎么相互转换
07-09
在许多编程语言中，数组和集合之间可以进行相互转换。下面是一些常见的转换方法： 1. 数组转集合： - Java: 使用Arrays类的静态方法`asList()`将数组转换为List，然后可以使用List接口的实现类如ArrayList构造一个...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值