本教程旨在指导开发者如何合并两个包含不同属性的对象数组，并为缺失的属性填充 null 值。通过动态构建属性列表和使用对象合并技术，最终生成一个包含所有对象信息且结构统一的结果数组。本文将提供详细的代码示例和步骤说明，帮助你理解并实现该功能。
问题背景
在实际开发中，我们经常会遇到需要合并来自不同数据源的对象数组的情况。这些数组可能包含不同的属性，为了方便后续处理，我们需要将它们合并成一个统一的结构，并用 null 值填充缺失的属性。
解决方案
以下是一种通用的解决方案，用于合并两个对象数组，并为不存在的属性添加 null 值。
1. 准备数据
首先，我们准备两个示例数组 marks 和 users，它们分别包含学生的成绩和用户信息。
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' },
];2. 构建属性集合
为了确保最终结果包含所有可能的属性，我们需要先创建一个属性集合。遍历两个数组，将所有属性名添加到集合中。
const attributes = new Set(); marks.forEach(mark => Object.keys(mark).forEach(e => attributes.add(e))); users.forEach(user => Object.keys(user).forEach(e => attributes.add(e)));
3. 创建空对象模板
接下来，我们创建一个空对象模板，其中包含所有属性，并将它们的值设置为 null。
const sample = {}
attributes.forEach((attribute) => {
sample[attribute] = null;
})4. 合并对象
现在，我们可以开始合并对象了。创建一个空对象 mergedItems，以 id 为键存储合并后的对象。遍历两个数组，如果 mergedItems 中已存在具有相同 id 的对象，则将其与当前对象合并；否则，使用空对象模板创建一个新对象，然后与当前对象合并。
const mergedItems = {}
marks.forEach(mark => {
if (mergedItems[mark.id]) {
mergedItems[mark.id] = {
...mergedItems[mark.id],
...mark
};
} else {
mergedItems[mark.id] = {
...sample,
...mark
};
}
});
users.forEach(user => {
if (mergedItems[user.id]) {
mergedItems[user.id] = {
...mergedItems[user.id],
...user
};
} else {
mergedItems[user.id] = {
...sample,
...user
};
}
});5. 提取结果
最后，从 mergedItems 中提取所有值，并将它们转换为数组。
const result = Object.values(mergedItems);
6. 完整代码示例
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 attributes = new Set();
marks.forEach(mark => Object.keys(mark).forEach(e => attributes.add(e)));
users.forEach(user => Object.keys(user).forEach(e => attributes.add(e)));
const sample = {}
attributes.forEach((attribute) => {
sample[attribute] = null;
})
const mergedItems = {}
marks.forEach(mark => {
if (mergedItems[mark.id]) {
mergedItems[mark.id] = {
...mergedItems[mark.id],
...mark
};
} else {
mergedItems[mark.id] = {
...sample,
...mark
};
}
});
users.forEach(user => {
if (mergedItems[user.id]) {
mergedItems[user.id] = {
...mergedItems[user.id],
...user
};
} else {
mergedItems[user.id] = {
...sample,
...user
};
}
});
const result = Object.values(mergedItems);
console.log(JSON.stringify(result, null, 2));注意事项
- 此解决方案假设每个对象都有一个唯一的 id 属性。
- 如果已知所有可能的属性，可以跳过构建属性集合的步骤，直接使用硬编码的属性列表。
- 在处理大量数据时，可以考虑使用更高效的数据结构和算法来提高性能。
总结
通过本教程，你学会了如何合并两个对象数组，并为不存在的属性添加 null 值。这种方法可以确保最终结果包含所有必要的信息，并且具有统一的结构，方便后续处理。希望本教程能帮助你解决实际开发中遇到的类似问题。
