【Js】多层级对象数组转为树结构

最新推荐文章于 2022-09-27 13:57:19 发布
最新推荐文章于 2022-09-27 13:57:19 发布
阅读量1.4k 收藏 5
点赞数 2
CC 4.0 BY-SA版权
分类专栏： Javascript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/csdn_buildupeffect/article/details/115264310
本文介绍如何将多层级无序的对象数组转换为树结构。核心思路是通过`buildTree`函数递归查找具有指定`parentId`的子元素，并处理它们的子元素，适用于前端处理如权限路由、人员组织结构等场景。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

var arr = [
            {
   
   
                id: 1,
                name: "石家庄市",
                parentId: 2
            }, {
   
   
                id: 2,
                name: "河北省",
                parentId: 0
            },{
   
   
                id: 3,
                name:
最低0.47元/天 解锁文章

200万优质内容无限畅学
JavaScript将一层级对象数组转为children嵌套的三层级树状对象数组（多级树状分类）
coderYYY的博客
07-31 1772
有时候后端返回的数据不适合前端，我们就需要进行转换，比如我想用elementUI的级联选择器，而这个组件对数据格式有要求，本篇文章将介绍如何将一层级对象数组数据格式转为三层级嵌套children数组，JavaScript、Vue、小程序等都适用，使用情景为多级分类，嵌套数据。
JavaScript Build Tree Data Structure Using Array
DaviHao
05-10 1516
function Tree(name,parent,child){ this.name = name; this.parent = parent || ''; this.children = child || []; this.addNode = function (parent){ this.children = parent; } this.addChild = function (child
如何将后端传到前端的对象数组转化成树形结构的对象数组
qq_32034319的博客
09-25 1404
具体实现原理请参考：https://blog.youkuaiyun.com/w1418899532/article/details/90065633 一、问题描述 需要被转化的对象数组： this.state = { test : [ {id: 7, name: '快鱼', pid: 2}, {id: 8, name: '海澜之家', ...
leetcode **124. 二叉树中的最大路径和（2020.6.21）
Sophia_fez的博客
06-21 256
【题目】**124. 二叉树中的最大路径和 给定一个非空二叉树，返回其最大路径和。 本题中，路径被定义为一条从树中任意节点出发，达到任意节点的序列。该路径至少包含一个节点，且不一定经过根节点。 示例 1: 输入: [1,2,3] 1 / \ 2 3 输出: 6 示例 2: 输入: [-10,9,20,null,null,15,7] -10 / \ 9 20 / \ 15 7 输出: 42 【解题思路1】递归 主要是两种
js将数组里的多个对象实现树形结构
weixin_45131616的博客
03-25 285
var data: [ { id: 1, name: '系统管理', menuid: 1, childmenuid: 0, }, { id: 2, name:...
JS多级树结构写法
weixin_30886233的博客
03-28 214
效果： 一、布局： <div class="three_tree"> <div class="tree_title_cut"> <span>名称</span> <span>编码</span> <span>数据域</span> ...
扁平多层数据转树结构
achao的博客
04-25 665
传入数组格式 list = [ [dep1, dep2, dep3, dep4], [dep1, dep2, dep3, dep4], [dep1, dep2, dep3, dep4], …… ] 创建节点类 public class Node{ private Integer depth; private String name; private Integer parentId; private ArrayList<Node> children;
js代码-数组转化树形结构
07-15
3. 构建树结构：从根节点开始，根据节点的父ID在映射表中找到对应节点并添加到其子节点数组中。 三、实际代码实现 下面是一个简单的JavaScript函数，用于将数组转化为树形结构。假设数组中的每个元素都有`id`和`...
js代码-数组根据pid转为树形结构的数组
07-16
本案例中的"js代码-数组根据pid转为树形结构的数组"涉及到的就是将一个基于父级ID（PID）的扁平化数组转换为树形结构的数组。这种转换在构建组织结构、文件系统或者菜单导航等场景中非常常见。 首先，我们来理解...
JS面试编程题：用js写一个函数将父子层级结构的对象转化成树结构
熊米
06-04 308
用js写一个函数将父子层级结构的对象转化为树结构
js通过数组创建二叉树
Maximus_ckp的博客
06-01 1948
js通过数组生成二叉树
js插件---tree（多级文件）插件如何使用
weixin_33943347的博客
08-26 186
js插件---tree（多级文件）插件如何使用 一、总结 一句话总结：还是一般的引入js和css后js调用的方式， 只不过tree调用的时候必须设置一个 HTML 模板（就是调用的那段html代码，别的插件也算有） 还有写data数据的时候分清文件夹（type：'folder'）和文件（type：'item'）两种类型 1、tree插件的元素的两个项目是什么？ 文件夹（type：...
js将多维数组格式化展开成树状结构
RequesToGod的博客
12-28 772
js将多维数组格式化转换成树状结构 用js实现将二维数组格式化转换成树状结构。 eg:待转数组： var array1 = [ ["a", "aa", "aaa", "aaaa"], ["b", "bb", "bbb"], ["a", "ab", "aba"], ["a", "aa", "aab"] ] 目标数组： [{ "name" : "a", "child" : [ { "name" : "aa",
js实现无限层级树形数据结构（创新算法）
热门推荐
知行合一，跬步致远
09-22 4万+
由于做项目的需要，把一个线性数组转成树形数组，在网上查了很多文章，觉得他们写的太复杂了，于是自己写了一个，在折腾了一下午终于把它写出来啦（激动.gif），用两个filter过滤器就搞定了，代码简洁明了，数据结构小白都能看懂。 js代码：把扁平数据转成树形数据 function setTreeData(source){ let cloneData = JSON.parse(JSON.s...
JS 将一维数组转为树结构（tree）/改变树级结构为普通数组对象类型/ 树结构查询/树结构种通过id获取完整数据对象/给树结构加序号（Util）
qq_37899792的博客
10-31 313
/** * @Description: 全局公用方法 * @date 2019/10/11 */ (function (window) { let Util = {} Util.baseUrl = 'http://autobuild.jiguantong.com' Util.baseUrlPHP = 'http://autobuild.1357.cn' // Uti...
JavaScript中对于ip校验+将多层嵌套对象转层平级对象
weixin_45570133的博客
05-13 509
将多层嵌套对象转层平级对象 //将多层嵌套对象转层平级对象 // * @param {*} obj 待转换的对象 { key: 'flatObjectDeep', value: function flatObjectDeep(obj) { var flatObjec = {}; var copyObject = __.cloneDeep(obj); for (
#前端# 数组构成的对象类型的数据，转化为树形结构
qq_40608283的博客
03-31 962
前端需要一棵树，但是后端传来这种数据： 首先分析，有root根节点，和各种孩子节点的数组组成的对象。 主要用到对象的遍历方法，数组的遍历方法，对象属性添加。 解析思路： 1、首先找到根节点。 2、遍历对象找到根节点的子节点。 3、递归查找子节点的子节点。 4、形成一棵新的层级的树形结构。 代码实现： //找到根节点 appenddata(object) ...
Build Tree
qq_39861441的博客
05-24 479
#include <bits/stdc++.h> #define ll long long using namespace std; ll s[200010]; int nm[200010]; ll sum[200010]; ll n,m,p; ll multpow(ll a,ll b) { ll ans=0,tp=a; while(b) { ...
vue js数组对象转树形结构
weixin_53587375的博客
09-27 597
【代码】vue js数组对象转树形结构。
js 一维数组转为数结构
最新发布
09-01
### 回答1： 在 JavaScript 中，可以使用 map() 函数将一维数组转换为树形结构。首先，需要对数组元素进行处理，使其具有 id、parentId 等属性，然后遍历数组，将元素划分到合适的父节点下。代码示例如下： ``` function convertToTree(data) { let tree = []; let map = {}; data.forEach(function (item) { map[item.id] = item; }); data.forEach(function (item) { let parent = map[item.parentId]; if (parent) { (parent.children || (parent.children = [])).push(item); } else { tree.push(item); } }); return tree; } ``` ### 回答2： 将一维数组转为数据结构，可以考虑使用树的结构。树是一种非线性的数据结构，它由节点和边组成，每个节点可能有多个子节点，但只能有一个父节点。 我们可以将一维数组中的元素逐个添加到树的节点中。首先，创建一个根节点，将数组的第一个元素作为根节点的值。然后，遍历数组的剩余元素，对每个元素创建一个新的节点，并将其作为根节点的子节点。如果一个节点已经有子节点，就将新节点作为其子节点的子节点。重复此过程，直到遍历完整个数组。 通过这种方式，我们可以将一维数组转化为一个树结构。在树中，每个节点都对应数组中的一个元素，而节点的子节点对应数组中位于该元素后面的元素。可以通过遍历树的节点，获取到数组中的每个元素。 使用树结构可以更方便地组织、访问和操作一维数组中的元素。树提供了一种分层的结构，可以方便地进行查找、插入和删除操作。此外，树还可以用来表示具有层次关系的数据，比如文件系统或者组织架构。 总结来说，将一维数组转为树结构可以更好地组织和操作数组中的元素，提供更方便的数据访问方式。这种转化可以通过将数组的元素逐个添加到树的节点中来完成。 ### 回答3： 将一维数组转换为数据结构可以考虑使用树状结构。树状结构是一种非线性的数据结构，由节点和边组成，可以表示层级关系。在JS中，可以使用对象来表示树状结构。 首先，可以创建一个空对象作为根节点。然后，遍历一维数组，将数组中的每个元素作为节点添加到树中。可以使用循环来遍历数组，对于每个元素，可以判断该节点是否存在，如果不存在则创建一个新的节点对象，并将其添加到上层节点的children属性中。如果节点已经存在，则将当前节点设置为新的上层节点。 以下是一个简单的示例代码： ```javascript function arrayToTree(arr) { const root = {}; for (let i = 0; i < arr.length; i++) { let currentNode = root; const path = arr[i].split('.'); for (let j = 0; j < path.length; j++) { if (!currentNode[path[j]]) { currentNode[path[j]] = {}; } currentNode = currentNode[path[j]]; } } return root; } const arr = ['a', 'b.c', 'b.d.e', 'f']; const tree = arrayToTree(arr); console.log(tree); ``` 在上面的代码中，我们定义了一个arrayToTree函数，该函数接收一个一维数组作为参数，并返回一个树状结构的对象。我们使用root对象作为根节点，然后遍历数组中的每个元素，将其拆分为字符串数组，每个元素表示树状结构的一层。然后使用嵌套的循环来创建节点并添加到相应的位置。 最后，将给定的一维数组转换为树状结构。在示例中，数组['a', 'b.c', 'b.d.e', 'f']被转换为以下树状结构： ``` { "a": {}, "b": { "c": {}, "d": { "e": {} } }, "f": {} } ``` 这样，我们就成功将一维数组转换为了树状结构。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值