在前端开发或数据处理中，我们经常需要将来自不同来源的数据进行整合。例如，我们可能有两个对象数组，它们都包含一个共同的标识符（如 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免费学习笔记（深入）”；
首先，我们需要确定最终合并对象可能包含的所有属性键。这确保了无论哪个原始数组中存在某个属性，它都能在最终结果中占据一席之地。
// 示例数据（同上）
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'}有了所有潜在属性的列表后，我们可以创建一个“基准空对象”。这个对象将包含所有这些属性，并默认将它们的值设置为 null。它将作为每个最终合并对象的起点，确保结构的一致性。
const baseTemplate = {};
allAttributes.forEach(attribute => {
baseTemplate[attribute] = null;
});
// 此时 baseTemplate 类似于 { id: null, marks: null, name: null, grade: null, result: null }现在，我们使用一个中间对象（可以将其视为一个哈希表或字典）来存储按 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 中），它也会被正确处理。
最后一步是从 mergedById 对象中提取所有的值，这些值就是我们期望的合并后的对象数组。
const finalResult = Object.values(mergedById); // finalResult 就是我们期望的合并后的对象数组 console.log(JSON.stringify(finalResult, null, 2
以上就是JavaScript 中智能合并对象数组：处理缺失属性并填充 Null 值的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
881
收藏
