本文详细介绍了如何使用j*ascript递归算法将复杂的嵌套树形结构数组转换为扁变列表。通过在每个元素中添加 parentid 和 childrenid 属性，我们能够有效地维护数据间的层级关系，从而简化数据处理和查询，适用于需要扁平化层次数据的场景。

在前端开发或数据处理中，我们经常会遇到以树形结构表示的数据，例如菜单、部门组织架构或文件系统。虽然树形结构直观地展现了层级关系，但在某些操作（如搜索、过滤或数据传输）中，将其扁平化为一维列表会更加高效。本教程将深入探讨如何利用递归算法，将一个包含多层嵌套 children 属性的数组扁平化，并在扁平化后的每个元素中准确记录其父级和子级的ID，从而在扁平化的同时保留重要的层级关联信息。

问题阐述与目标

假设我们有一个 transferClasses 数组，它代表了一组具有层级关系的课程数据。每个课程对象可能包含一个 children 数组，表示其子课程。我们的目标是将这个嵌套的数组结构转换为一个扁平化的列表 flatList。在这个扁平化过程中，每个课程对象除了保留原有的 id、name、isTransfer 属性外，还需要新增两个属性：

• childrenId: 一个数组，包含当前课程所有直接子课程的 id。
• parentId: 一个数组，包含当前课程的直接父课程的 id。对于顶层课程，parentId 为 [null]。

以下是原始的嵌套数据结构示例：

const transferClasses = [
  {
    id: "c5d91430-aaab-ed11-8daf-85953743f5cc",
    name: "Class1",
    isTransfer: false,
    children: [],
  },
  {
    id: "775cb75d-aaab-ed11-8daf-85953743f5cc",
    name: "Class2",
    isTransfer: false,
    children: [
      {
        id: "89134f56-3ef6-ed11-8daf-85953743f5cc",
        name: "Class2-1",
        isTransfer: false,
        children: [],
      },
      {
        id: "89134f56-3ef6-ed11-8daf-85953743f4cc",
        name: "Class2-2",
        isTransfer: false,
        children: [
          {
            id: "89134f56-3ef6-ed11-8daf-85953743f4de",
            name: "Class2-2-1",
            isTransfer: false,
            children: [],
          },
          {
            id: "89134f56-3ef6-ed11-8daf-85953743f1ce",
            name: "Class2-2-2",
            isTransfer: false,
            children: [],
          },
        ],
      },
    ],
  },
];

我们期望得到的扁平化列表 flatList 示例如下：

const flatList = [
  {
    id: "c5d91430-aaab-ed11-8daf-85953743f5cc",
    name: "Class1",
    isTransfer: false,
    childrenId: [],
    parentId: [null], // 顶层节点
  },
  {
    id: "775cb75d-aaab-ed11-8daf-85953743f5cc",
    name: "Class2",
    isTransfer: false,
    childrenId: [
      "89134f56-3ef6-ed11-8daf-85953743f5cc",
      "89134f56-3ef6-ed11-8daf-85953743f4cc",
    ],
    parentId: [null], // 顶层节点
  },
  {
    id: "89134f56-3ef6-ed11-8daf-85953743f5cc",
    name: "Class2-1",
    isTransfer: false,
    childrenId: [],
    parentId: ["775cb75d-aaab-ed11-8daf-85953743f5cc"],
  },
  {
    id: "89134f56-3ef6-ed11-8daf-85953743f4cc", // 注意这里ID修正为Class2-2的ID
    name: "Class2-2",
    isTransfer: false,
    childrenId: [
      "89134f56-3ef6-ed11-8daf-85953743f4de",
      "89134f56-3ef6-ed11-8daf-53743f1ce",
    ],
    parentId: ["775cb75d-aaab-ed11-8daf-85953743f5cc"],
  },
  {
    id: "89134f56-3ef6-ed11-8daf-85953743f4de",
    name: "Class2-2-1",
    isTransfer: false,
    childrenId: [],
    parentId: ["89134f56-3ef6-ed11-8daf-85953743f4cc"],
  },
  {
    id: "89134f56-3ef6-ed11-8daf-85953743f1ce",
    name: "Class2-2-2",
    isTransfer: false,
    childrenId: [],
    parentId: ["89134f56-3ef6-ed11-8daf-85953743f4cc"],
  },
];

