如何从含嵌套detail键的对象数组中提取映射对象（支持无限嵌套）

问题需求 #

给定一个包含多层嵌套detail数组的对象数组，需要将其转换为仅包含id和name字段的一维数组，且支持无限层级的detail嵌套处理：

输入示例 #

const input = [
  {
    "id": 1,
    "name": "selling",
    "detail": [
      {
        "id": 11,
        "name": "sale-report",
        "detail": [
          { "id": 111, "name": "sale-report1", "detail": [] },
          { "id": 112, "name": "sale-report2", "detail": [] }
        ]
      }
    ]
  },
  {
    "id": 2,
    "name": "webstore",
    "detail": [
      {
        "id": 11,
        "name": "sale-report",
        "detail": [
          { "id": 111, "name": "webstore-report1", "detail": [] },
          { "id": 112, "name": "webstore-report2", "detail": [] }
        ]
      }
    ]
  },
  {
    "id": 2,
    "name": "setting",
    "detail": [
      {
        "id": 11,
        "name": "general",
        "detail": [
          { "id": 111, "name": "setting-general1", "detail": [] },
          { "id": 112, "name": "setting-general2", "detail": [] }
        ]
      }
    ]
  }
];

期望输出 #

[
  { "id": 1, "name": "selling" },
  { "id": 11, "name": "sale-report" },
  { "id": 111, "name": "sale-report1" },
  { "id": 112, "name": "sale-report2" },
  { "id": 2, "name": "webstore" },
  { "id": 11, "name": "sale-report" },
  { "id": 111, "name": "webstore-report1" },
  { "id": 112, "name": "webstore-report2" },
  { "id": 2, "name": "setting" },
  { "id": 11, "name": "general" },
  { "id": 111, "name": "setting-general1" },
  { "id": 112, "name": "setting-general2" }
]

解决方案：递归遍历处理 #

手动forEach无法处理无限嵌套，递归是最适配的方案——通过函数自身调用，逐层拆解嵌套的detail数组：

实现代码 #

function flattenNestedArray(arr) {
  let result = [];
  arr.forEach(item => {
    // 提取当前对象的id和name，加入结果数组
    result.push({ id: item.id, name: item.name });
    // 如果当前对象有非空detail数组，递归处理并合并结果
    if (item.detail && Array.isArray(item.detail) && item.detail.length > 0) {
      result = result.concat(flattenNestedArray(item.detail));
    }
  });
  return result;
}

代码说明 #

1. 初始化空数组result存储最终一维结果
2. 遍历输入数组的每个对象：
   • 提取对象的id和name字段，创建新对象加入result
   • 检查当前对象是否存在非空的detail数组，若存在则递归调用flattenNestedArray处理该数组，并将返回的结果合并到result中
3. 遍历完成后返回最终的一维数组

测试调用 #

const output = flattenNestedArray(input);
console.log(output);

执行后即可得到符合要求的一维数组。

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