如何深层合并而不是浅层合并？

妖狐艹你老母 2022-11-24 14:23 160阅读 0赞

本文翻译自：[How to deep merge instead of shallow merge?][How to deep merge instead of shallow merge]

*Both [Object.assign][] and [Object spread][] only do a shallow merge.* **[Object.assign][]和[Object][Object spread] [Spread][Object.assign]都仅进行浅合并。**

*An example of the problem:* **问题的一个示例：**

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

*The output is what you'd expect.* **输出是您期望的。** *However if I try this:* **但是，如果我尝试这样做：**

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

*Instead of* **代替**

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

*you get* **你得到**

{ a: { b: 1 } }

*x is completely overwritten because the spread syntax only goes one level deep.* **x完全被覆盖，因为传播语法仅深入了一层。** *This is the same with `Object.assign()` .* **这与`Object.assign()`相同。**

*Is there a way to do this?* **有没有办法做到这一点？**

--------------------

### \#1楼 ###

参考：[https://stackoom.com/question/1TdD6/如何深层合并而不是浅层合并][https_stackoom.com_question_1TdD6]

--------------------

### \#2楼 ###

*The problem is non-trivial when it comes to host objects or any kind of object that's more complex than a bag of values* **当涉及宿主对象或比一袋值更复杂的任何类型的对象时，问题都不是简单的**

*  *do you invoke a getter to obtain a value or do you copy over the property descriptor?* **调用获取方法以获取值还是复制属性描述符？**
 *  *what if the merge target has a setter (either own property or in its prototype chain)?* **如果合并目标具有设置器（自己的属性或其原型链中的），该怎么办？** *Do you consider the value as already-present or call the setter to update the current value?* **您认为该值已经存在还是调用设置器来更新当前值？**
 *  *do you invoke own-property functions or copy them over?* **您会调用自有功能还是将其复制过来？** *What if they're bound functions or arrow functions depending on something in their scope chain at the time they were defined?* **如果它们是绑定函数或箭头函数，取决于定义它们时作用域链中的某物怎么办？**
 *  *what if it's something like a DOM node?* **如果它像DOM节点该怎么办？** *You certainly don't want to treat it as simple object and just deep-merge all its properties over into* **您当然不希望将其视为简单对象，而只是将其所有属性深层合并到**
 *  *how to deal with "simple" structures like arrays or maps or sets?* **如何处理“简单”结构，如数组或映射或集合？** *Consider them already-present or merge them too?* **认为它们已经存在或合并了吗？**
 *  *how to deal with non-enumerable own properties?* **如何处理不可数的自有财产？**
 *  *what about new subtrees?* **那新的子树呢？** *Simply assign by reference or deep clone?* **只是通过引用分配还是进行深克隆？**
 *  *how to deal with frozen/sealed/non-extensible objects?* **如何处理冻结/密封/不可扩展的物体？**

*Another thing to keep in mind: Object graphs that contain cycles.* **要记住的另一件事：包含循环的对象图。** *It's usually not difficult to deal with - simply keep a `Set` of already-visited source objects - but often forgotten.* **通常不难处理-只需保留一`Set`已经访问过的源对象-但通常会被遗忘。**

*You probably should write a deep-merge function that only expects primitive values and simple objects - at most those types that the [structured clone algorithm can handle][] \- as merge sources.* **您可能应该编写一个深度合并功能，该功能仅将原始值和简单对象（最多为[结构化克隆算法可以处理的][structured clone algorithm can handle]那些类型）作为合并源。** *Throw if it encounters anything it cannot handle or just assign by reference instead of deep merging.* **如果遇到任何无法处理的事件或仅通过引用分配而不是深度合并，则抛出该异常。**

*In other words, there is no one-size-fits-all algorithm, you either have to roll your own or look for a library method that happens to cover your use-cases.* **换句话说，没有一种万能的算法，您要么必须自己滚动，要么寻找碰巧可以满足用例的库方法。**

--------------------

### \#3楼 ###

*I know this is a bit of an old issue but the easiest solution in ES2015/ES6 I could come up with was actually quite simple, using Object.assign(),* **我知道这是一个老问题了，但是我想出的ES2015 / ES6最简单的解决方案实际上非常简单，使用Object.assign（），**

*Hopefully this helps:* **希望这会有所帮助：**

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

*Example usage:* **用法示例：**

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] } } }

