两个对象。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()相同。
有办法做到这一点吗?
当前回答
有一些维护良好的库已经做到了这一点。npm注册表中的一个例子是merge-deep
其他回答
你可以使用Lodash合并:
Var对象= { 'a': [{'b': 2}， {'d': 4}] }； Var other = { 'a': [{'c': 3}， {'e': 5}] }； console.log(_。合并(对象,其他)); / / = > {a: [{b: 2,“c”:3},{' d ': 4,“e”:5}]} < script src = " https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js " > < /脚本>
如果你正在使用ImmutableJS，你可以使用mergeDeep:
fromJS(options).mergeDeep(options2).toJS();
Ramda是一个很好的javascript函数库，它有mergeDeepLeft和mergeDeepRight。这些方法都能解决这个问题。请在这里查看文档:https://ramdajs.com/docs/#mergeDeepLeft
对于问题中的具体例子，我们可以使用:
import { mergeDeepLeft } from 'ramda'
const x = { a: { a: 1 } }
const y = { a: { b: 1 } }
const z = mergeDeepLeft(x, y)) // {"a":{"a":1,"b":1}}
有一个lodash包专门处理对象的深度克隆。这样做的好处是不需要包含整个lodash库。
它叫lodash.clonedeep
在nodejs中，这种用法是这样的
var cloneDeep = require('lodash.clonedeep');
const newObject = cloneDeep(oldObject);
在ReactJS中，用法是
import cloneDeep from 'lodash/cloneDeep';
const newObject = cloneDeep(oldObject);
查看这里的文档。如果您对它的工作原理感兴趣，请查看这里的源文件
有一些维护良好的库已经做到了这一点。npm注册表中的一个例子是merge-deep
