如何在JavaScript中将扁平化数据集转换为嵌套JSON结构

问题背景 #

我从数据库拿到一组扁平化的汽车数据：

const flatData = [
  {manufacture: "Ford", make: "Mustang", model: "EcoBoost"}, 
  {manufacture: "Ford", make: "Mustang", model: "GTFastback"},
  {manufacture: "Ford", make: "Mustang", model: "DarkHorse"},
  {manufacture: "Ford", make: "Escape", model: "Active"},
  {manufacture: "Ford", make: "Escape", model: "Platium"},
  {manufacture: "Toyota", make: "Camry", model: "XSE"},
  {manufacture: "Toyota", make: "Camry", model: "TRD"},
  {manufacture: "Toyota", make: "Camry", model: "XLE"},
  {manufacture: "Toyota", make: "Supra", model: "2.0"},
  {manufacture: "Toyota", make: "Supra", model: "3.0"}
];

需要转换为如下嵌套结构：

[
  {
    "manufacture": "Ford",
    "makes": [
      {
        "make": "Mustang",
        "models": [{"model": "EcoBoost"}, {"model": "GTFastback"}, {"model": "DarkHorse"}]
      },
      {
        "make": "Escape",
        "models": [{"model": "Active"}, {"model": "Platium"}]
      }
    ]
  },
  {
    "manufacture": "Toyota",
    "makes": [
      {
        "make": "Camry",
        "models": [{"model": "XSE"}, {"model": "TRD"}, {"model": "XLE"}]
      },
      {
        "make": "Supra",
        "models": [{"model": "2.0"}, {"model": "3.0"}]
      }
    ]
  }
]

简便实现方案：使用Array.reduce() #

JavaScript的reduce方法可以高效完成分组嵌套，无需手动多层遍历，代码简洁易维护：

const nestedData = Object.values(flatData.reduce((acc, item) => {
  // 处理厂商分组
  if (!acc[item.manufacture]) {
    acc[item.manufacture] = {
      manufacture: item.manufacture,
      makes: []
    };
  }
  const manufactureGroup = acc[item.manufacture];

  // 处理车型系列分组
  let makeGroup = manufactureGroup.makes.find(m => m.make === item.make);
  if (!makeGroup) {
    makeGroup = { make: item.make, models: [] };
    manufactureGroup.makes.push(makeGroup);
  }

  // 添加具体车型
  makeGroup.models.push({ model: item.model });

  return acc;
}, {}));

代码解释 #

1. 初始化累加器：reduce的初始值是一个空对象，用来临时存储以厂商名为键的分组数据。
2. 厂商分组判断：如果当前厂商不在累加器中，就创建一个包含manufacture和空makes数组的对象。
3. 车型系列分组判断：在当前厂商的makes数组中查找对应系列，不存在则创建并推入数组。
4. 添加具体车型：将当前model包装成对象后推入对应系列的models数组。
5. 转换为最终数组：用Object.values()把累加器对象的取值提取为数组，得到目标嵌套结构。

优势 #

• 只需遍历原始数据一次，时间复杂度为O(n)，性能高效。
• 代码逻辑清晰，无需嵌套多层循环，可读性强。
• 可灵活扩展，比如后续需要增加其他字段，只需在对应位置修改即可。

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