JavaScript 中的扁平数组和树形结构互相转化

碧海蓝天·

于 2023-09-26 14:36:14 发布

阅读量122

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 前端开发语言 JavaScript

本文链接：https://blog.youkuaiyun.com/debug_bug142/article/details/133309043

JavaScript 专栏收录该内容

306 篇文章 ¥59.90 ¥99.00

订阅专栏

本文介绍了如何在JavaScript中实现扁平数组和树形结构之间的相互转化。通过递归方法，详细讲解了如何从扁平数组构建树形结构，以及如何将树形结构转换为扁平数组，提供了相应的源代码示例。

在 JavaScript 中，扁平数组和树形结构是常见的数据表示形式。扁平数组是一个一维数组，其中的元素可以是任意类型的值。而树形结构是一种层次结构，它由节点组成，每个节点可以有零个或多个子节点。

在本文中，我们将学习如何在 JavaScript 中实现扁平数组和树形结构之间的相互转化。我们将提供相应的源代码，并解释每个步骤的实现细节。

扁平数组转化为树形结构

首先，我们将探讨如何将一个扁平数组转化为树形结构。假设我们有以下的扁平数组：

const flatArray = [
  {
   
    id: 1, name: 'Node 1'

了解本专栏

订阅专栏解锁全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

碧海蓝天·

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

订阅专栏

JS 将扁平化数组转化为树形结构

weixin_44453127的博客

06-12

1750

后台返回数据如下： { AREA_NAME: "浙江省", level: 0, PID: 0, AREA_CODE: 330000 }, { AREA_NAME: "杭州市", level: 1, PID: 330000, AREA_CODE: 330100 }, { AREA_NAME: "宁波市", level: 1, PID: 330000, AREA_CODE: 330200 }, { AREA_NAME: "温州市",

js将后台返回的数据转化为树形结构（扁平数组转树状结构）

有事儿私信。

07-03

1046

4. 评论回复：在社交媒体或论坛中，用户可以对评论进行回复，这种回复关系可以使用树状结构来组织和展示。5. 分类目录：电商网站中的商品分类、博客中的文章分类等都可以使用树状结构进行组织和展示。2. 组织架构：在企业中，可以使用树状结构来表示员工之间的关系，从而构建组织架构图。3. 导航菜单：在网站或应用程序的导航菜单中，通常使用树状结构来表示不同的页面层级。1. 文件系统：将文件系统中的文件和文件夹组织为树状结构。

参与评论您还未登录，请先登录后发表或查看评论

javascript将扁平的数据转为树形结构（高效率）

热门推荐

huyao的博客

11-29

2万+

当我们需要将一个一维数组转换成一个多层结构的时候，最简单但是最慢的就是多个for循环嵌套，但是这样做有一些缺点，那就是效率太低、而且有多少层就需要嵌套几个for循环，不好用。我实现了用O(n)级算法将一个扁平的数组即一维数组代表的菜单结构转换成一个多层级的菜单结构。一位数组中每一个元素必须要包含以下属性：拥有一个唯一的id 拥有一个parent_id, 这个id指向它父级的id 其...

Js将扁平的数组转为树形结构

Gh的博客

10-24

391

通过使用数组的reduce方法来将扁平化的数组转为树形结构

js扁平数组对象转成树结构

许粤军的博客

01-07

1451

假如有个需求，是如下结构： let arr = [ {id: 1, name: '部门1', pid: 0}, {id: 2, name: '部门2', pid: 1}, {id: 3, name: '部门3', pid: 1}, {id: 4, name: '部门4', pid: 3}, {id: 5, name: '部门5', pid: 4}, ] 通过pid这个字段，要转成树结构，就是这样： [ { "id": 1,

JavaScript 将扁平的数组输出转为树形结构(需要考虑性能)

程邓楠的博客

02-27

2684

判断一个算法的好坏，一般从执行时间和占用空间来看,执行时间越短，占用的内存空间越小，那么它就是好的算法。对应的，我们常常用时间复杂度代表执行时间，空间复杂度代表占用的内存空间。

js代码-数组转化树形结构

07-15

在JavaScript开发中，数据结构的转换是常见的任务之一，尤其是将扁平化的数组转化为树形结构，这在处理层级关系的数据时非常有用，比如组织结构、文件目录或导航菜单等。本篇将深入探讨如何使用JavaScript实现这个...

arrayParseTree:改算法可以将扁平数组解析成一个树结构, 可以对大量数据解析解析(也许)

05-13

改算法可以将扁平数组解析成一个树结构, 可以对大量数据解析解析(也许) // 扁平数组 [ {id: 'a', parentId: ''}, {id: 'b', parentId: 'a'}, {id: 'c', parentId: 'b'}, ] // 树结构 [{ id: 'a', child: [{ ...

java将list转为树形结构的方法（后台和前台）

01-20

标题中的“java将list转为树形结构的方法（后台和前台）”指的是在Java编程语言中，如何将一个列表（List）数据结构转换为树形结构。这种转换通常用于处理层级关系的数据，如目录结构、组织架构等。转换分为前端...

js扁平数组转换树形结构

weixin_45153096的博客

04-07

284

下面展示一些内联代码片。 // A code block var foo = 'bar'; // An highlighted block var tree= [ { "id":1, "name":"个人档案", "code":"personal", "sort_index":1, "parent_code":"", "create_time":1535622519220, "upda

JavaScript 扁平化数组转成Tree

weixin_46823798的博客

09-24

1479

扁平化数组转成Tree以及数组扁平化的常用方法

JS数据处理——扁平化数组转换为树形结构

菜喵的博客

01-11

2116

本文介绍了将扁平数组转换为树形结构的三种方法：递归实现、数组高阶方法优化和非递归哈希表实现。递归方法代码简洁但存在性能瓶颈，高阶函数优化可读性更好，而非递归方法通过哈希表提升处理效率，适合大数据场景。文章对比了各方法的时间/空间复杂度，提出性能优化建议，并列举了省市区选择器、组织架构管理等典型应用场景。开发者可根据数据量、层级深度和性能需求选择合适方案，其中非递归方法在处理大规模层次数据时最具优势。

JavaScript将扁平数据转换为树形结构

qq_45701130的博客

03-26

2797

将一组扁平数据转换为树形的层级结构 <script> // 将扁平数据转换为树形结构 function test(arr) { // 将对象id和temp数组的下标对应起来 // 这样可以根据id准确找到某个对象 let temp = []; for (let key of arr) { temp[key.id] = key; } //保存树形结构 let res

js处理扁平数组和树结构相互转换

qq_40596257的博客

12-02

2760

js处理扁平数组和树结构相互转换

js把扁平数据转成树形数据

11-05

734

treeData(source) { let cloneData = JSON.parse(JSON.stringify(source)); // 对源数据深度克隆 return cloneData.filter(father => { let branchArr = cloneData.filter(child => father.id == ...

「js」扁平数据结构转树形数据结构

chen_zhuo_you的博客

10-30

3544

将平铺的数组结构转成树形结构 初始数据如下： const list = [ { id: 1, name: '司令', pid: 0 }, { id: 2, name: '军长', pid: 1 }, { id: 3, name: '副军长', pid: 1 }, { id: 4, name: '旅长', pid: 3 }, { id: 5, name: '团长', pid: 4 }, ] 方法一： function arrToTree(list) { .

js实现扁平数据转化成树结构数据

前端-尔嵘

05-27

2093

以上是四种不同的 JavaScript 实现将扁平数据转化为树结构数据的示例代码。这些实现方法都有其各自的优缺点，具体使用要根据实际场景进行选择。使用递归和 reduce 结合实现。使用 reduce 实现。

JavaScript数组转树形结构的方法

以上内容涵盖了将数组转化为树形结构在JavaScript中的实现方法，相关的标签和文件结构的说明，以及在实际开发中可能会遇到的额外问题和优化方法。这些知识点对于前端开发人员在处理具有层次关系的数据时非常重要。