js中处理树形数据

平时开发中会经常碰到树形数据,而我们存储的数据往往是扁平的数据,需要在前端或者后端对数据进行进一步处理成前端组件需要的树形数据。在操作完树形数据后再转换成扁平数据发给后端。下面JavaScript 中处理树形数据的方法,包括构建树和解析树。

一、构建树

假设我们有一个扁平的数组数据,每个元素包含 idparentIdname 等属性,我们可以将其构建为树形结构。以下是一个实现函数:

javascript 复制代码
function buildTree(arr, parentId = null) {
  let tree = [];
  arr.forEach(item => {
    if (item.parentId === parentId) {
      let children = buildTree(arr, item.id);
      if (children.length > 0) {
        item.children = children;
      }
      tree.push(item);
    }
  });
  return tree;
}

以下是使用示例:

javascript 复制代码
let flatData = [
  { id: 1, parentId: null, name: 'Root' },
  { id: 2, parentId: 1, name: 'Child 1' },
  { id: 3, parentId: 1, name: 'Child 2' },
  { id: 4, parentId: 3, name: 'Grandchild 1' }
];
let treeData = buildTree(flatData);
console.log(treeData);

解释:

  • buildTree 函数接收一个扁平数组 arr 和一个可选的 parentId 作为参数,默认为 null,用于表示根节点。
  • 函数使用 forEach 遍历数组中的每个元素。
  • 如果元素的 parentId 等于传入的 parentId,则递归调用 buildTree 函数查找其子节点,并将结果存储在 children 属性中。
  • 最终将满足条件的元素添加到 tree 数组中。

二、解析树

假设我们有一个树形结构的数据,我们要将其解析为一个扁平的数组。以下是一个实现函数:

javascript 复制代码
function flattenTree(tree, parentId = null) {
  let flatArray = [];
  tree.forEach(item => {
    let newItem = {...item };
    newItem.parentId = parentId;
    flatArray.push(newItem);
    if (item.children) {
      flatArray = flatArray.concat(flattenTree(item.children, item.id));
    }
  });
  return flatArray;
}

以下是使用示例:

javascript 复制代码
let treeData = [
  {
    id: 1,
    name: 'Root',
    children: [
      { id: 2, name: 'Child 1' },
      {
        id: 3,
        name: 'Child 2',
        children: [
          { id: 4, name: 'Grandchild 1' }
        ]
      }
    ]
  }
];
let flatData = flattenTree(treeData);
console.log(flatData);

解释:

  • flattenTree 函数接收一个树形结构 tree 和一个可选的 parentId 作为参数,默认为 null
  • 函数使用 forEach 遍历树中的每个元素。
  • 首先将当前元素复制到 newItem 中,并设置 parentId
  • newItem 加入到 flatArray 中。
  • 如果元素有 children,递归调用 flattenTree 函数将子节点添加到 flatArray 中,并将当前元素的 id 作为子节点的 parentId
相关推荐
LL.。3 分钟前
同步回调和异步回调
开发语言·前端·javascript
0wioiw015 分钟前
Python基础(吃洋葱小游戏)
开发语言·python·pygame
栗子~~22 分钟前
Python实战- Milvus 向量库 使用相关方法demo
开发语言·python·milvus
狐凄25 分钟前
Python实例题:基于 Flask 的在线聊天系统
开发语言·python
狐凄25 分钟前
Python实例题:基于 Flask 的任务管理系统
开发语言·python
Mintopia28 分钟前
B 样条曲线:计算机图形学里的 “曲线魔术师”
前端·javascript·计算机图形学
Mintopia34 分钟前
Three.js 3D 世界中的噪声运动:当数学与像素共舞
前端·javascript·three.js
来碗疙瘩汤37 分钟前
使用 Three.js 与 CSS3DRenderer 在 Vue3 中加载网页为 3D 模型
前端·javascript
打野赵怀真39 分钟前
在TypeScript中装饰器有哪些应用场景?
前端·javascript
destinying41 分钟前
vite学习笔记
前端·javascript