如何进行深度合并而不是浅合并？

Question

Object.assign和Object spread仅进行浅合并。

问题的一个例子：

// No object nesting
const x = { a: 1 }
const y = { b: 1 }
const z = { ...x, ...y } // { a: 1, b: 1 }

输出是您所期望的。但是，如果我尝试以下方法：

// Object nesting
const x = { a: { a: 1 } }
const y = { a: { b: 1 } }
const z = { ...x, ...y } // { a: { b: 1 } }

而不是

{ a: { a: 1, b: 1 } }

你得到

{ a: { b: 1 } }

X被完全覆盖，因为扩展语法只深入一层。这与Object.assign（）相同。

有办法做到这一点吗？

Answer 1

当涉及到宿主对象或比一包值更复杂的任何类型的对象时，这个问题是非常重要的

• 是调用getter来获取值还是复制属性描述符？
• 如果合并目标有一个setter（自己的属性或在它的原型链中）呢？您认为该值已经存在还是调用setter来更新当前值？
• 您是调用自己的属性函数还是复制它们？如果它们是绑定函数或箭头函数，取决于定义它们时作用域链中的某些东西，那该怎么办？
• 如果它是类似DOM节点的东西呢？你肯定不想把它当作简单的对象，只是将它的所有属性深度合并到
中
• 如何处理简单的结构，如数组、地图或集合？考虑他们已经存在或合并他们太？
• 如何处理不可枚举的自有属性？
• 新的子树呢？简单地通过引用或深度克隆分配？
• 如何处理冻结/密封/不可扩展的对象？

另一件需要记住的事情：包含循环的对象图。它通常不难处理——只需保留一组已经访问过的源对象的Set——但常常被遗忘。

您可能应该编写一个深度合并函数，该函数只期望原始值和简单对象（最多是结构化克隆算法可以处理的类型）作为合并源。如果遇到任何无法处理的问题，或只是通过引用而不是深度合并来分配，则抛出。

换言之，没有一种适合所有人的算法，您要么自己使用，要么寻找一种恰好涵盖您的用例的库方法。

Answer 2

您可以使用Lodash合并：

var object = {
  'a': [{ 'b': 2 }, { 'd': 4 }]
};

var other = {
  'a': [{ 'c': 3 }, { 'e': 5 }]
};

_.merge(object, other);
// => { 'a': [{ 'b': 2, 'c': 3 }, { 'd': 4, 'e': 5 }] }

Answer 3

我知道这是一个老问题，但ES2015/ES6中我能想到的最简单的解决方案实际上非常简单，使用Object.assign（），

希望这有助于：

/**
 * Simple object check.
 * @param item
 * @returns {boolean}
 */
export function isObject(item) {
  return (item && typeof item === 'object' && !Array.isArray(item));
}

/**
 * Deep merge two objects.
 * @param target
 * @param ...sources
 */
export function mergeDeep(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]: {} });
        mergeDeep(target[key], source[key]);
      } else {
        Object.assign(target, { [key]: source[key] });
      }
    }
  }

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

用法示例：

mergeDeep(this, { a: { b: { c: 123 } } });
// or
const merged = mergeDeep({a: 1}, { b : { c: { d: { e: 12345}}}});  
console.dir(merged); // { a: 1, b: { c: { d: [Object] } } }

你会在下面的答案中找到一个不可变的版本。

注意，这将导致循环引用上的无限递归。如果你认为你会面临这个问题，这里有一些关于如何检测循环引用的很好的答案。