*You'll find an immutable version of this in the answer below.* **您将在下面的答案中找到它的不变版本。**

***Note that this will lead to infinite recursion on circular references.*** **请注意，这将导致循环引用上的无限递归。** *There's some great answers on here on how to detect circular references if you think you'd face this issue.* **如果您认为自己会遇到此问题，那么如何检测循环引用在这里有一些很好的答案。**

--------------------

### \#4楼 ###

> *Does anybody know if deep merging exists in the ES6/ES7 spec?* **有人知道ES6 / ES7规范中是否存在深度合并？**

*No, it does not.* **不，不是的。**

--------------------

### \#5楼 ###

*Here is an immutable (does not modify the inputs) version of @Salakar's answer.* **这是@Salakar答案的一个不变的版本（不修改输入内容）。** *Useful if you're doing functional programming type stuff.* **如果您正在执行函数式编程类型的东西，则很有用。**

export function isObject(item) {
      return (item && typeof item === 'object' && !Array.isArray(item));
    }
    
    export default function mergeDeep(target, source) {
      let output = Object.assign({}, target);
      if (isObject(target) && isObject(source)) {
        Object.keys(source).forEach(key => {
          if (isObject(source[key])) {
            if (!(key in target))
              Object.assign(output, { [key]: source[key] });
            else
              output[key] = mergeDeep(target[key], source[key]);
          } else {
            Object.assign(output, { [key]: source[key] });
          }
        });
      }
      return output;
    }

--------------------

### \#6楼 ###

*I make this method for deep assign using es6.* **我将这种方法用于使用es6进行深度分配。**

function isObject(item) {
      return (item && typeof item === 'object' && !Array.isArray(item) && item !== null)
    }
    
    function deepAssign(...objs) {
        if (objs.length < 2) {
            throw new Error('Need two or more objects to merge')
        }
    
        const target = objs[0]
        for (let i = 1; i < objs.length; i++) {
            const source = objs[i]
            Object.keys(source).forEach(prop => {
                const value = source[prop]
                if (isObject(value)) {
                    if (target.hasOwnProperty(prop) && isObject(target[prop])) {
                        target[prop] = deepAssign(target[prop], value)
                    } else {
                        target[prop] = value
                    }
                } else if (Array.isArray(value)) {
                    if (target.hasOwnProperty(prop) && Array.isArray(target[prop])) {
                        const targetArray = target[prop]
                        value.forEach((sourceItem, itemIndex) => {
                            if (itemIndex < targetArray.length) {
                                const targetItem = targetArray[itemIndex]
    
                                if (Object.is(targetItem, sourceItem)) {
                                    return
                                }
    
                                if (isObject(targetItem) && isObject(sourceItem)) {
                                    targetArray[itemIndex] = deepAssign(targetItem, sourceItem)
                                } else if (Array.isArray(targetItem) && Array.isArray(sourceItem)) {
                                    targetArray[itemIndex] = deepAssign(targetItem, sourceItem)
                                } else {
                                    targetArray[itemIndex] = sourceItem
                                }
                            } else {
                                targetArray.push(sourceItem)
                            }
                        })
                    } else {
                        target[prop] = value
                    }
                } else {
                    target[prop] = value
                }
            })
        }
    
        return target
    }

[How to deep merge instead of shallow merge]: https://oldbug.net/q/1TdD6/How-to-deep-merge-instead-of-shallow-merge
[Object.assign]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign
[Object spread]: https://github.com/sebmarkbage/ecmascript-rest-spread
[https_stackoom.com_question_1TdD6]: https://stackoom.com/question/1TdD6/%E5%A6%82%E4%BD%95%E6%B7%B1%E5%B1%82%E5%90%88%E5%B9%B6%E8%80%8C%E4%B8%8D%E6%98%AF%E6%B5%85%E5%B1%82%E5%90%88%E5%B9%B6
[structured clone algorithm can handle]: https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/The_structured_clone_algorithm