JavaScript中复杂嵌套对象数组的扁平化处理

理解原始数据结构与目标结构

在处理动态数据时，我们经常会遇到结构复杂、嵌套层级较深的数据。考虑以下一种典型的原始数据结构：

[
    {
        "fields": [
            {
                "field-1": { "id": "field-1", "value": "a1" },
                "field-2": { "id": "field-2", "value": "a2" },
                "field-3": { "id": "field-3", "value": "a3" }
            }
        ]
    },
    {
        "fields": [
            {
                "field-1": { "id": "field-1", "value": "b1" },
                "field-2": { "id": "field-2", "value": "b2" },
                "field-3": { "id": "field-3", "value": "b3" }
            }
        ]
    }
]

这是一个数组，每个元素包含一个fields数组，而fields数组的第一个元素又是一个对象，其键（如field-1）对应的值是一个包含id和value属性的嵌套对象。

我们的目标是将这种复杂的结构扁平化为以下形式：

[
    {
        "field-1": "a1",
        "field-2": "a2",
        "field-3": "a3"
    },
    {
        "field-1": "b1",
        "field-2": "b2",
        "field-3": "b3"
    },
]

即，每个原始数组元素对应一个新对象，新对象的键直接来源于原始嵌套对象中的键，而值则直接取自原始嵌套对象中对应键的value属性。

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

利用 map 和 reduce 进行数据转换

为了实现上述转换，我们可以结合使用JavaScript的Array.prototype.map()和Array.prototype.reduce()方法。map用于对数组中的每个元素进行转换并返回一个新数组，而reduce则用于将数组中的所有元素“折叠”成一个单一的值（在这里是一个新对象）。

美图AI开放平台

美图推出的AI人脸图像处理平台

53

查看详情

步骤解析

1. 外层 map 循环： 首先，我们需要遍历原始数组的每个顶层元素。map方法非常适合这个任务，因为它会为数组中的每个元素调用一个回调函数，并用回调函数的返回值构建一个新的数组。

   const rawData = [ /* ... 原始数据 ... */ ];
   const result = rawData.map(row => {
       // 对每个 row 进行处理
   });

   登录后复制

2. 访问 fields 数组的第一个元素： 根据原始数据结构，我们关注的是每个row对象内部的fields数组的第一个元素，即row.fields[0]。这个元素包含了我们需要提取键和值的实际对象。

   const targetObject = row.fields[0];

   登录后复制

3. 使用 Object.entries() 获取键值对：Object.entries()方法返回一个给定对象自身可枚举字符串键属性的[key, value]对的数组。对于targetObject，它会生成类似[["field-1", {id: "field-1", value: "a1"}], ...]的数组。

   const entries = Object.entries(targetObject);
   // entries 现在是：
   // [
   //   ["field-1", { "id": "field-1", "value": "a1" }],
   //   ["field-2", { "id": "field-2", "value": "a2" }],
   //   ["field-3", { "id": "field-3", "value": "a3" }]
   // ]

   登录后复制

4. 内层 reduce 构建新对象： 现在，我们有了[key, valueObject]形式的数组。我们可以使用reduce方法遍历这个数组，将每个key作为新对象的属性名，并将valueObject中的value属性作为新对象的属性值。

   • acc (accumulator) 是累加器，它会保存reduce过程中的中间结果，这里我们初始化为一个空对象 {}。
   • [key, { value }] 是解构赋值，它从entries数组的每个元素中提取出键key和嵌套对象中的value属性。

   const newFlatObject = entries.reduce((acc, [key, { value }]) => {
       acc[key] = value; // 将原始键作为新键，原始嵌套对象的value作为新值
       return acc;      // 返回累加器，供下一次迭代使用
   }, {}); // 初始累加器为空对象

   登录后复制

完整示例代码

将上述步骤整合起来，形成完整的解决方案：

const rawData = [
    {
        "fields": [
            {
                "field-1": { "id": "field-1", "value": "a1" },
                "field-2": { "id": "field-2", "value": "a2" },
                "field-3": { "id": "field-3", "value": "a3" }
            }
        ]
    },
    {
        "fields": [
            {
                "field-1": { "id": "field-1", "value": "b1" },
                "field-2": { "id": "field-2", "value": "b2" },
                "field-3": { "id": "field-3", "value": "b3" }
            }
        ]
    }
];

const result = rawData
  .map(row => Object.entries(row.fields[0]) // 对每个 row.fields[0] 对象，获取其键值对
    .reduce((acc, [key, { value }]) => { // 使用 reduce 将键值对转换为扁平对象
       acc[key] = value; // 设置新对象的属性
       return acc; // 返回累加器
    }, {}) // 初始化累加器为一个空对象
  );

console.log(result);

/*
输出结果:
[
    { "field-1": "a1", "field-2": "a2", "field-3": "a3" },
    { "field-1": "b1", "field-2": "b2", "field-3": "b3" }
]
*/

注意事项

• 数据结构假设： 此解决方案严格依赖于原始数据结构中row.fields数组始终有至少一个元素，并且我们总是取其第一个元素row.fields[0]进行处理。如果fields数组可能为空或包含多个元素且需要不同处理，则需要调整逻辑。
• 性能考量： 对于非常大的数据集，虽然map和reduce是高效的函数式方法，但它们仍然涉及迭代。在极端性能敏感的场景下，可能需要进行基准测试或考虑其他优化策略，但对于大多数Web应用和数据处理场景，这种方式的性能表现良好且代码可读性高。
• 可读性： 链式调用map和reduce可以使代码非常简洁和声明式，清晰地表达了“转换每个元素”和“构建新结构”的意图。

总结

通过结合使用Array.prototype.map()和Array.prototype.reduce()，我们可以优雅且高效地处理复杂的嵌套数据结构。map负责外层循环，将每个顶层元素转换为新的格式，而reduce则在内层对对象的属性进行聚合和重塑。这种函数式编程的方法不仅提高了代码的简洁性和可读性，也符合现代JavaScript的编程范式，是处理数据转换任务的强大工具。掌握这些方法，将使你在面对各种数据结构挑战时游刃有余。

以上就是JavaScript中复杂嵌套对象数组的扁平化处理的详细内容，更多请关注php中文网其它相关文章！