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

📌 三、总结

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

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

相关推荐
iphone1082 分钟前
一次编码,多端运行:HTML5多终端调用
前端·javascript·html·html5
老坛00120 分钟前
2025决策延迟的椭圆算子分析:锐减协同工具的谱间隙优化
前端
老坛00121 分钟前
从记录到预测:2025新一代预算工具如何通过AI实现前瞻性资金管理
前端
今禾24 分钟前
" 当Base64遇上Blob,图像转换不再神秘,让你的网页瞬间变身魔法画布! "
前端·数据可视化
华科云商xiao徐28 分钟前
高性能小型爬虫语言与代码示例
前端·爬虫
十盒半价29 分钟前
深入理解 React useEffect:从基础到实战的全攻略
前端·react.js·trae
攀登的牵牛花30 分钟前
Electron+Vue+Python全栈项目打包实战指南
前端·electron·全栈
iccb101330 分钟前
我是如何实现在线客服系统的极致稳定性与安全性的
前端·javascript·后端
一大树31 分钟前
Vue3祖孙组件通信方法总结
前端·vue.js
不要进入那温驯的良夜32 分钟前
跨平台UI自动化-Appium
前端