JavaScript中重构嵌套对象数组：提取键并将其作为新属性值

在现代web开发中，我们经常需要处理各种形式的数据。有时，数据以嵌套的、层级结构呈现，而为了便于前端展示、数据处理或api传输，我们需要将其转换为更扁平、更易于操作的格式。本教程将聚焦于一种常见的场景：将一个包含分类键的嵌套对象数组，重构为一个扁平化的对象数组，其中原有的分类键被提取并作为新属性值添加到每个子对象中。

原始数据结构分析

假设我们有以下嵌套的数据结构，它表示按学期分类的学生信息：

const originalNestedArray = [
  {
    "Semester One": [
      { id: "1", name: "Name1" },
      { id: "2", name: "Name2" },
    ],
    "Semester Two": [
      { id: "3", name: "Name3" },
      { id: "4", name: "Name4" },
    ],
  },
];

这个 originalNestedArray 是一个包含单个对象的数组。这个内部对象又以“Semester One”和“Semester Two”作为键，每个键对应一个包含学生（id和name）信息的数组。

目标数据结构

我们的目标是将上述复杂的嵌套结构转换为一个扁平化的数组，其中每个学生对象都包含其所属的学期信息，例如：

[
  { id: "1", name: "Name1", semester: "Semester One" },
  { id: "2", name: "Name2", semester: "Semester One" },
  { id: "3", name: "Name3", semester: "Semester Two" },
  { id: "4", name: "Name4", semester: "Semester Two" },
];

可以看到，最终的数组是一个由学生对象组成的列表，每个对象都新增了一个 semester 属性，其值来源于原始数据结构中的学期键。

立即学习“Java免费学习笔记（深入）”；

问小白

免费使用DeepSeek满血版

下载

核心实现思路

要实现这种转换，我们需要进行多层迭代：

1. 遍历外层数组： 尽管示例中外层数组只有一个元素，但在实际应用中可能包含多个此类对象，因此需要遍历它。
2. 提取内部对象键： 对于外层数组中的每个对象，我们需要获取其所有键（例如“Semester One”、“Semester Two”）。Object.keys() 方法是实现这一点的关键。
3. 遍历键对应的数组： 对于每个提取到的键，其对应的值是一个学生对象数组。我们需要遍历这个数组。
4. 构建新对象： 在最内层的遍历中，我们将原始学生对象的属性（如id和name）与当前遍历到的键（作为 semester 属性）组合，创建一个新的扁平化学生对象，并将其添加到最终的结果数组中。

示例代码

以下是实现上述转换的JavaScript代码：

const originalNestedArray = [
  {
    "Semester One": [
      { id: "1", name: "Name1" },
      { id: "2", name: "Name2" },
    ],
    "Semester Two": [
      { id: "3", name: "Name3" },
      { id: "4", name: "Name4" },
    ],
  },
];

const flattenedArray = []; // 用于存储最终扁平化结果的新数组

originalNestedArray.forEach((item) => {
  // item 是外层数组中的每个元素，在本例中是唯一的那个对象
  // { "Semester One": [...], "Semester Two": [...] }

  // Object.keys(item) 返回一个包含对象所有键的数组，例如 ["Semester One", "Semester Two"]
  Object.keys(item).forEach((semesterKey) => {
    // semesterKey 将依次是 "Semester One"，然后是 "Semester Two"

    // item[semesterKey] 获取当前学期键对应的学生数组
    item[semesterKey].forEach((studentObj) => {
      // studentObj 是每个学生对象，例如 { id: "1", name: "Name1" }

      // 将现有学生对象的属性展开，并添加新的 'semester' 属性
      flattenedArray.push({
        ...studentObj,       // 使用展开运算符复制 studentObj 的所有属性 (id, name等)
        semester: semesterKey, // 添加新的 semester 属性，值为当前的学期键
      });
    });
  });
});

console.log(flattenedArray);

/*
输出结果：
[
  { id: "1", name: "Name1", semester: "Semester One" },
  { id: "2", name: "Name2", semester: "Semester One" },
  { id: "3", name: "Name3", semester: "Semester Two" },
  { id: "4", name: "Name4", semester: "Semester Two" }
]
*/

代码解析

1. const flattenedArray = [];：初始化一个空数组，用于收集所有扁平化后的学生对象。
2. originalNestedArray.forEach((item) => { ... });：遍历 originalNestedArray。在我们的示例中，item 将是唯一的那个包含学期键的对象。
3. Object.keys(item).forEach((semesterKey) => { ... });：这是关键一步。Object.keys(item) 会返回一个数组，包含 item 对象的所有可枚举字符串键（即 "Semester One", "Semester Two"）。然后，我们遍历这些键，将每个键赋值给 semesterKey 变量。
4. item[semesterKey].forEach((studentObj) => { ... });：使用当前的 semesterKey 作为索引，我们可以访问 item 对象中对应的值，这个值是一个学生对象数组。我们再次遍历这个数组，将每个学生对象赋值给 studentObj。
5. flattenedArray.push({ ...studentObj, semester: semesterKey });：在最内层循环中，我们构建一个新的对象：
   • ...studentObj：这是ES6的展开运算符。它会将 studentObj（例如 { id: "1", name: "Name1" }）的所有属性复制到新对象中。这使得代码更简洁，并且能够处理 studentObj 可能包含更多未知属性的情况。
   • semester: semesterKey：我们添加了一个新的 semester 属性，其值就是当前遍历到的学期键 semesterKey。
   • 这个新构建的对象被添加到 flattenedArray 中。

注意事项与扩展

• 数据结构假设： 此解决方案假定外层数组中的每个元素都是一个对象，其键对应的值是另一个对象数组。如果数据结构更复杂或不一致，可能需要更复杂的逻辑来处理。
• 不变性： 这种方法通过创建新的数组和新的对象来转换数据，而不会修改原始的 originalNestedArray。这是一种良好的编程实践，有助于避免副作用。
• 性能考量： 对于大多数常见的数据量，这种使用 forEach 和 Object.keys 的方法性能良好且易于理解。对于极大规模的数据集，可以考虑使用 Array.prototype.reduce 或 Array.prototype.flatMap 来实现更函数式或更精简的代码，但核心逻辑依然是多层迭代和属性重组。
• 多层嵌套： 如果数据嵌套层级更深，例如学期下还有班级，班级下才是学生，那么可能需要更多的嵌套循环或递归函数来处理。

总结

通过本教程，我们学习了如何在JavaScript中将一个包含分类键的嵌套对象数组扁平化。核心在于利用 Object.keys() 方法动态获取对象的键，并将其作为新的属性值集成到子对象中。掌握这种数据转换技巧对于处理各种复杂的数据结构至关重要，能够帮助我们更高效、更灵活地管理和展示数据。