两个对象。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()相同。
有办法做到这一点吗?
当前回答
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}}
其他回答
我不喜欢现有的解决方案。所以，我开始写我自己的。
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;
}
我希望这能帮助那些努力理解正在发生的事情的人。我在这里看到了很多无意义的变量。
谢谢
这是一个廉价的深度合并，使用尽可能少的代码我能想到。当前一个属性存在时，每个源都会覆盖它。
const { keys } = Object;
const isObject = a => typeof a === "object" && !Array.isArray(a);
const merge = (a, b) =>
isObject(a) && isObject(b)
? deepMerge(a, b)
: isObject(a) && !isObject(b)
? a
: b;
const coalesceByKey = source => (acc, key) =>
(acc[key] && source[key]
? (acc[key] = merge(acc[key], source[key]))
: (acc[key] = source[key])) && acc;
/**
* Merge all sources into the target
* overwriting primitive values in the the accumulated target as we go (if they already exist)
* @param {*} target
* @param {...any} sources
*/
const deepMerge = (target, ...sources) =>
sources.reduce(
(acc, source) => keys(source).reduce(coalesceByKey(source), acc),
target
);
console.log(deepMerge({ a: 1 }, { a: 2 }));
console.log(deepMerge({ a: 1 }, { a: { b: 2 } }));
console.log(deepMerge({ a: { b: 2 } }, { a: 1 }));
用例:合并默认配置
如果我们以以下形式定义配置:
const defaultConf = {
prop1: 'config1',
prop2: 'config2'
}
我们可以这样定义更具体的配置:
const moreSpecificConf = {
...defaultConf,
prop3: 'config3'
}
但是如果这些配置包含嵌套结构，这种方法就不再适用了。
因此，我写了一个函数，它只合并{key: value，…}并替换其余的。
const isObject = (val) => val === Object(val);
const merge = (...objects) =>
objects.reduce(
(obj1, obj2) => ({
...obj1,
...obj2,
...Object.keys(obj2)
.filter((key) => key in obj1 && isObject(obj1[key]) && isObject(obj2[key]))
.map((key) => ({[key]: merge(obj1[key], obj2[key])}))
.reduce((n1, n2) => ({...n1, ...n2}), {})
}),
{}
);
我在加载缓存redux状态时遇到了这个问题。如果我只是加载缓存的状态，我会遇到错误的新应用程序版本与更新的状态结构。
前面已经提到过，lodash提供了merge函数，我使用了这个函数:
const currentInitialState = configureState().getState();
const mergedState = _.merge({}, currentInitialState, cachedState);
const store = configureState(mergedState);
我们可以使用$.extend(true,object1,object2)进行深度合并。值true表示递归合并两个对象，修改第一个对象。
美元扩展(真的,目标,对象)
