首页 > 编程语言 >[JavaScript]将数组按照parentId和id整理成树状结构

[JavaScript]将数组按照parentId和id整理成树状结构

时间:2024-11-18 15:21:28浏览次数:1  
标签:TreeNode JavaScript children item parentId const id

 JavaScript

function arrayToTree(items) {
    const rootItems = [];
    const lookup = {};
 
    for (const item of items) {
        const itemId = item.id;
        lookup[itemId] = item;
        const parentId = item.parentId;
        if (parentId === null) {
            rootItems.push(item);
            continue;
        }
        const parent = lookup[parentId];
        if (parent) {
            if (!parent.children) {
                parent.children = [];
            }
            parent.children.push(item);
        }
    }
    return rootItems;
}
 
// 示例数据
const items = [
    { id: 1, parentId: null },
    { id: 2, parentId: 1 },
    { id: 3, parentId: 1 },
    { id: 4, parentId: 2 },
    { id: 5, parentId: 3 },
    { id: 6, parentId: 4 },
    { id: 7, parentId: 6 },
    { id: 8, parentId: 7 }
];
 
// 使用函数转换成树状结构
const tree = arrayToTree(items);
console.log(tree);

 

TypeScript

interface TreeNode {
  id: number;
  parentId: number | null;
  name: string;
  children?: TreeNode[];
}

const data: TreeNode[] = [
  { id: 1, parentId: null, name: 'Root 1' },
  { id: 2, parentId: 1, name: 'Child 1.1' },
  { id: 3, parentId: 1, name: 'Child 1.2' },
  { id: 4, parentId: 2, name: 'Child 1.1.1' },
  { id: 5, parentId: null, name: 'Root 2' },
  { id: 6, parentId: 5, name: 'Child 2.1' }
];

function buildTree(data: TreeNode[]): TreeNode[] {
  // 初始化一个数据字典,方便查找
  const dataDictionary: { [key: number]: TreeNode & { children: TreeNode[] } } = data.reduce((acc, item) => {
    acc[item.id] = { ...item, children: [] };
    return acc;
  }, {} as { [key: number]: TreeNode & { children: TreeNode[] } });

  // 构建树结构
  const tree: TreeNode[] = [];

  data.forEach(item => {
    if (item.parentId === null) {
      // 根节点,加入树结构的根数组
      tree.push(dataDictionary[item.id]);
    } else {
      // 子节点,找到父节点并加入其children数组
      if (dataDictionary[item.parentId]) {
        dataDictionary[item.parentId].children.push(dataDictionary[item.id]);
      }
    }
  });

  return tree;
}

const treeData = buildTree(data);
console.log(JSON.stringify(treeData, null, 2));

 

标签:TreeNode,JavaScript,children,item,parentId,const,id
From: https://www.cnblogs.com/ximu1009/p/18552746

相关文章

  • 【PhpStorm 2024 软件下载与入门级安装教程】-高效智能的 PHP IDE
    支持主流框架PhpStorm完美支持Symfony、Drupal、WordPress、ZendFramework、Laravel、Magento、Joomla!、CakePHP、Yii...等各种主流框架。全能的PHP工具内建编辑器实际“了解”您的代码并且深刻理解其结构,支持所有PHP语言功能,在开发现代技术和维护遗留项目皆可完美适用。......
  • javascript-表达式与操作符
    1.数组初始化二维数组letmatrix=[[1,2,3],[4,5,6],[7,8,9]];未定义元素undefinedletsparseArray=[1,,,,5];包含三个未定义元素2.对象初始化letp={x:2.3,y:-1.2};点对象包含x,y坐标letq={};空对象q.x=2.3;q.y=-1.2;赋值3.函数letsquare=function(x){returnx*x;};......
  • 前端必知必会-JavaScript For Of循环
    文章目录JavaScriptForOf循环循环遍历数组循环遍历字符串总结JavaScriptForOf循环ForOf循环JavaScriptforof语句循环遍历可迭代对象的值。它允许您循环遍历可迭代数据结构,例如数组、字符串、映射、节点列表等:语法for(variableofiterable){//要......
  • 前端必知必会-JavaScript Break and Continue
    文章目录JavaScriptBreak和ContinueBreak语句Continue语句JavaScript标签总结JavaScriptBreak和Continuebreak语句“跳出”循环。continue语句“跳过”循环中的一次迭代。Break语句break语句用于“跳出”switch()语句。break语句也可用于跳出......
  • IDMOS-低代码开发平台(一)
    官网        IDMOS基于.NET的低代码开发平台和运维中心,集成管理后台、开放平台、服务监控、日志管理、运维管理等一系列功能,致力于为用户提供一站式的解决方案。介绍开发平台            ​IDMOS低代码开发平台​提供直观易用的操作界面,使用户能......
  • 【IntelliJ Idea 软件下载与入门级安装教程】
    IntelliJIDEA2024是一款功能强大的、智能的、且专为Java编程领域者所量身打造的专业的JAVAIDE编程工具程序应用,也是java语言开发的集成环境,在业界被公认为最好的java开发工具之一。并且IntelliJIDEA软件整体界面简洁友好、功能界面一目了然,不仅集JavaDoc预览支持、智能代码、......
  • Android 10.0 Service启动流程分析一
    1.概述在10.0的系统rom开发中,app中对于Service的使用也是非常常见的,但是在系统framework中同样需要了解service的启动流程,看下service具体是怎么样启动的,这样就可以方便解决一些服务相关问题2.Service启动流程分析一的核心类frameworks\base\core\java\android\app\Contex......
  • SIDCHG(在64位Windows上为SIDCHG64)3.0j 是一个命令行工具,用于修改本地计算机的安全标识
    SIDCHGSIDChangeUtility SIDCHG-SID更改工具概述SIDCHG(在64位Windows上为SIDCHG64)3.0j是一个命令行工具,用于修改本地计算机的安全标识符(SID)和计算机名,适用于Windows2022/11/2019/2016/10/8.1/2012R2/8/2012/7/2008R2。它将当前的计算机SID替换为新的随机SID。此外,它......
  • SIDCHGU(SIDCHGU64 在 64 位 Windows 上)1.0e 是一个命令行实用程序,用于将 Windows 用户
    SIDCHGU-用于复制或移动用户配置文件的实用程序概述SIDCHGU(SIDCHGU64在64位Windows上)1.0e是一个命令行实用程序,用于将Windows用户配置文件(包括带有子目录的用户主目录)从一个用户复制或移动到另一个用户,适用于Windows2022/11/2019/2016/10/8.1/2012R......
  • javaScript交互案例
    1、模态框(弹出框)(1)、需求:点击弹出层,会弹出模态框,并且显示灰色半透明的遮挡层点击关闭按钮,可以关闭模态框,并且同时关闭半透明遮挡层鼠标放在模态框最上面一行,可以按住鼠标拖拽模态框在页面中移动鼠标松开,可以停止拖动模态框移动思路:点击弹出层,模态框和遮挡层就会显示出来d......