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
相关推荐
ptu小鹏4 小时前
类和对象(中)
开发语言·c++
来自星星的坤4 小时前
Vue 3中如何封装API请求:提升开发效率的最佳实践
前端·javascript·vue.js
vvilkim6 小时前
全面解析React内存泄漏:原因、解决方案与最佳实践
前端·javascript·react.js
vvilkim6 小时前
React批处理(Batching)更新机制深度解析
前端·javascript·react.js
Bayi·6 小时前
前端面试场景题
开发语言·前端·javascript
碎梦归途6 小时前
23种设计模式-结构型模式之享元模式(Java版本)
java·开发语言·jvm·设计模式·享元模式
Xiaoyu Wang6 小时前
Go协程的调用与原理
开发语言·后端·golang
bigear_码农6 小时前
python异步协程async调用过程图解
开发语言·python·线程·进程·协程
程序猿熊跃晖7 小时前
Vue中如何优雅地处理 `<el-dialog>` 的关闭事件
前端·javascript·vue.js
进取星辰7 小时前
12、高阶组件:魔法增幅器——React 19 HOC模式
前端·javascript·react.js