当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript数组对象合并技巧分享

JavaScript数组对象合并技巧分享

2025-10-06 16:27:36 0浏览收藏

本文深入解析了JavaScript中利用`reduce`方法和`Object.assign()`高效合并数组对象的技术，旨在解决数据处理中常见的异构数据聚合问题。面对包含多种类型对象的数组，通过共享的键（key）进行合并，生成结构统一、数据完整的复合对象是关键。文章通过实例代码，详细阐述了如何识别“主”对象和“补充”对象，并利用`reduce`方法迭代数组，结合`Object.assign()`实现对象的属性合并。同时，还讨论了数据顺序、深层合并以及键的唯一性等注意事项，并提出了使用Map作为累加器来增强解决方案健壮性的方法。掌握这些技巧，能有效提升JavaScript数据处理能力，优化代码结构，是前端开发不可或缺的技能。

深入理解JavaScript中基于键合并数组对象的方法

本文详细阐述了如何在JavaScript中，利用数组的reduce方法高效地将一个包含多种类型对象的数组，根据共享的键（key）进行合并，从而生成结构统一、数据完整的复合对象。教程将通过示例代码，逐步解析合并逻辑，帮助开发者掌握数据聚合与重构的关键技巧。

问题场景：异构数据合并

在数据处理中，我们经常会遇到需要将分散在不同对象中的相关信息聚合到一起的场景。例如，一个数组中可能包含多种结构的对象，它们通过一个共同的标识符（如key）关联。我们的目标是将这些具有相同key的对象合并成一个单一、完整的对象。

考虑以下数据结构：

[
  {
    "key": 111,
    "studentInfo": [
      {
        "details": {
          "calculated_fields": null,
          "status": false
        }
      }
    ]
  },
  {
    "key": 222,
    "studentInfo": [
      {
        "details": {
          "calculated_fields": null,
          "status": false
        }
      }
    ]
  },
  {
    "confidential": {
      "data": {
        "access_control": {
          "private_data": null,
          "users": []
        }
      },
      "key": 111
    }
  },
  {
    "confidential": {
      "data": {
        "access_control": {
          "private_data": null,
          "users": []
        }
      },
      "key": 222
    }
  }
]

这个数组包含了两种主要类型的对象：

带有key和studentInfo的对象，表示学生的基本信息。
带有confidential字段（其中包含key）的对象，表示学生的保密信息。

我们的期望输出是将拥有相同key（无论是顶层key还是confidential.key）的对象合并为一个，例如：

[
  {
    "key": 111,
    "studentInfo": [
      {
        "details": {
          "calculated_fields": null,
          "status": false
        }
      }
    ],
    "confidential": {
      "data": {
        "access_control": {
          "private_data": null,
          "users": []
        }
      },
      "key": 111
    }
  },
  {
    "key": 222,
    "studentInfo": [
      {
        "details": {
          "calculated_fields": null,
          "status": false
        }
      }
    ],
    "confidential": {
      "data": {
        "access_control": {
          "private_data": null,
          "users": []
        }
      },
      "key": 222
    }
  }
]

核心概念：reduce方法与对象合并

为了实现这种复杂的聚合和合并操作，JavaScript的Array.prototype.reduce()方法是一个非常强大的工具。它能够遍历数组中的每个元素，并使用一个回调函数来将累加器（accumulator）更新为单个输出值。在这个场景中，累加器将是一个正在构建的结果数组。

同时，Object.assign()方法则用于将一个或多个源对象的属性复制到目标对象。它执行的是浅层复制，非常适合将不同对象的顶层属性合并到一个新对象或现有对象中。

解决方案：分步解析

我们可以利用reduce方法遍历原始数组，并在每次迭代中根据对象的结构和key值，决定是创建一个新的合并对象，还是将当前对象的属性合并到已存在的合并对象中。

以下是具体的实现逻辑：

初始化结果数组： 我们首先定义一个空数组res，它将作为reduce方法的初始累加器，并最终存储所有合并后的对象。
reduce回调函数的逻辑：reduce方法会依次处理原始数组中的每个对象。在回调函数中，我们根据当前对象的结构来判断其角色并进行相应操作：
- 识别“主”对象： 如果当前对象currentObj包含顶层key属性（例如，studentInfo对象），我们将其视为某个逻辑实体的“主”记录。此时，我们直接将这个currentObj推入累加器数组（output）。这通常是该key对应的第一个被发现的完整记录。
- 识别“补充”对象并合并： 如果当前对象currentObj不包含顶层key，但包含confidential字段，并且confidential字段内部有key属性（例如，confidential对象），则它被视为对某个已有“主”记录的补充。
  - 我们使用output.find((o) => o.key === currentObj.confidential.key)在当前的累加器数组output中查找与currentObj.confidential.key匹配的“主”对象。
  - 一旦找到匹配的“主”对象，我们使用Object.assign()方法将currentObj的所有属性合并到这个找到的“主”对象中。Object.assign(foundObject, currentObj)会将currentObj的属性复制到foundObject。
