本教程详细讲解了如何在 JavaScript 中高效合并两个或多个对象数组。针对数据不完全匹配的场景，我们提出了一种智能合并策略，该策略能确保最终结果包含所有潜在属性，并自动为缺失的属性填充 null 值，从而生成结构完整且统一的数据集。
在前端开发或数据处理中，我们经常需要将来自不同来源的数据进行整合。例如，我们可能有两个对象数组，它们都包含一个共同的标识符（如 id），但各自拥有不同的属性集。一个常见的需求是，在合并这些数组时，不仅要匹配共享 id 的对象，还要确保最终结果包含所有可能的属性，并且对于那些在某个原始数组中不存在的属性，能够用 null（或其他默认值）填充。
考虑以下两个示例数据集：marks 数组包含学生的 id 和 marks，而 users 数组包含 id、name、grade 和 result。
const marks = [ { id: '1', marks: 70 }, { id: '2', marks: 40 }, { id: '3', marks: 95 }, { id: '4', marks: 50 }, ]; const users = [ { id: '1', name: 'sam', grade: 1, result: 'Pass' }, { id: '2', name: 'peter', grade: 2, result: 'Pass' }, { id: '5', name: 'John', grade: 1, result: 'Fail' }, { id: '6', name: 'anna', grade: 3, result: 'Fail' }, ];
我们期望的合并结果是这样的：
const result = [ { id: '1', marks: 70, name: 'sam', grade: 1, result: 'Pass' }, { id: '2', marks: 40, name: 'peter', grade: 2, result: 'Pass' }, { id: '3', marks: 95, name: null, grade: null, result: null }, { id: '4', marks: 50, name: null, grade: null, result: null }, { id: '5', marks: null, name: 'John', grade: 1, result: 'Fail' }, { id: '6', marks: null, name: 'anna', grade: 3, result: 'Fail' }, ];
可以看到，对于 id: ‘3’ 和 id: ‘4’，它们只存在于 marks 数组中，因此 name, grade, result 等属性被填充为 null。同样，对于 id: ‘5’ 和 id: ‘6’，它们只存在于 users 数组中，marks 属性被填充为 null。
智能合并策略详解
为了实现上述目标，我们可以采用一种分步进行的智能合并策略。这种策略的核心在于首先识别所有可能的属性，然后构建一个基准对象作为模板，最后通过迭代合并来填充数据。
立即学习“Java免费学习笔记（深入）”；
1. 识别所有潜在属性
首先，我们需要确定最终合并对象可能包含的所有属性键。这确保了无论哪个原始数组中存在某个属性，它都能在最终结果中占据一席之地。
// 示例数据（同上） const marks = [ /* ... */ ]; const users = [ /* ... */ ]; const allAttributes = new Set(); // 使用 Set 存储不重复的属性键 // 遍历 marks 数组，收集所有属性 marks.forEach(item => { Object.keys(item).forEach(key => allAttributes.add(key)); }); // 遍历 users 数组，收集所有属性 users.forEach(item => { Object.keys(item).forEach(key => allAttributes.add(key)); }); // 此时 allAttributes 包含 {'id', 'marks', 'name', 'grade', 'result'}
2. 构建基准空对象模板
有了所有潜在属性的列表后，我们可以创建一个“基准空对象”。这个对象将包含所有这些属性，并默认将它们的值设置为 null。它将作为每个最终合并对象的起点，确保结构的一致性。
const baseTemplate = {}; allAttributes.forEach(attribute => { baseTemplate[attribute] = null; }); // 此时 baseTemplate 类似于 { id: null, marks: null, name: null, grade: null, result: null }
3. 迭代合并数据
现在，我们使用一个中间对象（可以将其视为一个哈希表或字典）来存储按 id 索引的合并数据。我们将依次遍历 marks 和 users 数组，将它们的数据合并到这个中间对象中。
const mergedById = {}; // 用于存储以 id 为键的合并对象 // 合并 marks 数组 marks.forEach(item => { // 如果该 id 尚未存在，则先用 baseTemplate 初始化 // 否则，使用已存在的对象 mergedById[item.id] = { ...(mergedById[item.id] || baseTemplate), ...item }; }); // 合并 users 数组 users.forEach(item => { // 如果该 id 尚未存在，则先用 baseTemplate 初始化 // 否则，使用已存在的对象 mergedById[item.id] = { ...(mergedById[item.id] || baseTemplate), ...item }; }); // 此时 mergedById 结构类似： // { // '1': { id: '1', marks: 70, name: 'sam', grade: 1, result: 'Pass' }, // '2': { id: '2', marks: 40, name: 'peter', grade: 2, result: 'Pass' }, // '3': { id: '3', marks: 95, name: null, grade: null, result: null }, // // ... 其他合并后的对象 // }
在这个步骤中，{ …(mergedById[item.id] || baseTemplate), …item } 的操作至关重要。它首先检查 mergedById[item.id] 是否已存在。如果存在，则使用当前已合并的对象作为基础；如果不存在，则使用 baseTemplate 作为基础，填充所有属性并默认设置为 null。然后，将当前 item 的属性合并进去。如果 item 中有与基础对象相同的属性，item 的值会覆盖基础对象的值；如果 item 中有新的属性（在我们的设计中，所有属性都已在 baseTemplate 中），它也会被正确处理。
4. 提取最终结果数组
最后一步是从 mergedById 对象中提取所有的值，这些值就是我们期望的合并后的对象数组。
const finalResult = Object.values(mergedById); // finalResult 就是我们期望的合并后的对象数组 console.log(JSON.stringify(finalResult, null, 2