如何递归迭代嵌套类数组，生成含父ID与子ID的扁平列表？

问题背景 #

有一个嵌套结构的类数组，需要递归转换为扁平列表，每个元素需包含父级ID列表和子级ID列表。现有代码已尝试处理子ID，但无法正确添加父ID。

原始嵌套数组 #

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 flatList = [
  {
    id: "c5d91430-aaab-ed11-8daf-85953743f5cc",
    name: "Class1",
    isTransfer: false,
    childrenId: null,
    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"],
  },
];

解决方案 #

现有代码的问题在于：仅处理了顶层元素，未递归遍历子元素；getChildIds未收集递归结果；父ID无法在递归层级中传递。

以下是修正后的递归函数：

export const getFlatList = (classes, parentId = null) => {
  let result = [];

  classes.forEach(cl => {
    // 提取当前元素的子ID列表
    const childrenId = cl.children.length > 0 
      ? cl.children.map(child => child.id) 
      : [];

    // 生成当前元素的扁平条目
    const item = {
      id: cl.id,
      name: cl.name,
      isTransfer: cl.isTransfer,
      childrenId: childrenId.length === 0 && parentId === null ? null : childrenId,
      parentId: parentId ? [parentId] : null
    };

    result.push(item);

    // 递归处理子元素，传递当前元素ID作为父ID
    if (cl.children.length > 0) {
      result = [...result, ...getFlatList(cl.children, cl.id)];
    }
  });

  return result;
};

代码说明 #

1. 递归参数传递：函数新增parentId参数，默认值为null，用于在递归处理子元素时传递父级ID。
2. 子ID处理：直接通过map提取子元素的ID组成列表，顶层空元素的childrenId设为null，非顶层空元素设为[]，匹配示例格式。
3. 父ID设置：如果存在父ID，将其包装为数组；顶层元素父ID为null。
4. 递归收集结果：遍历每个元素时，先将当前条目加入结果数组，再递归处理子元素，把递归返回的结果合并到主结果中。

使用示例 #

const flatClasses = getFlatList(transferClasses);
console.log(flatClasses); // 输出与目标示例一致的扁平列表

内容的提问来源于stack exchange，提问作者ko1p