js通过pid将数据处理成tree

简介: js通过pid将数据处理成tree
  arrayToTree(arr) {
    let map = {}; // 用于存放节点对象的字典
    arr.forEach((item) => {
      item['children'] = []; // 初始化每个节点的子节点列表
      if (!map[item.id]) {
        map[item.id] = item; // 将当前节点添加到字典中
      } else {
        Object.assign(map[item.id], item); // 如果已经有相同ID的节点,则合并属性值
      }
    });
    const roots = []; // 根节点集合
    for (let key in map) {
      const node = map[key];
      if (node.pid === null || !map[node.pid]) {
        roots.push(node); // 没有指定父节点或者父节点不在字典中时,认为该节点为根节点
      } else {
        map[node.pid].children.push(node); // 否则将其作为父节点的子节点
      }
    }
    return roots;
  }
}
相关文章
|
9月前
|
JavaScript 算法 前端开发
JS数组操作方法全景图,全网最全构建完整知识网络!js数组操作方法全集(实现筛选转换、随机排序洗牌算法、复杂数据处理统计等情景详解,附大量源码和易错点解析)
这些方法提供了对数组的全面操作,包括搜索、遍历、转换和聚合等。通过分为原地操作方法、非原地操作方法和其他方法便于您理解和记忆,并熟悉他们各自的使用方法与使用范围。详细的案例与进阶使用,方便您理解数组操作的底层原理。链式调用的几个案例,让您玩转数组操作。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
数据采集 资源调度 JavaScript
Node.js 适合做高并发、I/O密集型项目、轻量级实时应用、前端构建工具、命令行工具以及网络爬虫和数据处理等项目
【8月更文挑战第4天】Node.js 适合做高并发、I/O密集型项目、轻量级实时应用、前端构建工具、命令行工具以及网络爬虫和数据处理等项目
283 5
|
存储 JavaScript 前端开发
实际开发中一些实用的JS数据处理方法
实际开发中一些实用的JS数据处理方法
|
JavaScript 前端开发 数据处理
【JavaScript 数据处理-番外篇】手写了几个数据处理,都是用的递归
【JavaScript 数据处理-番外篇】手写了几个数据处理,都是用的递归
118 0
|
JavaScript 数据安全/隐私保护 开发者
JS逆向 -- 某视频val值和pid值的加密分析
JS逆向 -- 某视频val值和pid值的加密分析
178 0
|
JSON 前端开发 JavaScript
直面JavaScript数据处理的5个常见疑难杂症
直面JavaScript数据处理的5个常见疑难杂症
282 0
直面JavaScript数据处理的5个常见疑难杂症
|
存储 缓存 人工智能
[译] 监测与调试 Vue.js 的响应式系统:计算属性树(Computed Tree)
关于 Vue 的下一个主版本,公布的很多新特性引发了激烈的讨论,但其中有一个特性引起了我的注意: 更良好的可调试能力:我们可以精确地追踪到一个组件发生重渲染的触发时机和完成时机,及其原因 在本文中,我们将讨论在 Vue2.x 中如何监测响应式机制,并且将演示一些和性能调优相关的代码段。
[译] 监测与调试 Vue.js 的响应式系统:计算属性树(Computed Tree)
|
JavaScript 前端开发 数据处理
javascript数据处理和筛选
javascript数据处理和筛选
184 0