使用递归扁平化JavaScript树形数组并构建父子ID映射-js教程-PHP中文网

使用递归扁平化JavaScript树形数组并构建父子ID映射

本文详细介绍了如何使用javascript递归算法将复杂的嵌套树形结构数组转换为扁变列表。通过在每个元素中添加 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 示例如下：

立即学习“Java免费学习笔记（深入）”；

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"],
  },
];

登录后复制

核心概念：递归遍历

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

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

解决方案实现

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

即构数智人

即构数智人是由即构科技推出的AI虚拟数字人视频创作平台，支持数字人形象定制、短视频创作、数字人直播等。

查看详情

flattenArray 主函数

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

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

    // ... traverse 递归函数定义在里面 ...

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

登录后复制

traverse 递归函数详解

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

    const traverse = (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) => traverse(child, node.id)); // 递归调用，并传入当前节点的ID作为子节点的 parentId
        }
    }

登录后复制

关键步骤解析：

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

完整代码示例

将上述逻辑整合，形成完整的JavaScript函数：

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 traverse = (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) => traverse(child, node.id)); // 递归调用，并传入当前节点的ID作为子节点的 parentId
        }
    }

    // 遍历原始数组的顶层元素，启动递归
    array.forEach((arrayItem) => traverse(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"
    ]
  }
]

登录后复制

注意事项与最佳实践

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

总结

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

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