将一维数组转树形

简介: 将一维数组转树形

在Element Plus框架中,将一维数组转换为树形结构通常涉及到一个转换函数,该函数可以根据数组中每个元素的特定属性(如父ID)来构建层级关系。以下是一个简单的JavaScript函数,用于将具有父子关系的一维数组转换为树形结构:

首先初始化了一个rootItems数组来存放根节点,以及一个lookup对象来建立id和对应项的映射。然后,它遍历输入数组中的每一项,根据每一项的idparentId构建出树形结构。

在遍历过程中,函数首先检查lookup对象中是否已经存在当前项的id,如果不存在则创建一个新的对象,并初始化一个children数组。然后,它根据parentId查找父节点,如果找到了父节点,则将当前项添加到父节点的children数组中;如果找不到父节点(即parentIdnull),则将当前项作为根节点添加到rootItems数组中。

function arrayToTree(items) {
  const rootItems = [];
  const lookup = {};
  for (const item of items) {
    const itemId = item.id;
    const parentId = item.parentId;
    if (!lookup[itemId]) lookup[itemId] = { ['children']: [] };
    lookup[itemId] = { ...item, children: lookup[itemId]['children'] };
    const parent = parentId ? lookup[parentId] : null;
    if (parent) {
      if (!parent.children) parent.children = [];
      parent.children.push(lookup[itemId]);
    } else {
      rootItems.push(lookup[itemId]);
    }
  }
  return rootItems;
}
// 示例使用
const items = [
  { id: 1, title: 'Item 1', parentId: null },
  { id: 2, title: 'Item 2', parentId: 1 },
  { id: 3, title: 'Item 3', parentId: 1 },
  { id: 4, title: 'Item 4', parentId: 2 },
  { id: 5, title: 'Item 5', parentId: 3 },
];
const tree = arrayToTree(items);
console.log(tree);

在这个例子中,arrayToTree函数接受一个具有idparentId属性的一维数组items。函数创建了一个lookup对象,用于快速查找和构建层级关系。最后,它返回了一个根元素列表rootItems,这个列表代表了树的根部。

相关文章
uniapp页面之间通信、传参、传值方法(父→传→子,子→传→父);获取被打开页面的数据→传→当前页面;当前页面的数据→传→被打开页面
uniapp页面之间通信、传参、传值方法(父→传→子,子→传→父);获取被打开页面的数据→传→当前页面;当前页面的数据→传→被打开页面
|
前端开发 JavaScript 安全
揭秘!前端大牛们如何高效解决跨域问题,提升开发效率!
【10月更文挑战第30天】在Web开发中,跨域问题是一大挑战。本文介绍前端大牛们常用的跨域解决方案,包括JSONP、CORS、postMessage和Nginx/Node.js代理,对比它们的优缺点,帮助初学者提升开发效率。
375 4
项目中使用antd中的upload组件file对象到底是info.file还是info.file.originFileObj_坑
在Ant Design的Upload组件中,`onChange`事件处理函数接收一个对象参数,其中`file`字段在不同情况下可能是一个File对象或包含`originFileObj`属性的对象。为了兼容,可以使用`info.file.originFileObj ? info.file.originFileObj : info.file`来确保获取到原始的File对象。官方建议这种写法,并将在未来的大版本中统一返回包含`originFileObj`属性的对象。
530 1
项目中使用antd中的upload组件file对象到底是info.file还是info.file.originFileObj_坑
|
JavaScript
vue3 如何在 jsx中使用 component 组件
component 组件是 vue 在模板中加载动态组件的方式,在 jsx 中可以使用if...else自己处理
558 0
|
域名解析 弹性计算 安全
无法ping通ECS服务器公网IP的排查方法
无法ping通ECS服务器公网IP的排查方法
|
SQL 算法 大数据
深入解析力扣184题:部门工资最高的员工(子查询与窗口函数详解)
深入解析力扣184题:部门工资最高的员工(子查询与窗口函数详解)
|
JavaScript
axios拦截器:每次请求自动带上 token
axios拦截器:每次请求自动带上 token
463 0
|
机器学习/深度学习 人工智能 前端开发
阿里巴巴D2 前端论坛最全视频来了!(附PPT下载) | 6大专题持续更新
D2 前端技术论坛 (Designer & Developer Frontend Technology Forum, 简称 D2),是由阿里经济体前端委员会主办的面向全球前端领域的技术论坛,立志于建设一个促进业内交流、引领前端领域发展的平台。目前 D2 已经成功地举办了13届,为国内外前端领域的开发者和设计者提供了共同探讨行业发展的机会,以技术会友、一起分享技术的乐趣。
26804 0
阿里巴巴D2 前端论坛最全视频来了!(附PPT下载) | 6大专题持续更新
|
安全
带你手搓阻塞队列——自定义实现
带你手搓阻塞队列——自定义实现
276 0