JavaScript实现将列表转换为树状结构

于 2023-10-06 17:07:54 发布
阅读量253 收藏
点赞数
文章标签： javascript 开发语言 ecmascript js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CgbAutoit/article/details/133614431
版权
js 专栏收录该内容
300 篇文章 4 订阅 ¥59.90 ¥99.00
订阅专栏
本文介绍了如何使用JavaScript将包含id、name和parentId属性的列表数据转换为树状结构，利用递归算法实现数据的层次化组织，提供源代码示例。
摘要由CSDN通过智能技术生成

在JavaScript编程中，经常会遇到将列表数据转换为树状结构的需求。树状结构的表示方式能够更好地组织和展示数据，使得数据的层次结构更加清晰。本文将介绍如何使用JavaScript将列表数据转换为树状结构，并提供相应的源代码示例。

首先，我们需要定义列表数据的结构。假设我们有如下的列表数据：

const list = [
  {
    id: 1, name: 'Node 1',
了解本专栏 订阅专栏 解锁全文
CgbAutoit
关注
专栏目录
订阅专栏
js中列表数据转树型结构
webcamds的博客
09-11 2122
话不多说，直接进入正题~ 列表数据中字段如下： [ { id: 1, text: '节点1', parentId: 0 //这里用0表示为顶级节点 }, { id: 2, text: '节点1_1', parentId: 1 //通过这个字段来确定子父级 } ... ] 我们预期的结果： [ { id: 1, text: '节
js中List、Tree互相转换
03-08
在js中通过递归的方法将List与Tree(树形数据)互相转换
JavaScript 列表转树结构
码厩
03-25 2293
1、使用递归 缺点：算法复杂度稍大，O(n2)；无法消除脏数据导致的循环引用问题（例如ID与parentId相同，但一般情况下都不会发生）。 export function list2treeV1(_list, _props = {}, _disabled = false) { const props = { // 标准字段映射 id: 'id', // id值使用字段，默认id label: 'label', // 标签值字段，默认 label disabled: 'd
js 将数组列表转为树结构
波客
01-08 2673
let list = [ { id: '1', title: '节点1', parentId: '', }, { id: '1-1', title: '节点1-1', parentId: '1' }, { id: '1-2', title: '节点1-2', parentId: '1' ...
js 列表转树状
qq_44993023的博客
08-02 307
代码】js列表转树状。
js将列表转为树形结构(产品分类)
IT菜鸟
05-02 294
js将列表转为树形结构(产品分类)
javascript将list转换成树状结构的实例
10-19
本文将深入探讨如何使用JavaScript将扁平化的list转换为树状结构。 在给定的实例中，提供了一个名为`listToTree`的函数，它接受三个参数：`myId`（数据的主键ID）、`pId`（数据关联的父级ID）以及`list`（包含list...
JavaScript将数组转化为多级树状结构.zip
最新发布
06-10
这个“JavaScript将数组转化为多级树状结构”的主题涉及到了数据结构的转换技巧，是前端开发中的重要技能之一。 首先，我们需要理解什么是树状结构。在计算机科学中，树是一种非线性的数据结构，它由节点（也称为...
javascript将list转换成树状结构的实例.docx
01-13
### JavaScript将List转换成树状结构的技术解析 #### 一、引言 在现代Web开发中，树形数据结构的应用非常广泛，例如文件系统、组织架构、产品分类等场景都需要用到树形结构来表示层级关系。而很多时候，原始数据是...
js 实现 list转换成tree的方法示例（数组到树）
12-02
目标： JS 将有父子关系的平行数组转换成树形数据 方法：双重遍历，一次遍历parentId,一次遍历id == parendId; 该方法应该能很容易被想到，实现起来也一步一步可以摸索出来； const oldData = [ {id:1,name:'boss',parentId:0}, {id:2,name:'lily',parentId:1}, {id:3,name:'jack',parentId:1}, {id:4,name:'john',parentId:2}, {id:5,name:'boss2',parentId:0}, ] function listT
将列表还原为树状结构
qq_42181069的博客
07-01 658
JavaScript：将列表还原为树状结构
js中列表与树形结构之间的转换及常见操作
oleiwoaboluo的博客
04-20 1205
【代码】js中列表与树形结构之间的转换及常见操作。
利用js将列表数据转换为树结构
xt_XiTu的博客
04-08 1491
记录一下遇到过好多次的需求，重复写太恶心了 parent_id：最顶层的默认父节点值 list：需要处理的列表数据 返回的数据为处理好的树结构数据 const dealTreeData = (parent_id: any, list: any) => { const arr = list?.filter((c:any) => c.parent_id === parent_id) || []; arr.forEach((item: any) => { cons
js数组列表转树状结构
正一品程序员的博客
02-11 521
export function listToTree( list = [], root = null, idField = 'menuId', parentIdField = 'parentId', ) { const tree = [] const hash = {} const childrenField = 'children' for (let i = 0, l = list.length; i < l; i++) { const d = list[i]
js——将列表数据处理成树型结构数据
weixin_46611729的博客
05-19 592
/** * 构造树型结构数据 * @param {*} data 数据源 * @param {*} id id字段 默认 'id' * @param {*} parentId 父节点字段 默认 'parentId' * @param {*} children 孩子节点字段 默认 'children' * @param {*} rootId 根Id 默认 0 */ export function handleTree(data, id, parentId, children, rootId) {
js 列表结构数据转成树形结构数据
weixin_55510188的博客
01-01 449
// 列表结构转树形结构 exports.toTree = (data) => { // 删除 所有 children,以防止多次调用 data.forEach(function (item) { delete item.children }) // 将数据存储为 以 id 为 KEY 的 map 索引数据列 let map = {} data.forEach(function (item) { map[item.id] = item }) let .
javascript 一个简单的列表结构转树状结构方法
qqRZL的博客
05-22 1068
用JS代码写一个将结构[{id:1},{id:2, pid: 1},{id:3, pid: 2}]转换成[{id:1, children:[{id:2, pid: 1, children: [{id:3, pid: 2}] }] }]的方法
javascript将扁平的数据转为树形结构（高效率）
热门推荐
huyao的博客
11-29 2万+
当我们需要将一个一维数组转换成一个多层结构的时候，最简单但是最慢的就是多个for循环嵌套，但是这样做有一些缺点，那就是效率太低、而且有多少层就需要嵌套几个for循环，不好用。 我实现了用O(n)级算法将 一个扁平的数组即一维数组代表的菜单结构转换成一个多层级的菜单结构。 一位数组中每一个元素必须要包含以下属性： 拥有一个唯一的id 拥有一个parent_id, 这个id指向它父级的id 其...
js 将列表中的文件路径转换为树状结构
08-15
### 回答1： 要将列表中的文件路径转换为树状结构，您可以使用JavaScript编写递归函数来构建树形结构。下面是一个可能的实现： ```javascript function buildTree(fileList) { const tree = {}; fileList.forEach(filePath => { const pathParts = filePath.split('/'); let current = tree; pathParts.forEach(part => { if (!current[part]) { current[part] = {}; } current = current[part]; }); }); return tree; } ``` 该函数接受一个文件路径列表，并返回一个树形结构对象。每个文件路径都被拆分成一系列路径部分，然后在树形结构中进行遍历。如果路径部分尚未在树中创建，则将其添加为新节点。最后，函数返回构建的树形结构。 例如，假设文件列表如下所示： ```javascript const fileList = [ 'root/file1.txt', 'root/dir1/file2.txt', 'root/dir1/dir2/file3.txt', 'root/dir3/file4.txt' ]; ``` 通过调用 `buildTree(fileList)`，将会返回以下树形结构： ```javascript { root: { file1.txt: {}, dir1: { file2.txt: {}, dir2: { file3.txt: {} } }, dir3: { file4.txt: {} } } } ``` 该树形结构反映了文件路径的嵌套关系，其中每个节点代表一个目录，每个空对象代表一个文件。 ### 回答2： 在 JavaScript 中，我们可以使用递归算法将列表中的文件路径转换为树状结构。 首先，我们可以定义一个函数来创建树节点，节点包含文件名和子节点数组。 然后，我们遍历给定的文件路径列表，对每个文件路径进行拆分，得到文件名数组。 接下来，我们可以递归地遍历文件名数组，对每个文件名构建树节点并添加到相应的父节点上。 具体步骤如下： 1. 创建一个函数 `createNode(name)` 用于创建树节点，其中 `name` 是文件名，初始时子节点数组为空。 2. 创建一个根节点 `root`，子节点数组为空。 3. 遍历文件路径列表，对每个文件路径执行以下操作： a. 使用 `split("/")` 方法将文件路径拆分为文件名数组。 b. 使用 `reduce()` 方法依次遍历文件名数组，并递归地构建树结构： - 如果文件名已存在于当前节点的子节点数组中，则将当前节点更新为对应子节点。 - 否则，创建一个新的子节点，并将它加入当前节点的子节点数组。 c. 将文件名数组的最后一个元素作为当前节点的文件名。 4. 返回根节点 `root`，这样就得到了一个树状结构。 最终，我们可以调用这个函数并将文件路径列表作为参数传入，即可得到转换后的树状结构。 举个例子，假设我们有以下文件路径列表：["file1/folder1/folder2", "file2/folder3", "file3/folder4"] 经过以上步骤，我们可以得到如下的树状结构： ``` { name: "", children: [ { name: "file1", children: [ { name: "folder1", children: [ { name: "folder2", children: [] } ] } ] }, { name: "file2", children: [ { name: "folder3", children: [] } ] }, { name: "file3", children: [ { name: "folder4", children: [] } ] } ] } ``` 通过这种方式，我们可以将列表中的文件路径转换为树状结构。 ### 回答3： 在JavaScript中，可以通过递归的方式将列表中的文件路径转换为树状结构。 首先，我们需要定义一个递归函数将文件路径转换为树状结构。该函数首先会遍历列表中的每个文件路径，然后根据路径的层级关系进行判断和处理。 在函数中，我们可以使用split()方法将文件路径分割为一个由层级关系组成的数组。然后，根据当前文件路径的层级，我们可以构建树状结构。 具体的实现步骤如下： 1. 创建一个空的树状结构对象，用来存储转换后的结果。 2. 遍历列表中的每个文件路径。 3. 对于每个文件路径，我们可以通过split()方法将其分割为一个由层级关系组成的数组。 4. 创建一个指向树状结构的指针变量，初始指向树状结构的根节点。 5. 遍历文件路径的每个层级。 6. 对于每个层级，我们可以通过指针变量判断该层级在树状结构中是否已经存在，如果不存在则创建一个新的节点，并将该节点添加为指针变量的子节点。 7. 将指针变量指向当前层级节点，用于处理下一层级。 8. 重复步骤5-7，直到遍历完所有层级。 9. 返回树状结构对象。 最后，我们可以调用该递归函数，并将列表作为参数传入，即可得到将文件路径转换为树状结构的结果。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值