js 深度合并json对象

在JavaScript中，深度合并JSON对象是指将两个或多个JSON对象合并成一个新对象，并且如果这些对象中有嵌套的对象或数组，也要进行递归合并，而不是简单的覆盖。

基础概念

浅合并：只合并对象的顶层属性，如果属性值是对象或数组，则不进行合并，而是直接覆盖。
深合并：递归地合并对象的所有属性，包括嵌套的对象和数组。

优势

数据完整性：深合并可以确保所有层级的属性都被考虑在内，避免数据丢失。
灵活性：适用于配置合并、状态管理等场景，可以灵活地合并不同来源的数据。

类型

对象合并：合并普通对象。
数组合并：合并数组，可以选择去重、拼接或深度合并数组中的对象。

应用场景

配置管理：合并用户自定义配置和默认配置。
状态管理：在Redux等状态管理库中合并状态。
数据聚合：从多个API响应中合并数据。

示例代码

以下是一个使用递归实现深度合并的函数：

function isObject(obj) {
    return obj && typeof obj === 'object' && !Array.isArray(obj);
}

function deepMerge(target, ...sources) {
    if (!sources.length) return target;
    const source = sources.shift();

    if (isObject(target) && isObject(source)) {
        for (const key in source) {
            if (isObject(source[key])) {
                if (!target[key]) Object.assign(target, { [key]: {} });
                deepMerge(target[key], source[key]);
            } else {
                Object.assign(target, { [key]: source[key] });
            }
        }
    }

    return deepMerge(target, ...sources);
}

// 使用示例
const obj1 = { a: 1, b: { c: 2 } };
const obj2 = { b: { d: 3 }, e: 4 };
const mergedObj = deepMerge({}, obj1, obj2);

console.log(mergedObj); // 输出: { a: 1, b: { c: 2, d: 3 }, e: 4 }

遇到的问题及解决方法

循环引用：如果对象中存在循环引用，上述函数会导致栈溢出错误。可以通过维护一个已访问对象的列表来避免这个问题。
特殊对象处理：上述函数没有处理Date、RegExp、Map、Set等特殊对象。在实际应用中，可能需要根据具体情况添加对这些类型的处理逻辑。

解决循环引用问题

function deepMerge(target, ...sources) {
    const visited = new WeakSet();

    function merge(target, source) {
        if (isObject(target) && isObject(source)) {
            if (visited.has(target) || visited.has(source)) {
                return; // 避免循环引用
            }
            visited.add(target);
            visited.add(source);

            for (const key in source) {
                if (isObject(source[key])) {
                    if (!target[key]) Object.assign(target, { [key]: {} });
                    merge(target[key], source[key]);
                } else {
                    Object.assign(target, { [key]: source[key] });
                }
            }
        }
    }

    sources.forEach(source => merge(target, source));
    return target;
}

通过这种方式，可以实现一个更加健壮的深度合并函数，能够处理更复杂的情况。