线性结构转树形结构(生成无限层级菜单)

let list = [
    { parentId: 0, id: 1, value: ‘1‘ },
    { parentId: 3, id: 2, value: ‘2‘ },
    { parentId: 0, id: 3, value: ‘3‘ },
    { parentId: 1, id: 4, value: ‘4‘ },
    { parentId: 1, id: 5, value: ‘5‘ },
]; 

function listToTree(list){
    //遍历整个列表
    return list.filter(cur=>{
        // 获取当前节点的子节点
        let children= list.filter(item=> item.parentId == cur.id );
        if(children.length>0){
             cur.children=children;
        }
        //只返回顶级节点
        return cur.parentId==0;
    });
}

console.log(listToTree(list));

原文地址:https://www.cnblogs.com/flamestudio/p/12090848.html

时间: 2024-11-09 00:09:13

线性结构转树形结构(生成无限层级菜单)的相关文章

线性结构与树形结构相互转换(ES6实现)

前言 当树形结构的层级越来越深时,操作某一节点会变得越来越费劲,维护成本不断增加.所以线性结构与树形的相互转换变得异常重要! 首先,我们约定树形结构如下: node = { id: number, // 数值 parentId: number, // 数值 name: string, children: [] || null, // 用数组的方式保存子节点,适合更多业务场景 }   线性结构: list = [ { id: number, parentId: number, name: stri

网站结构之扁平结构与树形结构的区分

网站建设优化中,网站的结构是网站优化成败点,网站结构一般分为物理结构和逻辑结构. 物理结构就是也就是我们网站实际目录,或者说是文件实际的物理地址.物理结构一般分两种,一种是扁平的,一种是树型的. 网站的物理结构又可以分为扁平式,和树形结构 扁平结构:所有网页都在网站根目录,形成一个扁平的物理结构.其优点是结构层次短,蜘蛛效率高,URL短,有利于搜索引擎的收录和排名.但缺点则是 URL语义不明显,随着数据量的增加将使网站变得难以组织,内链不好做,权重传递难以集中.所以,扁平结构适合简单垂直的中小型

c#通用递归生成无限层级树

NewsType结构: Id ParentId Name children(List<NewsType>) public void LoopToAppendChildren(List<NewsType> all, NewsType curItem) { var subItems = all.Where(ee => ee.ParentId==curItem.Id).ToList(); curItem.children = new List<NewsType>();

添加文件夹获得其树形结构,并构建其节点

定义文件信息 public class MyFileInfo { public string FileName { get; set; }//文件名 public string FilePath { get; set; }//文件路径 public long FileSize { get; set; }//文件大小 public string ParentPath { get; set; }//父路径 public string RelativePath { get; set; }//相对路径

结构型模式-组合模式(树形结构的处理)

目录 1. 定义 2. 结构 3. 代码实现 4. 透明组合模式与安全组合模式 4.1 透明组合模式 4.1 安全组合模式 5. 优缺点 6. 适用场景 7. 个人理解 参考 树形结构在软件中随处可见,例如操作系统中的目录结构.应用软件中的菜单.办公系统中的公司组织结构等. 组合模式通过一种巧妙的设计方案使得用户可以一致性地处理整个树形结构或者树形结构的一部分,也可以一致性地处理树形结构中的叶子节点(不包含子节点的节点)和容器节点(包含子节点的节点). 1. 定义 组合模式(Composite

Php无限层级并显示层级数

今天在处理递归无限层级菜单时,遇到一个稍微烧脑的问题,如何显示当前节点所在的层级数.废话不多说,我们先看个直观的无限层级: <?php // 这里的arr是直接从数据库取出的,仅作为测试数据 $arr = array( array('id' => 1, 'name' => '一级菜单a', 'pid' => 0),// pid 父级id array('id' => 2, 'name' => '一级菜单b', 'pid' => 0), array('id' =>

Delphi中根据分类数据生成树形结构的最优方法

一. 引言:    TreeView控件适合于表示具有多层次关系的数据.它以简洁的界面,表现形式清晰.形象,操作简单而深受用户喜爱.而且用它可以实现ListView.ListBox所无法实现的很多功能,因而受到广大程序员的青睐.    树形结构在Windows环境中被普遍应用,但在数据库开发中面对层次多.结构复杂的数据,如何快速构造树形目录并实现导航呢?    二. 实现关键技术:    在Delphi提供的控件中包含了TreeView控件,但树的具体形成还需要用户编写代码.即它的列表项要在程序

采用左右值编码实现无限分级树形结构(转)

无限分级树形结构是在系统开发中很常见的,如下图 在之前实现这样的菜单一直是使用传统的方法,看数据表结构就一目了然 parent_id记录其直接父节点,组合树形结构的关键字段:parent_list记录其所有父节点,便于查询某个节点下所有子节点(一般使用MySQL的FIND_IN_SET函数),相对冗余.对于这种结构生成树形的关键算法:根据parent_id组合一个父子(直接关系)节点映射表,即 2 => array(3, 4), 3 => array(5),然后递归优先遍历每个节点的子节点.如

无限树形结构的数据库表设计

前言: 无限树形结构的数据库表设计的是否合理,直接影响到UI层是否方便根据树来查询关联的数据. 1.表字段: F_BtEd2kTypeId int Unchecked F_Name nvarchar(50) Checked F_ParentTypeId nvarchar(50) Checked F_Code nvarchar(50) Checked F_RecordStatus int Checked 2.表数据: 3.说明: 如2所示, 1)如果上表的数据关联上了一张表A,通过BtEd2kTy