首页 > 其他分享 >js 数组转树形结构

js 数组转树形结构

时间:2022-11-01 16:58:09浏览次数:84  
标签:const list objMap js 树形 数组 parentId 节点 id

1、递归方式

const list = [
  { id: '001', name: '节点1' },
  { id: '0011', parentId: '001', name: '节点1-1' },
  { id: '00111', parentId: '0011', name: '节点1-1-1' },
  { id: '002', name: '节点2' },
]

/**
 * 数组转树形结构
 * @param {*} list 数组
 * @param {*} parentId 父级id
 * @param {*} param2 可配置参数
 */
const transformArrToTree =(list,parentId,{idName="id",parentIdName="parentId",childrenName="children"}={})=>{
  if(!Array.isArray(list)){
    new Error('only Array')
    return list
  }
  return list.reduce((prev,next)=>{
    if(next[parentIdName]===parentId){
      const children= transformArrToTree(list,next[idName])
      if(children?.length){
        next[childrenName]=children
      }
      return[...prev,next]
    }
    return prev;
  },[])
  
}
console.log('ss',transformArrToTree(list))
View Code

 

 

 2、非递归方式

const transformArrToTree =(list,rootId,{idName="id",parentIdName="parentId",childrenName="children"}={})=>{
  if(!Array.isArray(list)){
    new Error('only Array')
    return list
  }
  const objMap={} // 暂存数组以id为key映射关系
  const result=[]
  for(const item of list) {
    const id=item[idName]
    const parentId=item[parentIdName]
    // 该元素有可能放入map中(找不到该项的parent时会先放入map)
    objMap[id]=!objMap[id] ? item:{...item,...objMap[id]}
    //找到对应映射关系
    const treeItem=objMap[id] 
    if(parentId===rootId){
      result.push(treeItem)
    }else{
      if(!objMap[parentId]){
        objMap[parentId]={}
      }
      if(!objMap[parentId][childrenName]){
        objMap[parentId][childrenName]=[]
      }
      objMap[parentId][childrenName].push(treeItem)
    }
  }
  return result
}
console.log('数组转树形结构=>',transformArrToTree(list))
View Code
  • 递归方式:每次递归寻找当前节点的子节点时都需要重新遍历一遍数组,时间复杂度为 O(nlogn)
  • 非递归方式:从根节点往下寻找子节点,通过 Map 保存每个节点及其子节点的信息,子节点保存的是 Map 上的引用,每个节点的子节点都可以在 Map 中通过 id 找到,时间复杂度为 O(n)
  • 当数据越来越大时,递归算法的耗时将远远大于非递归算法

标签:const,list,objMap,js,树形,数组,parentId,节点,id
From: https://www.cnblogs.com/vhen/p/16848276.html

相关文章

  • 2035. 将数组分成两个数组并最小化数组和的差
    题目描述给一个长度是2*n的数组,需要将数组分成两个长度为n的数组问怎么划分,可以让两个数组和的差的绝对值最小?f1-折半枚举+排序+二分基本分析1.题意怎么转化?两个数组......
  • Java接收json参数
     Java接收json参数importjava.util.List;importjava.util.Map;importorg.springframework.web.bind.annotation.RequestBody;importorg.springframework.web.bind.anno......
  • JS原型、原型链深入理解
    原型是JavaScript中一个比较难理解的概念,原型相关的属性也比较多,对象有”prototype”属性,函数对象有”prototype”属性,原型对象有”constructor”属性。一、初识原型在Ja......
  • 深度理解NodeJS事件循环
    导读ALLTHETIME,我们写的的大部分javascript代码都是在浏览器环境下编译运行的,因此可能我们对浏览器的事件循环机制了解比Node.JS的事件循环更深入一些,但是最近写开始深......
  • <4> os.popen()获取js解密结果
    #访问js文件,获取解密结果defdecrypto(self,data:str):#加密字符串importoswithos.popen("nodejs文件{}".format(data)asp:returnp.read.s......
  • 了解什么是数组,如何应用数组,只需1分钟就可以秒变数组大神!
    Hi,大家好,有很多的小伙伴在私信提问能不能说说什么是Excel数组,因为不了解什么是数组,因此对数组公式感觉非常神秘和陌生。由于大部分人都对数组公式很陌生,我一直都在思考如何......
  • array_sum/array_column(二维数组指定字段求和)
    二维数组指定字段求和<?php$arr=[["goods_id"=>37,"goods_name"=>"铁砂锅37","goods_weight"=>2,"goods_price"=>......
  • JS/TS数据结构---栈(单调栈)和队列
    一、栈栈(stack)是一种操作受限的线性表数据结构,基于后进先出(LIFO)策略的集合类型,例如函数中的临时变量符合后进先出的特性,因此用栈保存最合适。  在入栈和出栈过程中所需......
  • JAVAWeb --JSP基础语法
    准备工作,导入一些依赖<dependencies><!--Servlet的依赖--><dependency><groupId>javax.servlet</groupId><artifactId>s......
  • js 对DOM观察大小改变的处理通知方法。ResizeObserver的应用。
    环境代码示例使用了VUE3的setup的语法糖。代码//这里使用弱引用//key是DOM实例//value是溢出的结果,true标识溢出,false标识没有溢出。constoverflowResultMap=......