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

📌 三、总结

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

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

相关推荐
whysqwhw5 分钟前
鸿蒙工程版本与设备版本不匹配
前端
gnip12 分钟前
http缓存
前端·javascript
我不只是切图仔1 小时前
我只是想给网站加个注册验证码,咋就那么难!
前端·后端
JohnYan1 小时前
工作笔记 - 微信消息发送和处理
javascript·后端·微信
该用户已不存在1 小时前
macOS是开发的终极进化版吗?
前端·后端
小豆包api1 小时前
小豆包AI API × Nano Banana:3D手办 + AI视频生成,「动起来」的神级玩法!
前端·api
陈陈爱java2 小时前
Spring八股文
开发语言·javascript·数据库
布列瑟农的星空2 小时前
大话设计模式——观察者模式和发布/订阅模式的区别
前端·后端·架构
龙在天2 小时前
Vue3 实现 B站 视差 动画
前端
KenXu2 小时前
F2C Prompt to Design、AI 驱动的设计革命
前端