js将列表组装成树结构的两种实现方式分享

目录
  • 前言
  • 背景介绍
  • 实现方案
  • 递归法
  • 资源
  • 总结

前言

工作中偶尔就会遇到后端同学丢来一个列表，要我们自己组装成一个树结构渲染到页面上，本文以两种不同方式探索生成树的算法思想。

背景介绍

可组装成树结构的数组一般有以下几个要素：

  • 当前节点id
  • parentId 当前节点的父节点id
  • children 子节点列表（可能不会在接口中返回，需要组装时候自己加上）

原始结构：

目标结构：

关键就是一维数组中通过parentId找到其对应的父节点并添加到父节点的children数组中。

实现方案

最直接的方式就是遍历数组，并把找到的子节点逐一添加到父节点中

function listToTreeSimple(data) {
  const res = [];
  data.forEach((item) => {
    const parent = data.find((node) => node.id === item.parentId);
    if (parent) {
      parent.children = parent.children || [];
      parent.children.push(item);
    } else {
      // * 根节点
      res.push(item);
    }
  });
  return res;
}

考虑进一步优化，使用哈希表，以id为key存储每个节点值，省去data.find计算

function listToTree(data) {
  // * 先生成parent建立父子关系
  const obj = {};
  data.forEach((item) => {
    obj[item.id] = item;
  });
  // * obj -> {1001: {id: 1001, parentId: 0, name: 'AA'}, 1002: {...}}
  // console.log(obj, "obj")
  const parentList = [];
  data.forEach((item) => {
    const parent = obj[item.parentId];
    if (parent) {
      // * 当前项有父节点
      parent.children = parent.children || [];
      parent.children.push(item);
    } else {
      // * 当前项没有父节点 -> 顶层
      parentList.push(item);
    }
  });
  return parentList;
}

即便数据量很小，带来的性能提升也是显著的

递归法

更有骚操作递归法，性能会很差，但代码会很酷

赞 (0)

