合并两个对象数组并为不存在的属性添加空值-js教程-PHP中文网

合并两个对象数组并为不存在的属性添加空值

DDD

发布： 2025-09-13 19:33:14

原创

546人浏览过

合并两个对象数组并为不存在的属性添加空值

本教程旨在指导开发者如何合并两个包含不同属性的对象数组，并为缺失的属性填充 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。

知我AI

一款多端AI知识助理，通过一键生成播客/视频/文档/网页文章摘要、思维导图，提高个人知识获取效率；自动存储知识，通过与知识库聊天，提高知识利用效率。

101

查看详情

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));

登录后复制

注意事项