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

简介: js扁平数据转树形结构数据

1.递归方法


// 将列表型数据转化成树形数据 => 递归算法 =>自身调用自身=> 一定条件不能一样否则死循环
// 遍历树形,有一个重点:有一个头
export function tranListIoTreeData(list, rootvalue) {
  // 首先rootvalue为空(不一定是空,根据返回的数据来决定),找到了根节点,然后把根节点的id给rootvalue,再找pid=rootvalue的,全部加入一个对象中;
  const arr = []
  list.forEach(item => {
    if (item.pid === rootvalue) {
      // 找到根节点后,看根节点后有没有子节点
      const children = tranListIoTreeData(list, item.id)
      if (children.length) {
        item.children = children
      }
      arr.push(item)// 内容加入数组中
    }
  })
  return arr
}


2.非递归


   非递归的形式 数组装换成树状图
   //将根元素和根元素的第一个层子元素追加,在遍历到非根元素时,将其追加到它的父元素下.
  var arr = [
  { id: 2, pid: 1},
  { id: 1, pid: 0},
    列表转树 不使用递归方式
  function list2tree(list){
      const arr =[]
      list.forEach((v)=>{
           //获取一个不包含当前项的新数组
          const newList = list.filter((k)=>k.id !==v.id);
           //如果没有找到这一项的父元素那么可以确定它是根元素
          const root = newList.find((t)=>t.id === v.pid);
          if(!root){
               //往数组中追加根元素
              arr.push(v)
          }
           //找当前项的子元素  此步骤完成了给多层子元素追加进去的功能,因为最开始foreach遍历的项,如果不是根元素,那么也会去找他的子元素追加进这个项.
          const children = newList.filter((k)=>k.pid === v.id);
           //找到了就赋值
          if(children.length>0){
              v.children = children
          }else{
              v.children = []
          }
      });
      return arr;
  }
  const list = list2tree(arr)

相关文章
|
3月前
|
JavaScript 前端开发
js实现数据的双向绑定
js实现数据的双向绑定
118 59
|
3月前
|
JavaScript 算法 前端开发
采招网JS逆向:基于AES解密网络数据
采招网JS逆向:基于AES解密网络数据
63 0
|
20天前
|
数据采集 存储 JavaScript
如何使用Puppeteer和Node.js爬取大学招生数据:入门指南
本文介绍了如何使用Puppeteer和Node.js爬取大学招生数据,并通过代理IP提升爬取的稳定性和效率。Puppeteer作为一个强大的Node.js库,能够模拟真实浏览器访问,支持JavaScript渲染,适合复杂的爬取任务。文章详细讲解了安装Puppeteer、配置代理IP、实现爬虫代码的步骤,并提供了代码示例。此外,还给出了注意事项和优化建议,帮助读者高效地抓取和分析招生数据。
如何使用Puppeteer和Node.js爬取大学招生数据:入门指南
|
1月前
|
前端开发 JavaScript
JS-数据筛选
JS-数据筛选
33 7
|
1月前
|
JavaScript 数据安全/隐私保护
2024了,你会使用原生js批量获取表单数据吗
2024了,你会使用原生js批量获取表单数据吗
49 4
|
2月前
|
JavaScript 前端开发 安全
js逆向实战之烯牛数据请求参数加密和返回数据解密
【9月更文挑战第20天】在JavaScript逆向工程中,处理烯牛数据的请求参数加密和返回数据解密颇具挑战。本文详细分析了这一过程,包括网络请求监测、代码分析、加密算法推测及解密逻辑研究,并提供了实战步骤,如确定加密入口点、逆向分析算法及模拟加密解密过程。此外,还强调了法律合规性和安全性的重要性,帮助读者合法且安全地进行逆向工程。
89 11
|
1月前
|
机器学习/深度学习 JSON JavaScript
LangChain-21 Text Splitters 内容切分器 支持多种格式 HTML JSON md Code(JS/Py/TS/etc) 进行切分并输出 方便将数据进行结构化后检索
LangChain-21 Text Splitters 内容切分器 支持多种格式 HTML JSON md Code(JS/Py/TS/etc) 进行切分并输出 方便将数据进行结构化后检索
29 0
|
1月前
|
数据采集 JavaScript 前端开发
JavaScript中通过array.filter()实现数组的数据筛选、数据清洗和链式调用,JS中数组过滤器的使用详解(附实际应用代码)
JavaScript中通过array.filter()实现数组的数据筛选、数据清洗和链式调用,JS中数组过滤器的使用详解(附实际应用代码)
|
2月前
|
JSON JavaScript 前端开发
6-19|Python数据传到JS的方法
6-19|Python数据传到JS的方法
|
3月前
|
JSON JavaScript 数据格式
js实现更新数据
js实现更新数据
54 1