两个对象。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()相同。
有办法做到这一点吗?
当前回答
许多答案使用数十行代码，或者需要向项目添加一个新库，但如果您使用递归，这只是4行代码。
函数合并(当前，更新){ for (Object.keys(updates)的key) { if (!current. hasownproperty (key) || typeof updates[key] !== 'object') current[key] = updates[key]; Else merge(current[key]， updates[key]); ｝ 返回当前; ｝ console.log(合并({答:{:1}},{:{b: 1}}));
数组处理:上面的版本用新值覆盖旧的数组值。如果你想保留旧的数组值并添加新的，只需在else语句上方添加一个else If (current[key] instanceof array && updates[key] instanceof array) current[key] = current[key].concat(updates[key])块，你就都设置好了。
其他回答
我不喜欢现有的解决方案。所以，我开始写我自己的。
Object.prototype.merge = function(object) {
for (const key in object) {
if (object.hasOwnProperty(key)) {
if (typeof this[key] === "object" && typeof object[key] === "object") {
this[key].merge(object[key]);
continue;
}
this[key] = object[key];
}
}
return this;
}
我希望这能帮助那些努力理解正在发生的事情的人。我在这里看到了很多无意义的变量。
谢谢
有一些维护良好的库已经做到了这一点。npm注册表中的一个例子是merge-deep
当涉及到宿主对象或比值包更复杂的任何类型的对象时，这个问题就不那么简单了
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? 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?
另一件需要记住的事情是:包含循环的对象图。这通常不难处理——简单地保留一组已经访问过的源对象——但经常被遗忘。
您可能应该编写一个深度合并函数，它只期望原始值和简单对象(结构化克隆算法最多可以处理的那些类型)作为合并源。如果遇到它不能处理的东西，或者只是通过引用而不是深度合并进行赋值，则抛出。
换句话说，没有一种适合所有人的算法，您要么必须使用自己的算法，要么寻找恰好涵盖您的用例的库方法。
适用于对象和数组的Vanilla Script解决方案:
const x = { a: { a: 1 } }
const y = { a: { b: 1 } }
const z = { ...x, ...y } // { a: { b: 1 } }
function deepmerge() {
merge = function () {
let target = arguments[0];
for (let i = 1; i < arguments.length ; i++) {
let arr = arguments[i];
for (let k in arr) {
if (Array.isArray(arr[k])) {
if (target[k] === undefined) {
target[k] = [];
}
target[k] = [...new Set(target[k].concat(...arr[k]))];
} else if (typeof arr[k] === 'object') {
if (target[k] === undefined) {
target[k] = {};
}
target[k] = merge(target[k], arr[k]);
} else {
target[k] = arr[k];
}
}
}
return target;
}
return merge(...arguments);
}
console.log(deepmerge(x,y));
输出:
{
a: {
a: 1,
b: 1
}
}
它不存在，但你可以使用JSON.parse(JSON.stringify(jobs))
