JavaScript递归处理嵌套对象的fusion合并函数问题修复

完全可以通过递归实现任意深度嵌套对象的统一逻辑合并，不需要重复编写判断规则。原代码无法正确输出嵌套合并结果，是因为存在以下逻辑错误：

• 处理嵌套对象分支时，既没有正确接收递归调用的返回值，也没有将递归结果赋值给最终返回对象，计算出的嵌套合并结果直接丢失
• 嵌套对象分支内的forEach循环变量和外层字段名变量key重名，引发变量遮蔽，逻辑执行不符合预期
• 对象类型判断未排除数组、null值：typeof []和typeof null的返回值均为object，会导致类型分支匹配错误
• 递归调用时apply传参格式错误，apply方法第二个参数要求传入参数数组，直接传入对象会导致函数入参解析异常

合并规则统一为：

• 同名字段均为数组：拼接两个数组
• 同名字段均为数字：返回两数之和
• 同名字段均为字符串：返回空格拼接后的字符串
• 同名字段均为普通对象：递归执行合并逻辑
• 同名字段类型不一致：取第二个对象的字段值
• 仅单个对象存在的字段：直接取对应字段值

修正后实现代码 #

function fusion(x, y) {
    const result = {};

    Object.keys(x).forEach(key => {
        // 第二个对象无同名字段，直接取第一个对象的值
        if (!y.hasOwnProperty(key)) {
            result[key] = x[key];
            return;
        }

        const valX = x[key];
        const valY = y[key];

        // 处理数组类型
        if (Array.isArray(valX) && Array.isArray(valY)) {
            result[key] = valX.concat(valY);
            return;
        }

        // 处理数字类型
        if (typeof valX === 'number' && typeof valY === 'number') {
            result[key] = valX + valY;
            return;
        }

        // 处理字符串类型
        if (typeof valX === 'string' && typeof valY === 'string') {
            result[key] = `${valX} ${valY}`;
            return;
        }

        // 处理普通嵌套对象，直接递归合并
        if (
            typeof valX === 'object' && valX !== null && !Array.isArray(valX) &&
            typeof valY === 'object' && valY !== null && !Array.isArray(valY)
        ) {
            result[key] = fusion(valX, valY);
            return;
        }

        // 类型不匹配时取第二个对象的值
        result[key] = valY;
    });

    // 补全第二个对象独有的字段
    Object.keys(y).forEach(key => {
        if (!x.hasOwnProperty(key)) {
            result[key] = y[key];
        }
    });

    return result;
}

测试验证 #

执行测试用例：

console.log(fusion(
    { a: { b: [1, 2], c: { d: 2 } } },
    { a: { b: [0, 2, 1], c: { d: 23 } } }
))

输出结果与预期完全一致：

{ a: { b: [1, 2, 0, 2, 1], c: { d: 25 } } }

内容的提问来源于stack exchange，提问作者Fazila