- 返回累加器： 每次迭代结束时，回调函数返回更新后的output数组，作为下一次迭代的累加器。

完整代码示例

const initialData = [
  {
    key: 111,
    studentInfo: [
      {
        details: {
          calculated_fields: null,
          status: false,
        },
      },
    ],
  },
  {
    key: 222,
    studentInfo: [
      {
        details: {
          calculated_fields: null,
          status: false,
        },
      },
    ],
  },
  {
    confidential: {
      data: {
        access_control: {
          private_data: null,
          users: [],
        },
      },
      key: 111,
    },
  },
  {
    confidential: {
      data: {
        access_control: {
          private_data: null,
          users: [],
        },
      },
      key: 222,
    },
  },
];

// 初始化一个空数组用于存储合并结果
const mergedResult = [];

// 使用 reduce 方法进行数据合并
initialData.reduce((output, currentObj) => {
  // 判断当前对象是带有顶层key的“主”对象，还是带有confidential.key的“补充”对象
  if (currentObj.key) {
    // 如果是“主”对象，直接将其推入结果数组
    output.push(currentObj);
  } else {
    // 如果是“补充”对象，则查找对应的“主”对象并进行合并
    const targetObject = output.find((o) => o.key === currentObj.confidential.key);
    if (targetObject) {
        // 使用 Object.assign 将当前对象的属性合并到目标对象
        Object.assign(targetObject, currentObj);
    }
    // else: 如果没有找到匹配的目标对象，可以根据业务需求选择抛出错误、记录日志或忽略
  }
  return output; // 返回累加器，供下一次迭代使用
}, mergedResult);

console.log(JSON.stringify(mergedResult, null, 2));

运行上述代码，将得到预期的合并后的数据结构。

注意事项与扩展

执行顺序假设： 上述解决方案的一个隐含假设是，对于任何一个特定的key，包含顶层key的“主”对象（例如studentInfo对象）会先于或至少在包含confidential.key的“补充”对象被处理之前，被添加到mergedResult数组中。如果原始数据中的对象顺序不确定，且“补充”对象可能先于“主”对象出现，那么output.find()可能会找不到目标对象。
为了处理这种情况，更健壮的方法是使用一个Map或普通对象作为reduce的累加器，以key作为键来存储中间结果。这样，无论对象顺序如何，我们都可以先存储或更新，最后再将Map的值转换为数组。
```
const robustMerged = Object.values(initialData.reduce((acc, cur) => {
  const key = cur.key || cur.confidential?.key; // 找到正确的key
  if (key) {
    acc[key] = { ...acc[key], ...cur }; // 使用扩展运算符进行合并
  }
  return acc;
}, {}));
console.log(JSON.stringify(robustMerged, null, 2));
```
这种方式更灵活，可以处理任意顺序的输入数据，并且利用了对象扩展运算符...进行合并。
深层合并：Object.assign()执行的是浅层合并。这意味着如果对象中包含嵌套的对象或数组，Object.assign()只会复制它们的引用，而不会创建新的嵌套结构。如果需要合并嵌套对象内部的属性（例如，studentInfo数组内部的details字段也需要合并），则需要实现一个深层合并函数，或者使用像lodash.merge这样的第三方库。
键的唯一性： 此方案假设key或confidential.key能够唯一标识一个逻辑实体。如果存在重复的key，且它们代表不同的实体，则需要更复杂的逻辑来区分和处理。
错误处理： 在output.find()没有找到匹配对象的情况下，原始代码没有明确处理。在实际应用中，你可能需要添加逻辑来：
- 记录日志，指出哪些数据没有被成功合并。
- 将未合并的对象放入一个单独的“未匹配”列表中。
- 根据业务需求决定是否抛出错误。

总结

通过巧妙地运用JavaScript的Array.prototype.reduce()和Object.assign()方法，我们可以高效且灵活地处理异构数据合并的需求。理解reduce的累加器机制和Object.assign的合并行为是解决这类问题的关键。在面对更复杂的场景时，例如不确定的数据顺序或深层合并需求，可以考虑使用Map作为累加器或引入第三方库来增强解决方案的健壮性和功能。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~