核心概念：递归遍历

处理树形或嵌套结构数据时，递归是一种非常自然且强大的方法。其核心思想是函数调用自身来处理子问题，直到达到基本情况（例如，一个节点没有子节点）。在这个场景中，我们可以定义一个递归函数来遍历每个节点：

1. 处理当前节点，将其转换为扁平化格式并记录其子节点ID。
2. 将当前节点的ID作为参数，递归调用自身来处理其所有子节点，以此传递父节点信息。

解决方案实现

我们将创建一个主函数 flattenArray，它将初始化一个空数组来存储扁平化后的结果，并调用一个内部的递归辅助函数 tr*erse 来完成实际的遍历和转换工作。

flattenArray 主函数

这个函数是入口点，它接收原始的嵌套数组作为参数。它会遍历数组的每个顶层元素，并为每个元素启动一次 tr*erse 递归调用。

Mureka

Mureka是昆仑万维最新推出的一款AI音乐创作工具，输入歌词即可生成完整专属歌曲。

1091 查看详情

const flattenArray = (array) => {
    let flatArray = []; // 用于存储扁平化结果的数组

    // ... tr*erse 递归函数定义在里面 ...

    array.forEach((arrayItem) => tr*erse(arrayItem)); // 对顶层元素进行遍历
    return flatArray;
};

tr*erse 递归函数详解

tr*erse 函数是解决方案的核心。它负责处理单个节点，并递归地处理其子节点。

    const tr*erse = (node, parentId = null) => {
        // 1. 解构节点：分离 children 属性和其余属性
        const { children, ...restOfNode } = node;

        // 2. 构建扁平化后的当前节点对象
        flatArray.push({
            ...restOfNode, // 复制节点原有属性
            childrenId: children ? children.map(child => child.id) : [], // 提取所有子节点的ID
            parentId: [parentId], // 将父节点ID存储为数组，顶层节点为 [null]
        });

        // 3. 递归处理子节点
        if (node.children && node.children.length > 0) { // 检查是否存在子节点
            node.children.forEach((child) => tr*erse(child, node.id)); // 递归调用，并传入当前节点的ID作为子节点的 parentId
        }
    }

关键步骤解析：

1. 参数 node 和 parentId: node 是当前正在处理的节点对象，parentId 是当前节点的父节点ID。parentId 默认值为 null，用于处理顶层节点。
2. 解构赋值: const { children, ...restOfNode } = node; 这一行将当前节点的 children 属性分离出来，并将所有其他属性收集到 restOfNode 对象中。这确保了在构建新对象时不会将 children 数组直接复制过去。
3. 构建扁平化对象:
   • ...restOfNode: 展开当前节点除 children 外的所有属性。
   • childrenId: children ? children.map(child => child.id) : []: 如果存在 children 数组，则映射其所有子节点的 id 形成一个 childrenId 数组；否则，为一个空数组。
   • parentId: [parentId]: 将传入的 parentId 封装成一个数组。这是为了与目标输出格式保持一致，即使只有一个父节点，也将其表示为数组。
4. 递归调用: if (node.children && node.children.length > 0) 检查当前节点是否有子节点。如果有，则遍历 node.children 数组，对每个子节点递归调用 tr*erse 函数。在递归调用时，当前节点的 node.id 被作为 parentId 传递给子节点，从而建立了父子关系链。

完整代码示例

将上述逻辑整合，形成完整的J*aScript函数：

const transferClasses = [
  {
    id: "c5d91430-aaab-ed11-8daf-85953743f5cc",
    name: "Class1",
    isTransfer: false,
    children: [],
  },
  {
    id: "775cb75d-aaab-ed11-8daf-85953743f5cc",
    name: "Class2",
    isTransfer: false,
    children: [
      {
        id: "89134f56-3ef6-ed11-8daf-85953743f5cc",
        name: "Class2-1",
        isTransfer: false,
        children: [],
      },
      {
        id: "89134f56-3ef6-ed11-8daf-85953743f4cc",
        name: "Class2-2",
        isTransfer: false,
        children: [
          {
            id: "89134f56-3ef6-ed11-8daf-85953743f4de",
            name: "Class2-2-1",
            isTransfer: false,
            children: [],
          },
          {
            id: "89134f56-3ef6-ed11-8daf-85953743f1ce",
            name: "Class2-2-2",
            isTransfer: false,
            children: [],
          },
        ],
      },
    ],
  },
];

