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

📌 三、总结

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

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

相关推荐
陈皮话梅糖@1 小时前
使用 Provider 和 GetX 实现 Flutter 局部刷新的几个示例
开发语言·javascript·flutter
Yolo@~5 小时前
个人网站:基于html、css、js网页开发界面
javascript·css·html
斯~内克5 小时前
Electron 菜单系统深度解析:从基础到高级实践
前端·javascript·electron
数据知道5 小时前
【YAML】一文掌握 YAML 的详细用法(YAML 备忘速查)
前端·yaml
dr李四维5 小时前
vue生命周期、钩子以及跨域问题简介
前端·javascript·vue.js·websocket·跨域问题·vue生命周期·钩子函数
旭久5 小时前
react+antd中做一个外部按钮新增 表格内部本地新增一条数据并且支持编辑删除(无难度上手)
前端·javascript·react.js
windyrain6 小时前
ant design pro 模版简化工具
前端·react.js·ant design
浪遏6 小时前
我的远程实习(六) | 一个demo讲清Auth.js国外平台登录鉴权👈|nextjs
前端·面试·next.js
GISer_Jing6 小时前
React-Markdown详解
前端·react.js·前端框架
太阳花ˉ6 小时前
React(九)React Hooks
前端·react.js