求助：将含children的JS对象数组转换为指定结构数组

解决方案代码 #

先实现两个核心函数，一个递归处理子数组，另一个遍历原数组生成最终结果：

// 递归处理子数组：保留原数组元素，同时将每个元素的children处理结果追加到数组末尾
function processArray(arr) {
  const processed = [...arr];
  for (const item of arr) {
    if (item.children && Array.isArray(item.children)) {
      const childResult = processArray(item.children);
      processed.push(childResult);
    }
  }
  return processed;
}

// 处理原数组：保留每个父元素，同时将其children的处理结果追加到同级位置
function transformBase(base) {
  const result = [];
  for (const item of base) {
    // 浅拷贝原元素，避免修改原始数据
    result.push({ ...item });
    if (item.children && Array.isArray(item.children)) {
      const childProcessed = processArray(item.children);
      result.push(childProcessed);
    }
  }
  return result;
}

// 测试调用
const base = [
  { name: "Jonh" },
  { name: "jane" },
  { name: "Tom", children: [
      { name: "Jery" },
      { name: "Mart" },
      { name: "Mary", children: [{ name: "bob" }] }
    ]
  },
  { name: "boboy" }
];

const result = transformBase(base);
console.log(result);

TypeScript 版本调整 #

如果使用TypeScript，添加类型定义即可：

interface ColumnItem {
  name: string;
  children?: ColumnItem[];
}

function processArray(arr: ColumnItem[]): (ColumnItem | ColumnItem[])[] {
  const processed: (ColumnItem | ColumnItem[])[] = [...arr];
  for (const item of arr) {
    if (item.children && Array.isArray(item.children)) {
      const childResult = processArray(item.children);
      processed.push(childResult);
    }
  }
  return processed;
}

function transformBase(base: ColumnItem[]): (ColumnItem | ColumnItem[])[] {
  const result: (ColumnItem | ColumnItem[])[] = [];
  for (const item of base) {
    result.push({ ...item });
    if (item.children && Array.isArray(item.children)) {
      const childProcessed = processArray(item.children);
      result.push(childProcessed);
    }
  }
  return result;
}

代码逻辑说明 #

1. processArray 函数：

   • 先复制原数组元素，避免修改原始数据
   • 遍历每个元素，若元素包含合法的children数组，则递归处理该子数组，将处理后的结果追加到当前数组末尾
   • 实现嵌套children的层级展开

2. transformBase 函数：

   • 遍历原数组，先将原元素（浅拷贝）加入结果数组
   • 若当前元素有children数组，调用processArray处理该子数组，将处理后的数组追加到结果数组的同级位置
   • 实现「保留父元素+提取children到同级」的核心需求

你原有代码的问题 #

你的filterChild函数使用map遍历，直接将带children的元素替换为子数组的处理结果，既没有保留原父元素，也没有将子数组的处理结果追加到同级位置，因此无法得到目标结构。

内容的提问来源于stack exchange，提问作者Hưng Nguyễn