🚀 JavaScript 数组转树结构与扁平化的终极教程

📌 一、数组转树结构

1.1 什么是树结构?

树结构是一种层次化的数据结构,通常用于表示具有父子关系的数据。例如,组织架构、分类目录等。树的每个节点可以有多个子节点,但每个节点只有一个父节点。

1.2 示例数据

假设我们有以下扁平化的数组,表示一个组织架构:

javascript 复制代码
const data = [
    { id: 1, name: 'CEO', parentId: null },
    { id: 2, name: 'CTO', parentId: 1 },
    { id: 3, name: 'CFO', parentId: 1 },
    { id: 4, name: 'Dev Team', parentId: 2 },
    { id: 5, name: 'QA Team', parentId: 2 },
    { id: 6, name: 'Finance', parentId: 3 }
];

1.3 转换函数

我们可以使用递归函数来将这个数组转换为树结构:

javascript 复制代码
function buildTree(data, parentId = null) {
    return data
        .filter(item => item.parentId === parentId)
        .map(item => ({
            ...item,
            children: buildTree(data, item.id)
        }));
}

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

1.4 结果展示

运行上述代码后,输出的树结构如下:

json 复制代码
[
  {
    "id": 1,
    "name": "CEO",
    "parentId": null,
    "children": [
      {
        "id": 2,
        "name": "CTO",
        "parentId": 1,
        "children": [
          {
            "id": 4,
            "name": "Dev Team",
            "parentId": 2,
            "children": []
          },
          {
            "id": 5,
            "name": "QA Team",
            "parentId": 2,
            "children": []
          }
        ]
      },
      {
        "id": 3,
        "name": "CFO",
        "parentId": 1,
        "children": [
          {
            "id": 6,
            "name": "Finance",
            "parentId": 3,
            "children": []
          }
        ]
      }
    ]
  }
]

📌 二、树结构扁平化

2.1 扁平化的意义

在某些情况下,我们可能需要将树结构转换回扁平化的数组,以便于存储或传输。扁平化的数据结构更易于处理和操作。

2.2 扁平化函数

我们可以使用递归来实现树结构的扁平化:

javascript 复制代码
function flattenTree(tree) {
    return tree.reduce((acc, item) => {
        acc.push({ id: item.id, name: item.name, parentId: item.parentId });
        if (item.children) {
            acc = acc.concat(flattenTree(item.children));
        }
        return acc;
    }, []);
}

const flatArray = flattenTree(tree);
console.log(flatArray);

2.3 结果展示

运行上述代码后,输出的扁平化数组如下:

json 复制代码
[
  { "id": 1, "name": "CEO", "parentId": null },
  { "id": 2, "name": "CTO", "parentId": 1 },
  { "id": 4, "name": "Dev Team", "parentId": 2 },
  { "id": 5, "name": "QA Team", "parentId": 2 },
  { "id": 3, "name": "CFO", "parentId": 1 },
  { "id": 6, "name": "Finance", "parentId": 3 }
]

📌 三、总结

通过以上的示例,我们学习了如何将扁平化的数组转换为树结构,以及如何将树结构扁平化为数组。这两种操作在前端开发中非常常见,掌握它们将大大提升你的数据处理能力!🌟

希望这个教程对你有所帮助,如果你有任何问题或想法,欢迎在评论区留言!让我们一起交流学习吧!💬

相关推荐
程序员爱钓鱼2 小时前
Go语言实战案例 — 项目实战篇:简易博客系统(支持评论)
前端·后端·go
excel9 小时前
ES6 中函数的双重调用方式:fn() 与 fn\...``
前端
可乐爱宅着9 小时前
全栈框架next.js入手指南
前端·next.js
你的人类朋友10 小时前
什么是API签名?
前端·后端·安全
会豪12 小时前
Electron-Vite (一)快速构建桌面应用
前端
中微子12 小时前
React 执行阶段与渲染机制详解(基于 React 18+ 官方文档)
前端
唐某人丶12 小时前
教你如何用 JS 实现 Agent 系统(2)—— 开发 ReAct 版本的“深度搜索”
前端·人工智能·aigc
中微子12 小时前
深入剖析 useState产生的 setState的完整执行流程
前端
遂心_13 小时前
JavaScript 函数参数传递机制:一道经典面试题解析
前端·javascript
小徐_233313 小时前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts