🚀 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 }
]

📌 三、总结

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

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

相关推荐
WEI_Gaot几秒前
zustand 基础和进阶
前端·react.js
程序员Qian3 分钟前
从开发天气MCP服务入门什么是MCP
前端
用户2031196600964 分钟前
sheet的基本用法
前端
火星思想10 分钟前
都2025年了,还在问构建工具是干嘛的?
前端·前端框架·设计
杨进军14 分钟前
MutationObserver 实现 iframe 自适应高度
前端
火星思想15 分钟前
Promise 核心知识点(非基础)
前端·javascript·面试
前端大白话15 分钟前
炸裂!10个 React 实战技巧,让你的代码从“青铜”秒变“王者”
前端·javascript·react.js
Paramita16 分钟前
Koa源码解读
前端
用户614722537720316 分钟前
JavaScript 性能优化实战:从理论到落地的全面指南
前端
专业掘金17 分钟前
0426 手打基础丸
前端