前言

  当树形结构的层级越来越深时,操作某一节点会变得越来越费劲,维护成本不断增加。所以线性结构与树形的相互转换变得异常重要!

  首先,我们约定树形结构如下:

node = {
id: number, // 数值
parentId: number, // 数值
name: string,
children: [] || null, // 用数组的方式保存子节点,适合更多业务场景
}

   线性结构:

list = [
{ id: number, parentId: number, name: string },
{ id: number, parentId: number, name: string },
];

特殊情况  

  上面的树形结构并不是很完美,当遇到菜单或者分类等业务场景时,每个顶级节点的parentId约定为0,当存在多个顶级节点,显得不是一个完整的树。所以在这类特殊情况下,我们需要构造一个顶级节点。将菜单或者分类的原有顶级节点存储至该节点的children中。 所以最后约定顶级节点如下。

root = null || {
id: 0,
parentId: null,
children: [node1, node2, ...],
}

线性结构与树形结构相互转换

  线性转树形:

function listConvertTree(list) {
let root = null;
if (list && list.length) {
root = { id: 0, parentId: null, children: [] };
const group = {};
for (let index = 0; index < list.length; index += 1) {
if (list[index].parentId !== null && list[index].parentId !== undefined) {
if (!group[list[index].parentId]) {
group[list[index].parentId] = [];
}
group[list[index].parentId].push(list[index]);
}
}
const queue = [];
queue.push(root);
while (queue.length) {
const node = queue.shift();
node.children = group[node.id] && group[node.id].length ? group[node.id] : null;
if (node.children) {
queue.push(...node.children);
}
}
}
return root;
}

  树形转线性:

function treeConvertList(root) {
const list = [];
if (root) {
const Root = JSON.parse(JSON.stringify(root));
const queue = [];
queue.push(Root);
while (queue.length) {
const node = queue.shift();
if (node.children && node.children.length) {
queue.push(...node.children);
}
delete node.children;
if (node.parentId !== null && node.parentId !== undefined) {
list.push(node);
}
}
}
return list;
}

