JavaScript中扁平化嵌套数组并构建父子ID关系教程

本教程详细讲解如何使用javascript将复杂的嵌套数组结构扁平化为单一列表。通过递归遍历策略，我们为每个元素动态添加其父级id和子级id列表，从而在扁平化数据中保留原始的层级关系，适用于数据处理和ui展示等场景。

引言：处理嵌套数据结构的挑战

在前端和后端开发中，我们经常会遇到以树形或嵌套数组形式组织的数据，例如文件系统、组织架构、菜单导航或分类目录。虽然这种结构直观地表达了层级关系，但在某些场景下，如数据展示（扁平列表）、全局搜索、数据过滤或与某些API交互时，将这些嵌套数据转换为扁平列表会更加高效和便捷。然而，在扁平化的过程中，如何保留原始的父子关系信息是一个关键挑战。

问题定义：从层级到扁平

假设我们有一个表示课程或分类的嵌套数组，每个对象可能包含一个 children 数组，表示其子级：

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，其中每个元素都包含 id、name、isTransfer，以及新添加的 childrenId（一个包含所有直接子节点ID的数组）和 parentId（一个包含其直接父节点ID的数组，如果不存在则为 null）：

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

注意，目标 flatList 中的 parentId 和 childrenId 都被设计为数组形式，即使只有一个ID。顶层元素的 parentId 为 null。

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

核心策略：递归遍历

处理树形或层级数据结构最自然、最有效的方法是递归。通过定义一个函数来处理单个节点，并在其子节点上递归调用自身，我们可以遍历整个结构。关键在于如何在递归调用中传递上下文信息，特别是父节点的ID，以便为子节点正确设置 parentId。

ReRoom AI

专为室内设计打造的AI渲染工具，可以将模型图、平面图、草图、照片转换为高质量设计效果图。

下载

实现步骤与代码解析

我们将创建一个主函数 flattenArray，它将初始化一个空数组来存储扁平化后的结果，并启动递归过程。

const flattenArray = (array) => {
    let flatArray = []; // 用于存储扁平化后的所有节点

    /**
     * 递归遍历函数，处理单个节点及其子节点
     * @param {object} node - 当前正在处理的节点对象
     * @param {string|null} parentId - 当前节点的父节点ID，顶层节点为null
     */
    const traverse = (node, parentId = null) => {
        // 解构当前节点，将 children 属性分离，其余属性放入 restOfNode
        const { children, ...restOfNode } = node;

        // 构建当前节点的扁平化表示
        flatArray.push({
            ...restOfNode, // 复制原始节点除 children 外的所有属性
            // 提取所有直接子节点的ID，如果 children 不存在或为空，则为 []
            childrenId: children && children.length > 0 ? children.map(child => child.id) : [],
            // 设置父节点ID。如果 parentId 存在，则将其放入数组；否则为 null
            parentId: parentId ? [parentId] : null,
        });

        // 如果当前节点有子节点，则对每个子节点递归调用 traverse
        if (children && children.length > 0) {
            children.forEach((child) => traverse(child, node.id)); // 将当前节点的 id 作为子节点的 parentId 传入
        }
    };

    // 遍历顶层数组的每个元素，启动递归过程
    // 对于顶层元素，其 parentId 默认为 null
    array.forEach((arrayItem) => traverse(arrayItem));

    return flatArray; // 返回最终的扁平化数组
};

代码解析：

1. flatArray 初始化： flatArray 是一个在 flattenArray 函数作用域内声明的数组，用于收集所有扁平化后的节点。
2. traverse 递归函数：
   • 它接收两个参数：node（当前处理的节点）和 parentId（当前节点的父节点ID）。parentId 默认值为 null，用于处理顶层节点。
   • 解构赋值： const { children, ...restOfNode } = node; 这一行将当前节点的 children 属性单独提取出来，其余的属性（如 id, name, isTransfer）则通过 ...restOfNode 收集到一个新对象中。
   • 构建新节点：
     • ...restOfNode 确保原始节点的核心数据被保留。
     • childrenId: 通过 children.map(child => child.id) 收集所有直接子节点的ID。如果 children 数组为空或不存在，则 childrenId 为空数组 []。
     • parentId: 根据 parentId 参数的值来设置。如果 parentId 存在（即当前节点不是顶层节点），则将其包装成一个数组 [parentId]；否则，设置为 null。这与我们目标输出的格式一致。
   • 递归调用： if (children && children.length > 0) 检查当前节点是否有子节点。如果有，则 children.forEach((child) => traverse(child, node.id)) 对每个子节点递归调用 traverse 函数，并将当前节点的 id 作为新的 parentId 传递下去。这是构建父子关系的关键步骤。
3. 启动遍历： array.forEach((arrayItem) => traverse(arrayItem)); 遍历初始输入数组中的每个顶层元素，为它们调用 traverse 函数，并默认将 parentId 设置为 null。

示例用法

使用我们最初的 transferClasses 数组来测试这个函数：

const transferClasses = [
  // ... (同上文定义的 transferClasses 数组)
];

const flatListResult = flattenArray(transferClasses);
console.log(flatListResult);

运行上述代码，将得到符合预期的扁平化 flatList。

注意事项与最佳实践

1. 初始 parentId 处理： 确保顶层元素的 parentId 被正确设置为 null，这是通过 traverse 函数的 parentId = null 默认参数和 array.forEach 的初始调用实现的。
2. childrenId 的健壮性： children && children.length > 0 ? children.map(child => child.id) : [] 确保即使 children 属性不存在或为空数组，childrenId 也能正确地被初始化为空数组，避免运行时错误。
3. parentId 数据结构： 教程中遵循了目标输出的格式，将 parentId 也设计为数组 [id]。在实际应用中，如果父节点只有一个，将其直接存储为字符串 id 可能更常见，但为了保持一致性，我们使用了数组。
4. 纯函数设计： flattenArray 函数是一个纯函数，它不会修改原始的 transferClasses 数组，而是返回一个新的扁平化数组，这符合函数式编程的最佳实践。
5. 性能考量： 递归在处理嵌套结构时非常直观和强大。然而，对于极深（数千层）的嵌套结构，可能会有栈溢出的风险。在大多数Web应用场景中，这种深度是罕见的，因此递归是完全可接受的解决方案。

总结

通过本教程，我们学习了如何利用递归遍历策略，将复杂的嵌套数组结构扁平化为易于管理的单一列表。这个方法不仅有效地展开了层级数据，还巧妙地为每个元素添加了 parentId 和 childrenId 属性，从而在扁平化数据中保留了重要的父子关系信息。这种技术在数据处理、UI组件渲染（如无限滚动列表）以及需要快速查找或过滤数据的场景中都具有广泛的应用价值。掌握递归扁平化是处理树形数据结构的必备技能之一。