Object.assign和对象扩展运算符都只进行浅复制。
问题示例：
// 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 } }
Object.assign()也是如此。我知道这个问题有点旧了，但是在ES2015/ES6中我能想到的最简单的解决方案其实非常简单，使用Object.assign()。
希望这能够帮助：
/**
* 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 } } });
// or
const merged = mergeDeep({a: 1}, { b : { c: { d: { e: 12345}}}});
console.dir(merged); // { a: 1, b: { c: { d: [Object] } } }
在下面的答案中，您会找到一个不可变版本。
请注意，这将导致循环引用的无限递归。如果您认为可能会遇到此问题，这里有一些很好的答案可以帮助您检测循环引用。
Object.assign(target, { [key]: {} })，而不是直接写成 target[key] = {}？ - Jürg Lehnitarget[key] = source[key]代替Object.assign(target, { [key]: source[key] });。 - Jürg Lehnitarget 参数中的非普通对象。例如，执行 mergeDeep({a: 3}, {a: {b: 4}}) 将导致增加一个扩展过的 Number 对象，这显然是不期望的。此外，isObject 不接受数组，但接受任何其他本地对象类型，如 Date，这些对象类型不应进行深度复制。 - rivvar object = {
'a': [{ 'b': 2 }, { 'd': 4 }]
};
var other = {
'a': [{ 'c': 3 }, { 'e': 5 }]
};
console.log(_.merge(object, other));
// => { '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"></script>{ 'a': [{ 'b': 2 }, { 'c': 3 }, { 'd': 4 }, { 'e': 5 }] } 吗？ - J. Hesters{ 'a': [{ 'b': 2, 'c': 3 }, { 'd': 4, 'e': 5 }] } 是正确的，因为我们正在合并数组的元素。 object.a 的第一个元素是 {b: 2}，而 other.a 的第一个元素是 {c: 3}。当它们因为相同的数组索引而被合并在一起时，结果是 { 'b': 2, 'c': 3 }，这是新对象中的第一个元素。 - Alexandru Furculita这里是@Salakar答案的不可变版本（不修改输入）。如果你正在进行函数式编程类型的工作，这将非常有用。
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;
}
key的值作为属性名，而第二个则将“key”作为属性名。请参见：http://es6-features.org/#ComputedPropertyNames - CpILLisObject 中，你不需要在结尾处检查 && item !== null，因为该行以 item && 开头，对吧？ - ephemermergedDeep 的输出中仍将引用相同的值（我认为）。例如：const target = { a: 1 }; const source = { b: { c: 2 } }; const merged = mergeDeep(target, source);
merged.b.c; // 2
source.b.c = 3;
merged.b.c; // 3这是一个问题吗？它并没有改变输入，但是任何未来对输入的修改都可能改变输出，反之亦然。不过，值得一提的是，Ramda 的 R.merge() 也有相同的行为。 - James Conkling2022年更新:
我创建了 mergician ，以解决评论中讨论的各种合并/克隆要求。它基于我原来的回答（如下），但提供了可配置选项：
与本地方法和其他合并/克隆实用程序不同，Mergician 提供了高级选项，用于自定义合并/克隆过程。这些选项使得检查、过滤和修改键和属性变得轻松；合并或跳过唯一的、共同的和通用的键（即交集、并集和差异）；并从数组中合并、排序和去除重复项。属性访问器和描述符也被正确处理，确保 getter/setter 函数被保留，并且描述符值被定义在新的合并/克隆对象上。
值得注意的是，与类似的工具库lodash.merge(5.1k min+gzip)相比，mergician 更小（1.5k min+gzip）。
原始回答:
既然这个问题仍然存在，那么这是另一种方法：
/**
* Performs a deep merge of objects and returns new object. Does not modify
* objects (immutable) and merges arrays via concatenation.
*
* @param {...object} objects - Objects to merge
* @returns {object} New object with merged key/values
*/
function mergeDeep(...objects) {
const isObject = obj => obj && typeof obj === 'object';
return objects.reduce((prev, obj) => {
Object.keys(obj).forEach(key => {
const pVal = prev[key];
const oVal = obj[key];
if (Array.isArray(pVal) && Array.isArray(oVal)) {
prev[key] = pVal.concat(...oVal);
}
else if (isObject(pVal) && isObject(oVal)) {
prev[key] = mergeDeep(pVal, oVal);
}
else {
prev[key] = oVal;
}
});
return prev;
}, {});
}
// Test objects
const obj1 = {
a: 1,
b: 1,
c: { x: 1, y: 1 },
d: [ 1, 1 ]
}
const obj2 = {
b: 2,
c: { y: 2, z: 2 },
d: [ 2, 2 ],
e: 2
}
const obj3 = mergeDeep(obj1, obj2);
// Out
console.log(obj3);prev[key] = pVal.concat(...oVal); 更改为 prev[key] = [...pVal, ...oVal].filter((element, index, array) => array.indexOf(element) === index);。 - Richard HerriesisObject检查方法太过简单。请使用以下代码：(obj+"") === "[object Object]" - vsyncObject.assign一样。
for..in或Object.keys的答案是误导性的x={a:1}, y={a:{b:1}}上的Object.assign进行比较）。然后我阅读了the8472's answer，我想……这样很难逃脱，改进已经给出的答案不会让我们走得更远。const y = Object.create(
{ proto : 1 },
{ a: { enumerable: true, value: 1},
[Symbol('b')] : { enumerable: true, value: 1} } )
Object.assign({},y)
> { 'a': 1, Symbol(b): 1 } // All (enumerable) properties are copied
((x,y) => Object.keys(y).reduce((acc,k) => Object.assign(acc, { [k]: y[k] }), x))({},y)
> { 'a': 1 } // Missing a property!
((x,y) => {for (let k in y) x[k]=y[k];return x})({},y)
> { 'a': 1, 'proto': 1 } // Missing a property! Prototype's property is copied too!
Object.keys会省略自身的不可枚举属性、自身的符号键属性和所有原型的属性。如果你的对象没有这些属性，那么这可能是可以的。但请注意，Object.assign处理自身的符号键枚举属性。因此，你的自定义复制将失去其效果。
for..in会提供源的属性、其原型的属性以及整个原型链的属性，而你并不想要（或知道）它们。你的目标可能会有太多的属性，混淆原型属性和自身属性。
如果你正在编写一个通用函数，并且没有使用Object.getOwnPropertyDescriptors、Object.getOwnPropertyNames、Object.getOwnPropertySymbols或Object.getPrototypeOf，那么你很可能做错了。
首先，请确保你理解Javascript对象是什么。在Javascript中，一个对象由自身的属性和（父级）原型对象组成。原型对象又由自身的属性和原型对象组成。依此类推，定义了一个原型链。
属性是一个键（string或symbol）和描述符（value或get/set访问器，以及像enumerable这样的属性）的对。
最后，有许多类型的对象。你可能想要以不同的方式处理一个对象Object和一个对象Date或一个对象Function。
因此，在编写深拷贝时，您应该至少回答以下问题：
对于我的示例，我认为只有“对象Object”是“深层”的，因为由其他构造函数创建的其他对象可能不适合进行深入查看。定制自这个SO。
function toType(a) {
// Get fine type (object, array, function, null, error, date ...)
return ({}).toString.call(a).match(/([a-z]+)(:?\])/i)[1];
}
function isDeepObject(obj) {
return "Object" === toType(obj);
}
我创建了一个options对象来选择要复制的内容（仅供演示目的）。
const options = {nonEnum:true, symbols:true, descriptors: true, proto:true};
您可以在这个plunker中测试它。
function deepAssign(options) {
return function deepAssignWithOptions (target, ...sources) {
sources.forEach( (source) => {
if (!isDeepObject(source) || !isDeepObject(target))
return;
// Copy source's own properties into target's own properties
function copyProperty(property) {
const descriptor = Object.getOwnPropertyDescriptor(source, property);
//default: omit non-enumerable properties
if (descriptor.enumerable || options.nonEnum) {
// Copy in-depth first
if (isDeepObject(source[property]) && isDeepObject(target[property]))
descriptor.value = deepAssign(options)(target[property], source[property]);
//default: omit descriptors
if (options.descriptors)
Object.defineProperty(target, property, descriptor); // shallow copy descriptor
else
target[property] = descriptor.value; // shallow copy value only
}
}
// Copy string-keyed properties
Object.getOwnPropertyNames(source).forEach(copyProperty);
//default: omit symbol-keyed properties
if (options.symbols)
Object.getOwnPropertySymbols(source).forEach(copyProperty);
//default: omit prototype's own properties
if (options.proto)
// Copy souce prototype's own properties into target prototype's own properties
deepAssign(Object.assign({},options,{proto:false})) (// Prevent deeper copy of the prototype chain
Object.getPrototypeOf(target),
Object.getPrototypeOf(source)
);
});
return target;
}
}
可以像这样使用：
const x = { a: { a: 1 } },
y = { a: { b: 1 } };
deepAssign(options)(x,y); // { a: { a: 1, b: 1 } }
target始终是“较小”的对象”是正确的吗？谢谢。 - The gates of Zionnpm install deepmerge）或deepmerge-ts（npm install deepmerge-ts）。
deepmerge还带有TypeScript的类型，并且更加稳定（因为它较旧），但deepmerge-ts也可以在Deno中使用，并且是设计更快的, 尽管如其名称所示，它是用TypeScript编写的。deepmerge({ a: 1, b: 2, c: 3 }, { a: 2, d: 3 });
to get
{ a: 2, b: 2, c: 3, d: 3 }
这适用于复杂对象和数组，是一种真正的全能解决方案。
const merge = require('lodash.merge'); - barney765as / any 进行类型定义。 - godblessstrawberrydeepmerge-ts更受欢迎，我决定提出一个问题。使用any的情况非常少，但应该避免。旧版的deepmerge不应受到干扰，因为它只适用于JavaScript环境。 - Martin BraunObject.assign一样深入，并且适用于数组，无需任何修改。
function deepAssign(target, ...sources) {
for (source of sources) {
for (let k in source) {
let vs = source[k], vt = target[k]
if (Object(vs) == vs && Object(vt) === vt) {
target[k] = deepAssign(vt, vs)
continue
}
target[k] = source[k]
}
}
return target
}
x = { a: { a: 1 }, b: [1,2] }
y = { a: { b: 1 }, b: [3] }
z = { c: 3, b: [,,,4] }
x = deepAssign(x, y, z)
console.log(JSON.stringify(x) === JSON.stringify({
"a": {
"a": 1,
"b": 1
},
"b": [ 1, 2, null, 4 ],
"c": 3
}))new Date(), a(){}, null, undefined, 0)。 - vsyncfunction merge(current, updates) {
for (key of Object.keys(updates)) {
if (!current.hasOwnProperty(key) || typeof updates[key] !== 'object') current[key] = updates[key];
else merge(current[key], updates[key]);
}
return current;
}
console.log(merge({ a: { a: 1 } }, { a: { b: 1 } }));数组处理：上述版本将旧的数组值与新的值进行覆盖。如果您希望保留旧的数组值并添加新的值，只需在else语句之前添加else if (current[key] instanceof Array && updates[key] instanceof Array) current[key] = current[key].concat(updates[key])代码块即可。
export const mergeObjects = <T extends object = object>(target: T, ...sources: T[]): T => {
if (!sources.length) {
return target;
}
const source = sources.shift();
if (source === undefined) {
return target;
}
if (isMergebleObject(target) && isMergebleObject(source)) {
Object.keys(source).forEach(function(key: string) {
if (isMergebleObject(source[key])) {
if (!target[key]) {
target[key] = {};
}
mergeObjects(target[key], source[key]);
} else {
target[key] = source[key];
}
});
}
return mergeObjects(target, ...sources);
};
const isObject = (item: any): boolean => {
return item !== null && typeof item === 'object';
};
const isMergebleObject = (item): boolean => {
return isObject(item) && !Array.isArray(item);
};
单元测试:
describe('merge', () => {
it('should merge Objects and all nested Ones', () => {
const obj1 = { a: { a1: 'A1'}, c: 'C', d: {} };
const obj2 = { a: { a2: 'A2'}, b: { b1: 'B1'}, d: null };
const obj3 = { a: { a1: 'A1', a2: 'A2'}, b: { b1: 'B1'}, c: 'C', d: null};
expect(mergeObjects({}, obj1, obj2)).toEqual(obj3);
});
it('should behave like Object.assign on the top level', () => {
const obj1 = { a: { a1: 'A1'}, c: 'C'};
const obj2 = { a: undefined, b: { b1: 'B1'}};
expect(mergeObjects({}, obj1, obj2)).toEqual(Object.assign({}, obj1, obj2));
});
it('should not merge array values, just override', () => {
const obj1 = {a: ['A', 'B']};
const obj2 = {a: ['C'], b: ['D']};
expect(mergeObjects({}, obj1, obj2)).toEqual({a: ['C'], b: ['D']});
});
it('typed merge', () => {
expect(mergeObjects<TestPosition>(new TestPosition(0, 0), new TestPosition(1, 1)))
.toEqual(new TestPosition(1, 1));
});
});
class TestPosition {
constructor(public x: number = 0, public y: number = 0) {/*empty*/}
}
const merge = (p, c) => Object.keys(p).forEach(k => !!p[k] && p[k].constructor === Object ? merge(p[k], c[k]) : c[k] = p[k])- Xaqronhttps://gist.github.com/ahtcx/0cd94e62691f539160b32ecda18af3d6- Nwawel A Iroume