线性结构与树形结构相互转换(ES6实现)的更多相关文章

  1. ThinkPHP第二十天(getField用法、常用管理员表结构、树形结构前小图标CSS)

    1.getField($fields,$sepa=null) A:当$fields为1个字段,$sepa=null的时候,返回一个符合条件的记录的字段. B:如果要取得所有符合条件记录字段,需要$se ...

  2. JS 树形结构与数组结构相互转换、在树形结构中查找对象

    总是有很多需求是关于处理树形结构的,所以不得不总结几个常见操作的写法.¯\_(ツ)_/¯ 首先假设有一个树形结构数据如下 var tree=[ { 'id': '1', 'name': '教学素材管理 ...

  3. 【WPF】树形结构TreeView的用法(MVVM)

    TreeView控件的用法还是有蛮多坑点的,最好记录一下. 参考项目: https://www.codeproject.com/Articles/26288/Simplifying-the-WPF-T ...

  4. 公用表表达式CTE简单递归使用-简单树形结构

    1.建表脚本 CREATE TABLE [dbo].[tb_tree]( ,) NOT NULL, [ParentId] [int] NULL, ) NULL, CONSTRAINT [PK_tb_t ...

  5. 设计模式系列之组合模式(Composite Pattern)——树形结构的处理

    说明:设计模式系列文章是读刘伟所著<设计模式的艺术之道(软件开发人员内功修炼之道)>一书的阅读笔记.个人感觉这本书讲的不错,有兴趣推荐读一读.详细内容也可以看看此书作者的博客https:/ ...

  6. 两个比较好用的JS方法,用来处理树形结构!

    一.平级结构转树形结构 /** * 平级结构转树形结构 * * 示例:const jsonDataTree = listTransToTreeData(jsonData, 'id', 'pid', ' ...

  7. 【Java数据结构学习笔记之一】线性表的存储结构及其代码实现

    应用程序后在那个的数据大致有四种基本的逻辑结构: 集合:数据元素之间只有"同属于一个集合"的关系 线性结构:数据元素之间存在一个对一个的关系 树形结构:数据元素之间存在一个对多个关 ...

  8. 012-数据结构-树形结构-哈希树[hashtree]、字典树[trietree]、后缀树

    一.哈希树概述 1.1..其他树背景 二叉排序树,平衡二叉树,红黑树等二叉排序树.在大数据量时树高很深,我们不断向下找寻值时会比较很多次.二叉排序树自身是有顺序结构的,每个结点除最小结点和最大结点外都 ...

  9. 浅谈树形结构的特性和应用(上):多叉树,红黑树,堆,Trie树,B树,B+树...

    上篇文章我们主要介绍了线性数据结构,本篇233酱带大家康康 无所不在的非线性数据结构之一:树形结构的特点和应用. 树形结构,是指:数据元素之间的关系像一颗树的数据结构.我们看图说话: 它具有以下特点: ...

随机推荐

  1. hibernate框架学习笔记5:缓存

    缓存不止存在与程序中,电脑硬件乃至于生活中都存在缓存 目的:提高效率 比如IO流读写字节,如果没有缓存,读一字节写一字节,效率低下 hibernate中的一级缓存:提高操作数据库的效率 示例: 抽取的 ...

  2. 关于hadoop集群下Datanode和Namenode无法访问的解决方案

    HDFS架构 HDFS也是按照Master和Slave的结构,分namenode,secondarynamenode,datanode这几个角色. Namenode:是maseter节点,是大领导.管 ...

  3. Ditto在教学上的应用

    Ditto在教学上的应用 我喜欢iOS和macOS生态的一个原因是,你在iphone上看到一段好文字,复制一下,到macbook中粘贴一下就可以了,这体验太爽了. 大家可能相信大家都听过这样一则笑话: ...

  4. 冲刺每日报告--Day1

    敏捷冲刺每日报告--Day1 情况简介 由于李世钰同学出差了,周六才能回来.所以我们只能先写爬虫,封装代码提供接口等他回来调用. 任务进度 赵坤:编写了基本爬虫代码,目前能在国内有版权的B站.爱奇艺中 ...

  5. 200行Python代码实现2048

    200行Python代码实现2048 一.实验说明 1. 环境登录 无需密码自动登录,系统用户名shiyanlou 2. 环境介绍 本实验环境采用带桌面的Ubuntu Linux环境,实验中会用到桌面 ...

  6. 利用flask 实现简单模版站

    from flask import Flask,render_template from flask import request app = Flask(__name__) @app.route(' ...

  7. 【iOS】swift 保持代码优美的10个方法

    这篇Swift风格指南与你看到的其他的指南有所不同,此篇指南主要焦点集中在打印和Web展示的可读写上.我们创建此篇风格指南的目的,是为了让我们的图书.教程以及初学者套件中的代码保持优美和一致,即使我们 ...

  8. jav音频格式转换 ffmpeg 微信录音amr转mp3

    项目背景: 之前公司开发了一个微信公众号,要求把js-sdk录音文件在web网页也能播放.众所周知,html的<audio>标签ogg,mp3,wav,也有所说苹果safari支持m4a格 ...

  9. jwt验证登录信息

    为什么要告别session?有这样一个场景,系统的数据量达到千万级,需要几台服务器部署,当一个用户在其中一台服务器登录后,用session保存其登录信息,其他服务器怎么知道该用户登录了?(单点登录), ...

  10. angular路由守卫

     路由守卫是指当用户满足了某些要求之后才可以离开或者进入某个页面或者场景的时候使用.比如说只有当用户填写了用户名和密码之后才可以进入首页,比如说用户离开某个页面时明月保存信息提示用户是否保存信息后再离 ...