JavaScript中是否有设计模式可处理嵌套JSON数组的指定字段展示？

现有如下嵌套结构的JSON数据，当前通过map循环遍历生成包含所需元素的新数组来展示为表格：

{
  "employees": {
    "employee": [
      {
        "id": "1",
        "firstName": "Tom",
        "lastName": "Cruise",
        "colleagues": [
          {
            "id": "11",
            "firstName": "Cody",
            "lastName": "Jr"
          },
          {
            "id": "2",
            "firstName": "Maria",
            "lastName": "Sharapova"
          },
          {
            "id": "3",
            "firstName": "Robert",
            "lastName": "Downey Jr."
          }
        ]
      },
      {
        "id": "2",
        "firstName": "Maria",
        "lastName": "Sharapova",
        "colleagues": [
          {
            "id": "5",
            "firstName": "Cody",
            "lastName": "Jr"
          },
          {
            "id": "6",
            "firstName": "Maria",
            "lastName": "Sharapova"
          },
          {
            "id": "7",
            "firstName": "Robert",
            "lastName": "Downey Jr."
          }
        ]
      },
      {
        "id": "3",
        "firstName": "Robert",
        "lastName": "Downey Jr.",
        "colleagues": [
          {
            "id": "8",
            "firstName": "Cody",
            "lastName": "Jr"
          },
          {
            "id": "9",
            "firstName": "Maria",
            "lastName": "Sharapova"
          },
          {
            "id": "10",
            "firstName": "Robert",
            "lastName": "Downey Jr."
          }
        ]
      }
    ]
  }
}

需求是：无需提前生成完整的常规JS数组对象，直接展示嵌套JSON中的指定字段，输出如下结构的结果（每个员工-同事组合对应一条数据）：

{
  "employees": [
    {
      "id": "1",
      "firstName": "Tom",
      "lastName": "Cruise",
      "colleague_id": "11",
      "colleague_first_name": "Cody",
      "colleague_last_name": "Jr"
    },
    {
      "id": "1",
      "firstName": "Tom",
      "lastName": "Cruise",
      "colleague_id": "2",
      "colleague_first_name": "Maria",
      "colleague_last_name": "Sharapova"
    },
    // ... 其余所有员工-同事组合
  ]
}

可以使用**JavaScript生成器函数（Generator Function）**实现惰性求值，它不会一次性生成完整的数组，而是返回一个迭代器，只有在遍历的时候才会逐个产出目标数据，完全符合“无需生成常规JS数组对象”的要求。

实现代码 #

// 定义生成器函数，惰性扁平化员工-同事结构
function* flattenEmployeeColleagues(rawData) {
  // 遍历每个员工
  for (const employee of rawData.employees.employee) {
    // 遍历当前员工的每个同事，逐个产出组合后的对象
    for (const colleague of employee.colleagues) {
      yield {
        id: employee.id,
        firstName: employee.firstName,
        lastName: employee.lastName,
        colleague_id: colleague.id,
        colleague_first_name: colleague.firstName,
        colleague_last_name: colleague.lastName
      };
    }
  }
}

// 使用示例
const data = { /* 你的原始JSON数据 */ };
const employeeIterator = flattenEmployeeColleagues(data);

// 方式1：直接遍历迭代器处理数据（无需生成数组）
for (const item of employeeIterator) {
  // 这里可以直接将item渲染到表格行，或者做其他处理
  console.log(item);
}

// 方式2：如果需要生成数组（可选），用Array.from转换
const resultArray = Array.from(flattenEmployeeColleagues(data));
console.log({ employees: resultArray });

核心优势 #

1. 内存高效：不会一次性把所有数据加载到内存，适合处理大规模数据集。
2. 按需处理：迭代器可以逐个产出数据，你可以在遍历过程中直接渲染或处理，不用等待整个数组生成。
3. 符合设计模式：生成器本质是迭代器模式的实现，属于JavaScript原生支持的设计模式，无需额外依赖。

备选方案（若允许生成数组） #

如果只是不想手动写多层循环，可以用Array.prototype.flatMap：

const result = {
  employees: data.employees.employee.flatMap(emp => 
    emp.colleagues.map(colleague => ({
      id: emp.id,
      firstName: emp.firstName,
      lastName: emp.lastName,
      colleague_id: colleague.id,
      colleague_first_name: colleague.firstName,
      colleague_last_name: colleague.lastName
    }))
  )
};

但这种方式会一次性生成完整数组，不符合“无需生成常规JS数组对象”的核心需求，仅作为补充参考。

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