const flattenArray = (array) => {
    let flatArray = []; // 存储扁平化结果的数组

    const tr*erse = (node, parentId = null) => {
        // 解构节点，分离 children 属性和其余属性
        const { children, ...restOfNode } = node;

        // 构建扁平化后的当前节点对象并添加到结果数组
        flatArray.push({
            ...restOfNode,
            childrenId: children && children.length > 0 ? children.map(child => child.id) : [],
            parentId: [parentId], // 将父节点ID存储为数组
        });

        // 如果存在子节点，则递归处理
        if (children && children.length > 0) {
            children.forEach((child) => tr*erse(child, node.id)); // 递归调用，并传入当前节点的ID作为子节点的 parentId
        }
    }

    // 遍历原始数组的顶层元素，启动递归
    array.forEach((arrayItem) => tr*erse(arrayItem));

    return flatArray;
};

const flatList = flattenArray(transferClasses);
console.log(JSON.stringify(flatList, null, 2));

输出结果：

[
  {
    "id": "c5d91430-aaab-ed11-8daf-85953743f5cc",
    "name": "Class1",
    "isTransfer": false,
    "childrenId": [],
    "parentId": [
      null
    ]
  },
  {
    "id": "775cb75d-aaab-ed11-8daf-85953743f5cc",
    "name": "Class2",
    "isTransfer": false,
    "childrenId": [
      "89134f56-3ef6-ed11-8daf-85953743f5cc",
      "89134f56-3ef6-ed11-8daf-85953743f4cc"
    ],
    "parentId": [
      null
    ]
  },
  {
    "id": "89134f56-3ef6-ed11-8daf-85953743f5cc",
    "name": "Class2-1",
    "isTransfer": false,
    "childrenId": [],
    "parentId": [
      "775cb75d-aaab-ed11-8daf-85953743f5cc"
    ]
  },
  {
    "id": "89134f56-3ef6-ed11-8daf-85953743f4cc",
    "name": "Class2-2",
    "isTransfer": false,
    "childrenId": [
      "89134f56-3ef6-ed11-8daf-85953743f4de",
      "89134f56-3ef6-ed11-8daf-85953743f1ce"
    ],
    "parentId": [
      "775cb75d-aaab-ed11-8daf-85953743f5cc"
    ]
  },
  {
    "id": "89134f56-3ef6-ed11-8daf-85953743f4de",
    "name": "Class2-2-1",
    "isTransfer": false,
    "childrenId": [],
    "parentId": [
      "89134f56-3ef6-ed11-8daf-85953743f4cc"
    ]
  },
  {
    "id": "89134f56-3ef6-ed11-8daf-85953743f1ce",
    "name": "Class2-2-2",
    "isTransfer": false,
    "childrenId": [],
    "parentId": [
      "89134f56-3ef6-ed11-8daf-85953743f4cc"
    ]
  }
]

注意事项与最佳实践

1. parentId 作为数组: 在本示例中，parentId 被设计为包含单个父ID的数组（或 [null]）。这可能在某些场景下有用，例如未来可能支持多父节点的情况，或者为了统一数据结构。如果确定每个节点只有一个父节点，也可以将其设计为直接存储父ID（例如 parentId: parentId || null），具体取决于业务需求。
2. 空 children 数组处理: 代码中 children && children.length > 0 的检查确保了在节点没有子节点时，childrenId 属性被正确地赋值为空数组 []，避免了 map 方法在 undefined 或空数组上调用时可能出现的问题。
3. 性能考量: 对于非常深或非常大的树形结构，递归可能会导致栈溢出（Stack Overflow）或性能问题。J*aScript引擎通常对递归深度有限制。对于极端情况，可以考虑使用迭代方法（例如，使用栈或队列模拟递归）来避免栈溢出。然而，对于大多数常见的树形结构，递归方法是简洁且高效的。
4. 数据不变性: 本方案通过创建新对象并添加到 flatArray 来实现扁平化，原始的 transferClasses 数组及其内部对象保持不变，这符合函数式编程中数据不变性的原则。

总结

