JavaScript中如何合并两个对象数组并处理缺失属性

在JavaScript项目开发中，合并两个对象数组并处理属性缺失是非常常见的需求，比如前端从两个不同接口获取到用户基础信息和用户扩展信息，需要把两个数组整合成一个完整的用户列表，同时补充缺失的扩展属性。

核心合并思路

合并两个对象数组的核心逻辑是：先确定两个数组的唯一匹配标识（比如id、userId等），遍历其中一个数组，找到另一个数组中对应标识的对象，将两个对象的属性合并，同时给缺失的属性设置默认值。

方法一：基于Map实现高效合并

使用Map存储第一个数组的标识和对象映射，再遍历第二个数组进行匹配合并，时间复杂度为O(n)，适合数组长度较大的场景。

// 定义两个待合并的对象数组
const baseUserList = [
    { id: 1, name: '张三', age: 20 },
    { id: 2, name: '李四' },
    { id: 3, name: '王五', age: 25 }
];
const extUserList = [
    { id: 1, email: 'zhangsan@ipipp.com', phone: '13800138000' },
    { id: 3, email: 'wangwu@ipipp.com' }
];

// 定义缺失属性的默认值
const defaultExt = {
    email: '',
    phone: ''
};

// 合并函数
function mergeObjArrays(arr1, arr2, key, defaultVal) {
    // 用Map存储第一个数组的映射，key为匹配标识
    const map = new Map();
    arr1.forEach(item => {
        map.set(item[key], { ...item });
    });
    // 遍历第二个数组，匹配并合并属性
    arr2.forEach(item => {
        const target = map.get(item[key]);
        if (target) {
            // 合并属性，补充默认值
            Object.keys(defaultVal).forEach(k => {
                if (item[k] === undefined) {
                    item[k] = defaultVal[k];
                }
            });
            Object.assign(target, item);
        }
    });
    return Array.from(map.values());
}

const result = mergeObjArrays(baseUserList, extUserList, 'id', defaultExt);
console.log(result);
// 输出结果：
// [
//     { id: 1, name: '张三', age: 20, email: 'zhangsan@ipipp.com', phone: '13800138000' },
//     { id: 2, name: '李四', email: '', phone: '' },
//     { id: 3, name: '王五', age: 25, email: 'wangwu@ipipp.com', phone: '' }
// ]

方法二：使用find方法匹配合并

如果数组长度较小，也可以直接使用find方法遍历查找匹配对象，代码逻辑更直观，但时间复杂度为O(n²)。

const baseUserList = [
    { id: 1, name: '张三', age: 20 },
    { id: 2, name: '李四' },
    { id: 3, name: '王五', age: 25 }
];
const extUserList = [
    { id: 1, email: 'zhangsan@ipipp.com', phone: '13800138000' },
    { id: 3, email: 'wangwu@ipipp.com' }
];

const defaultExt = {
    email: '',
    phone: ''
};

function mergeWithFind(arr1, arr2, key, defaultVal) {
    return arr1.map(item => {
        // 查找第二个数组中匹配的对象
        const matchItem = arr2.find(sub => sub[key] === item[key]);
        // 合并属性，补充默认值
        const merged = { ...item, ...matchItem };
        Object.keys(defaultVal).forEach(k => {
            if (merged[k] === undefined) {
                merged[k] = defaultVal[k];
            }
        });
        return merged;
    });
}

const result2 = mergeWithFind(baseUserList, extUserList, 'id', defaultExt);
console.log(result2);

注意事项

• 合并前需要确认两个数组的匹配标识是唯一的，如果存在重复标识，Map方法会覆盖之前的映射，find方法会匹配到第一个符合条件的对象。
• 处理缺失属性时，默认值需要根据实际业务场景定义，避免默认值不符合业务要求导致后续逻辑出错。
• 如果数组合并后需要保留第二个数组独有的对象，可以在合并完成后，把第二个数组中未匹配到的对象追加到结果数组中。

扩展：保留第二个数组独有对象

如果希望合并后不仅包含第一个数组的对象，还包含第二个数组中第一个数组没有的标识对应的对象，可以调整合并逻辑：

function mergeKeepAll(arr1, arr2, key, defaultVal) {
    const map = new Map();
    // 先存第一个数组的对象
    arr1.forEach(item => {
        map.set(item[key], { ...item });
    });
    // 处理第二个数组的对象
    arr2.forEach(item => {
        const target = map.get(item[key]);
        if (target) {
            // 合并已有对象，补充默认值
            Object.keys(defaultVal).forEach(k => {
                if (item[k] === undefined) {
                    item[k] = defaultVal[k];
                }
            });
            Object.assign(target, item);
        } else {
            // 第二个数组独有的对象，补充默认值
            const newItem = { ...item };
            Object.keys(defaultVal).forEach(k => {
                if (newItem[k] === undefined) {
                    newItem[k] = defaultVal[k];
                }
            });
            map.set(item[key], newItem);
        }
    });
    return Array.from(map.values());
}

const extUserList2 = [
    { id: 1, email: 'zhangsan@ipipp.com' },
    { id: 4, name: '赵六', email: 'zhaoliu@ipipp.com' }
];
const result3 = mergeKeepAll(baseUserList, extUserList2, 'id', { email: '', phone: '' });
console.log(result3);
// 结果会包含id为4的赵六的信息

JavaScript对象数组合并缺失属性处理数组操作修改时间：2026-07-19 05:36:26