Javascript使用对象合并覆盖嵌套对象的一部分_如何在javascript中合并嵌套对象_如何合并两个嵌套的javascript对象？ - 腾讯云开发者社区

Javascript使用对象合并覆盖嵌套对象的一部分

基础概念

在JavaScript中，对象合并通常指的是将两个或多个对象的属性合并到一个新对象中。当合并涉及到嵌套对象时，如果不进行特殊处理，嵌套对象将会被后面的对象覆盖，而不是进行深度合并。

类型

浅合并：只合并对象的第一层属性，嵌套对象会被后面的对象覆盖。
深合并：递归合并所有层级的属性，包括嵌套对象。

应用场景

框架配置：在React、Vue等前端框架中，经常需要合并用户自定义配置和默认配置。
API响应处理：处理来自服务器的API响应时，可能需要将响应数据合并到现有状态中。
插件系统：在插件系统中，可能需要将用户提供的配置与默认配置合并。

遇到的问题及解决方法

问题

在JavaScript中，使用简单的对象合并方法（如Object.assign或展开运算符...）进行嵌套对象的合并时，嵌套对象会被后面的对象覆盖，而不是进行深度合并。

const obj1 = { a: { b: 1 } };
const obj2 = { a: { c: 2 } };

const mergedObj = { ...obj1, ...obj2 };
console.log(mergedObj); // 输出: { a: { c: 2 } }

原因

这是因为Object.assign和展开运算符...只进行浅合并，它们不会递归地合并嵌套对象。

解决方法

可以使用递归函数来实现深合并。

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

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

const obj1 = { a: { b: 1 } };
const obj2 = { a: { c: 2 } };

const mergedObj = deepMerge({}, obj1, obj2);
console.log(mergedObj); // 输出: { a: { b: 1, c: 2 } }