通过本教程，我们学习了如何利用J*aScript的递归能力，有效地将复杂的嵌套树形结构数组扁平化为一维列表。这种方法不仅简化了数据结构，还通过添加 parentId 和 childrenId 属性，巧妙地保留了原始数据的层级关系。掌握这种技术对于处理各种层级数据场景都非常有用，能够帮助开发者构建更灵活、更易于管理的数据模型。

以上就是使用递归扁平化J*aScript树形数组并构建父子ID映射的详细内容，更多请关注其它相关文章！

相关文章： Win10怎么制作U盘启动盘 Win10系统安装U盘制作教程【详解】  必由学官网快捷入口 必由学网页版在线学习平台  抖音DOU+怎么投最有效 抖音付费推广的ROI提升技巧  天眼查怎么看公司融资情况 天眼查企业融资历史查询步骤【攻略】  一加 14R 快充无反应_一加 14R 充电优化  composer的"require-dev"部分是用来做什么的？  钉钉视频会议画面卡顿如何解决 钉钉会议画面优化方法  PyTorch模型训练准确率不提升：诊断与修复常见指标计算错误  抖音网页版企业服务中心登录入口_抖音网页版企业登录平台  b站如何看历史记录_b站观看历史找回方法  解决 Express.js 中 PUT 请求密码修改失败的路由配置指南  excel如何生成目录 excel一键生成工作表目录超链接  Mudbox图层蒙版怎么用_Mudbox图层蒙版数字雕刻应用技巧  SteamMachine定价或为699美元 大家想入手吗？  PHP文件上传至S3：策略、考量与避免本地存储的挑战  解决Flask中Quill编辑器内容提交失败及TypeError的指南  如何在CSS中使用浮动制作导航栏_float实现水平菜单  WooCommerce 购物车显示所有交叉销售商品教程  J*aScript中管理异步API调用：确保操作顺序与数据一致性  Windows7怎么硬盘安装 Windows7提取ISO镜像到非系统盘并运行setup.exe实现硬盘直装【教程】  红果短剧网页版官网入口 官方最新网址发布  HTML元素状态管理：根据DIV内容动态启用/禁用按钮  UE5.7引擎表现爆炸优化无敌！5090跑4K稳定60FPS  Win11怎么关闭快速启动_Win11彻底关机设置教程  在命令行怎么运行html项目_命令行运行html项目方法【教程】  vivo手机参数配置怎么增强信号_vivo手机参数配置信号增强方法  中兴Axon42Ultra怎样在文件App筛图_iPhone中兴Axon42Ultra文件App筛图【图片筛选】  Python中高效访问嵌套字典与列表中的键值对  LINUX的I/O重定向是什么_深入理解LINUX中 >、>> 与 < 的区别  解决深度学习模型训练初期异常高损失与完美验证准确率问题  怎样使用“本地安全策略”提升Windows安全性_Secpol.msc配置指南【高手】  印象笔记如何设提醒任务防漏执行_印象笔记设提醒任务防漏执行【任务提醒】  PHP教程：将数据库查询结果动态展示到HTML Textarea的最佳实践  word邮件合并后日期格式不对怎么改_Word邮件合并日期格式修改方法  蛙漫正版漫画平台入口_蛙漫免费阅读全站漫画资源  如何使用CaptainHook和Composer管理Git钩子_在提交前自动运行代码检查的Composer配置  C++如何实现一个智能指针_手动实现C++ shared_ptr的引用计数功能  绝地鸭卫平a核爆刀流玩法攻略  QQ邮箱稳定登录入口_QQ邮箱官方网站网页版使用  QQ邮箱官网登录入口 QQ邮箱网页版邮箱快速登录  Win11输入法不见了怎么办_Windows11恢复语言栏显示方法  Spring Boot嵌入式服务器与J*a EE：功能支持深度解析  Win10怎么设置静态IP地址 Win10手动配置IP地址步骤【指南】  怎样更改Windows系统的默认安装路径_避免C盘爆满的终极设置【技巧】  win11开机启动修复循环怎么办 Win11无法进入系统高级启动解决方法【修复】  文心一言怎样用批量生成做多版文案_文心一言用批量生成做多版文案【批量创作】  反效果？《战地6》免费试玩开启后玩家数不升反降  顺丰快递查单号物流信息 顺丰快递小程序查询入口  uc浏览器网页版入口 uc浏览器网页版最新网址  Sublime怎么配置Nim语言环境_Sublime Nim代码高亮与补全