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

Question

如何进行深度合并而不是浅层合并？双管齐下对象.分配和对象传播只做浅合并。这个问题的一个例子是：// No object nestingconst x = { a: 1 }const y = { b: 1 }const z = { ...x, ...y } // { a: 1, b: 1 }输出就是你所期望的。然而，如果我尝试这样做：// Object nestingconst 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

有没有人知道ES6/ES7规范中是否存在深度合并？

不，没有。

Answer 2

我知道这是个老生常谈的问题，但在ES 2015/ES6中，我能想到的最简单的解决方案其实是非常简单的，使用Object.Ast()，

希望这有助于：

/**
 * 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 } } });// orconst merged = mergeDeep({a: 1}, { b : { c: { d: { e: 12345}}}});  
console.dir(merged); // { a: 1, b: { c: { d: [Object] } } }

您将在下面的答案中找到这个不变的版本。

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

Answer 3

当涉及到宿主对象或任何比一袋值更复杂的对象时，这个问题是不平凡的。

• 您是调用getter来获取值，还是对属性描述符进行复制？
• 如果合并目标有一个setter(要么拥有属性，要么在它的原型链中)怎么办？您认为值已经存在还是调用setter来更新当前值？
• 您是调用自己的属性函数还是复制它们？如果它们是绑定函数或箭头函数，这取决于它们定义时作用域链中的某些内容？
• 如果它类似于DOM节点呢？当然，您不希望将其视为简单对象，而只是将其所有属性深度合并到
• 如何处理数组、映射或集合等“简单”结构？考虑他们-现在还是合并他们？
• 如何处理不可枚举的自身属性？
• 新的子树呢？简单地指定引用还是深克隆？
• 如何处理冻结/密封/不可扩展的对象？

要记住的另一件事是：包含循环的对象图。通常情况下，这并不难处理-只需保留一个Set已经访问过的源对象-但经常被遗忘。

您可能应该编写一个深度合并函数，它只需要原始值和简单对象-最多是那些结构化克隆算法-作为合并来源。如果遇到任何无法处理或仅通过引用分配而不是深度合并的内容，则抛出。

换句话说，没有一刀切的算法，你要么必须自己滚动，要么寻找一个恰巧涵盖了你的用例的库方法。