本教程将指导如何在JavaScript中将复杂的嵌套对象数组进行扁平化处理。我们将学习如何遍历包含多个学期（或其他分类）的结构，并从外层对象的键中提取信息（如“Semester One”），将其作为新属性（如semester）添加到每个内部子对象中，最终生成一个结构更简洁、易于处理的单一数组。

在现代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免费学习笔记（深入）”；

Vimeo

Vimeo平台的在线视频生成工具

72

查看详情

核心实现思路

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

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() 方法动态获取对象的键，并将其作为新的属性值集成到子对象中。掌握这种数据转换技巧对于处理各种复杂的数据结构至关重要，能够帮助我们更高效、更灵活地管理和展示数据。