相关推荐

  • js用于树型结构级联选择

    及联选择-用于权限选择比较合适 var arr = tree.getElementsByTagName('input') for(var i=0; i [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • JavaScript解析任意形式的json树型结构展示

    在页面展示json成树形结构时,往往得到的json不是ztree的规范格式,需要对json循环迭代解析.即使不规范的json也可以树形展现: var arrayJsonContent=[]; //节点类 var JsonNodes = { id:"", name:"", pId:"", content:"", //location:"", linklocation:"", open:fa

  • javascript如何用递归写一个简单的树形结构示例

    现在有一个数据,需要你渲染出对应的列表出来: var data = [ {"id":1}, {"id":2}, {"id":3}, {"id":4}, ]; var str="<ul>"; data.forEach(function(v,i){ str+="<li><span>"+v.id+"</span></li>&

  • 详解JavaScript树结构

    详解JavaScript树结构

    对于数据结构"树",想必大家都熟悉,今儿,我们就再来回顾一下数据结构中的二叉树与树,并用JavaScript实现它们. ps:树结构在前端中,很多地方体现得淋漓尽致,如Vue的虚拟DOM以及冒泡等等. 二叉树 --概念-- 二叉树是一种树形结构,它的特点是每个结点至多只有两棵子树(即二叉树中不存在度大于2的结点),并且,二叉树的子树有左右之分,其次序不能任意颠倒. 如下,就是一棵二叉树(注:下文二叉树相关例子,都以该二叉树为例): 且,遍历二叉树(traversing binary t

  • JavaScript几种形式的树结构菜单

    1.悬浮层树(Tree) 这种树结构实现类似面包屑导航功能,监听的是节点鼠标移动的事件,然后在节点下方或右方显示子节点,依此递归显示子节点的子节点. 用户首页博客设置文章相册留言评论系统 这里要注意几个小问题,其一这种树结构是悬浮层绝对定位的,在创建层的时候一定要直接放在body的下面,这样做的是确保在IE里面能遮掩住任何层,因为在IE里面是有stacking context这种东西的潜规则在里面的,另外当然还有一个select你能遮住我吗?老掉牙的问题,这里是采用在每个悬浮层后面加个ifram

  • JavaScript 处理树数据结构的方法示例

    JavaScript 处理树结构数据 场景 即便在前端,也有很多时候需要操作 树结构 的情况,最典型的场景莫过于 无限级分类.之前吾辈曾经遇到过这种场景,但当时没有多想直接手撕 JavaScript 列表转树了,并没有想到进行封装.后来遇到的场景多了,想到如何封装树结构操作,但考虑到不同场景的树节点结构的不同,就没有继续进行下去了. 直到吾辈开始经常运用了 ES6 Proxy 之后,吾辈想到了新的解决方案! 思考 问: 之前为什么停止封装树结构操作了? 答: 因为不同的树结构节点可能有不同的结构

  • javascript将list转换成树状结构的实例

    如下所示: /** * 将list装换成tree * @param {Object} myId 数据主键id * @param {Object} pId 数据关联的父级id * @param {Object} list list集合 */ function listToTree(myId,pId,list){ function exists(list, parentId){ for(var i=0; i<list.length; i++){ if (list[i][myId] == parent

  • js将列表组装成树结构的两种实现方式分享

    js将列表组装成树结构的两种实现方式分享

    目录 前言 背景介绍 实现方案 递归法 资源 总结 前言 工作中偶尔就会遇到后端同学丢来一个列表,要我们自己组装成一个树结构渲染到页面上,本文以两种不同方式探索生成树的算法思想. 背景介绍 可组装成树结构的数组一般有以下几个要素: 当前节点id parentId 当前节点的父节点id children 子节点列表(可能不会在接口中返回,需要组装时候自己加上) 原始结构: 目标结构: 关键就是一维数组中通过parentId找到其对应的父节点并添加到父节点的children数组中. 实现方案 最直接

  • JS 动态加载js文件和css文件 同步/异步的两种简单方式

    /*动态添加js或css,URL:文件路径,FileType:文件类型(js/css)*/ function AddJsFiles(URL,FileType){ var oHead = document.getElementsByTagName('HEAD').item(0); var addheadfile; if(FileType=="js"){ addheadfile= document.createElement("script"); addheadfile

  • 详解Java递归实现树形结构的两种方式

    详解Java递归实现树形结构的两种方式

    目录 0.引言 1.数据准备 2.类型转化 3.递归实现方法 3.1.Java7及以下纯Java递归实现 3.2.Java8及以上借助lamda表达式实现 0.引言 在开发的过程中,很多业务场景需要一个树形结构的结果集进行前端展示,也可以理解为是一个无限父子结构,常见的有报表指标结构.菜单结构等.Java中递归实现树形结构的两种常见方式如下: Java7及以下纯Java递归实现 Java8及以上借助lamda表达式实现 1.数据准备 Java实体类NodePO对应数据库表 package com

  • JS实现星星评分功能实例代码(两种方法)

    JS实现星星评分功能实例代码(两种方法)

    一.方法1 1.用到图片 2.结构和样式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> ul { padding-left: 0; overflow: hidden; } ul li { float: left; list-style: no

  • 网页前端登录js按Enter回车键实现登陆的两种方法

    很简单的代码,这里介绍两种方法给大家. 第一种: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <titl

  • js限制文本框输入长度两种限制方式(长度、字节数)

    功能/特点: 1.实时显示可输入的字数(字节数) 2.两种限制方式(长度.字节数) 3.中文输入法下可正常使用,无BUG 4.同一页面可以使用多个,相互不干扰 limit.js 复制代码 代码如下: function limit(){ var txtNote;//文本框 var txtLimit;//提示字数的input var limitCount;//限制的字数 var isbyte;//是否使用字节长度限制(1汉字=2字符) var txtlength;//到达限制时,字符串的长度 var

  • 实现树状结构的两种方法

    实现树状结构的两种方法 1.递归法递归是指在函数中显式的调用它自身.利用递归法实现树状结构的特点是写入数据速度较快,显示速度较慢(在树的分支/层次较多的情况下尤其明显).适用与写入数据量大,树的结构复杂的情况下.数据结构(以mysql为例) 代码:--------------------------------------------------------------------------------CREATE TABLE `tree1` (  `id` tinyint(3) unsign

  • Node.js实现下载文件的两种实用方式

    目录 第一种方式:使用原生的http模块 第二种方式:使用Express+Axios下载文件 总结 设置响应头 返回数据流 第一种方式:使用原生的http模块 我们仅需要用到fs和http两个node.js的原生模块,不需要安装第三方模块,就可以实现文件的下载.代码如下: var fs = require('fs'); var http = require("http"); var server = http.createServer(); server.on("reques

  • Golang打印复杂结构体两种方法详解

    目录 fmt结构体占位符 打印复杂结构体 方案一 方案二 fmt结构体占位符 在Golang中有原生的 fmt 格式化工具去打印结构体,可以通过占位符%v.%+v.%#v去实现,这3种的区别如下所示: type User struct { Name string Age int } func main() { user := User{ Name: "张三", Age: 95, } fmt.Printf("%v\n", user) fmt.Printf("

  • 详解Nuxt内导航栏的两种实现方式

    方式一 | 通过嵌套路由实现 在pages页面根据nuxt的路由规则,建立页面 1. 创建文件目录及文件 根据规则,如果要创建子路由,子路由的文件夹名字,必须和父路由名字相同 所以,我们的文件夹也为index,index文件夹需要一个默认的页面不然nuxt的路由规则就不能正确匹配页面 一级路由是根路由 二级路由是index,user,默认进入index路由 下面是router页面自动生成的路由 { path: "/", component: _93624e48, children: [

随机推荐