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
相关推荐
CodeCraft Studio7 分钟前
借助Aspose.HTML控件,在 Python 中将 HTML 转换为 Markdown
开发语言·python·html·markdown·aspose·html转markdown·asposel.html
QQ_4376643148 分钟前
C++11 右值引用 Lambda 表达式
java·开发语言·c++
aramae8 分钟前
大话数据结构之<队列>
c语言·开发语言·数据结构·算法
封奚泽优31 分钟前
使用Python实现单词记忆软件
开发语言·python·random·qpushbutton·qtwidgets·qtcore·qtgui
你这个年龄怎么睡得着的1 小时前
Babel AST 魔法:Vite 插件如何让你的 try...catch 不再“裸奔”?
前端·javascript·vite
liulilittle2 小时前
C++/CLI与标准C++的语法差异(一)
开发语言·c++·.net·cli·clr·托管·原生
daixin88482 小时前
什么是缓存雪崩?缓存击穿?缓存穿透?分别如何解决?什么是缓存预热?
java·开发语言·redis·缓存
Dream耀2 小时前
提升React移动端开发效率:Vant组件库
前端·javascript·前端框架
你我约定有三2 小时前
RabbitMQ--消息丢失问题及解决
java·开发语言·分布式·后端·rabbitmq·ruby
张北北.2 小时前
【深入底层】C++开发简历4+4技能描述6
java·开发语言·c++