JS转换深度嵌套对象数组 提取字段至顶层并重命名

核心需求 #

对多层嵌套的对象数组做结构转换，规则如下：

• 提取顶层数组项的model字段
• 遍历每个顶层项的details子数组，提取子项的color字段，以及子项内specifics.id作为输出项的id
• 所有生成的新对象平铺为一维数组，不保留原有嵌套层级
• 支持两种输出格式：
  • 格式1：保留独立的model、color字段
  • 格式2：将model与color拼接为${model} - ${color}形式，赋值给model字段

源数据 #

let data = [
  {
    "id": 1001,
    "model": "Lemon",
    "length": "4",
    "details": [
      {
        "id": 38,
        "kind": "D",
        "color": "Gray",
        "specifics": {
          "id": 3
        }
      }
    ]
  },
  {
    "id": 1002,
    "model": "Botanica",
    "length": "2",
    "details": [
      {
        "id": 39,
        "kind": "A",
        "color": "Yellow",
        "specifics": {
          "id": 1
        }
      },
      {
        "id": 40,
        "kind": "B",
        "color": "Green",
        "specifics": {
          "id": 2
        }
      },
    ]
  }
];

预期输出 #

格式1（独立保留color字段） #

[
  {
    "id": 3,
    "model": "Lemon",
    "color": "Gray",
  },
  {
    "id": 1,
    "model": "Botanica",
    "color": "Yellow",
  },
  {
    "id": 2,
    "model": "Botanica",
    "color": "Green",
  }
]

格式2（拼接model与color字段） #

[
  {
    "id": 3,
    "model": "Lemon - Gray"
  },
  {
    "id": 1,
    "model": "Botanica - Yellow"
  },
  {
    "id": 2,
    "model": "Botanica - Green"
  }
]

原有代码问题 #

之前编写的代码无法得到正确结果，原因有3点：

• 仅用map做双层遍历，没有对嵌套结果做扁平化处理，最终输出的是和原顶层数组长度一致的二层结构，不符合一维数组要求
• 代码中引用了未定义的变量r，运行时会直接抛出引用错误
• 无差别展开顶层冗余字段（如原顶层id、length），没有按需求筛选目标字段

最简实现代码 #

格式1实现 #

const result1 = data.flatMap(item =>
  item.details.map(detail => ({
    id: detail.specifics.id,
    model: item.model,
    color: detail.color
  }))
);

格式2实现 #

const result2 = data.flatMap(item =>
  item.details.map(detail => ({
    id: detail.specifics.id,
    model: `${item.model} - ${detail.color}`
  }))
);

实现说明：使用flatMap替代普通map，会自动将内层遍历details生成的子数组打平到顶层结果，无需额外调用flat方法，代码更简洁。如果后续specifics下还有多层数组结构，只需在内层继续嵌套flatMap遍历即可，逻辑保持一致。

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