如何在js中合并对象
如何在js中合并对象
我们经常需要合并（扩展 (...) 运算符（用于合并多个对象的属性）和Object.assign()（用于将属性从一个对象复制到另一个对象）或复制对象来执行组合数据或创建新实例等操作。然而，我们是否真的了解何时以及如何使用它们呢。在本文中，将介绍这些方法的一些实际应用、优缺点，以及合并嵌套对象之前深度复制这些概念。
合并对象的方法
扩展运算符（…）
扩展运算符（...）是 JavaScript 中合并对象的常用方法。
语法：{...object1, ...object2}。
当源对象中存在具有相同键的属性时，扩展运算符会使用最新的源对象值覆盖目标对象中的值。
const defaults = { color: 'red', size: 'medium' };
const userSettings = { color: 'blue' };
const combinedSettings = { ...defaults, ...userSettings };
console.log(combinedSettings);
// 输出 { color: 'blue', size: 'medium' }
Object.assign() 方法
Object.assign()是一种用于合并对象的 JavaScript 方法。
语法：Object.assign(target, source1, source2, ...)。
我们可以将源对象（第二个及之后的所有参数）合并到target对象中。当源对象中存在与target对象具有相同键的属性时，Object.assign()用最新的源对象的值覆盖目标对象中的值。
const defaults = { color: 'red', size: 'medium' };
const userSettings = { color: 'blue' };
const combinedSettings = Object.assign({}, defaults, userSettings);
console.log(combinedSettings);
// 输出 { color: 'blue', size: 'medium' }
注意事项
虽然以上的两个方法的使用非常简单，但是我们需要注意以下几点：
1. 浅复制
扩展运算符和Object.assign()执行的都是对对象的浅复制。这意味着嵌套对象仍然是对原始对象的引用。修改合并对象中的嵌套对象可能会影响原始对象，这可能会导致意外的副作用。
2. 属性覆盖
当合并具有相同键的属性的对象时，扩展运算符和Object.assign()结果对象中的值都会被最新源对象中的值覆盖。如果处理不当，此行为可能会导致数据丢失。
3. 兼容性问题
扩展运算符是 ECMAScript 2015 (ES6) 的一部分，并且在较旧的 JavaScript 环境或浏览器（例如 Internet Explorer）中不受支持（可以在caniuse中查询浏览器的支持情况）。如果我们的代码需要在较旧的环境中运行，这可能会导致兼容性问题。在这种情况下，最好使用Object.assign()具有更广泛支持的 。
4. 不可枚举属性
扩展运算符和Object.assign()仅将可枚举属性从源对象复制到目标对象。在合并过程中不会复制不可枚举属性，这可能会导致数据丢失或意外行为。
5. 性能问题
当我们需要合并大型对象或频繁执行合并操作时，使用Object.assign()或扩展运算符可能会因合并过程中需要创建新对象而导致性能问题。
6. 原型属性
Object.assign()将属性从源对象的原型复制到目标对象，如果源对象的原型具有与目标对象的属性冲突的属性，则可能会导致意外行为。另一方面，扩展运算符不复制原型属性。
在 JavaScript 中使用展开运算符或Object.assign()时，我们需要特别注意以上几点问题，在特定场景下，可能需要采用其他方法（例如深度克隆或深度合并功能）来克服这些限制。
使用哪一个
Object.assign()和扩展运算符都可以有效地合并对象。扩展运算符更加简洁，而Object.assign()提供了与旧版 JavaScript 环境更好的兼容性。
决定使用哪种方法，可以结合以下几点考虑：
- 如果我们的环境支持扩展运算符（例如最新的
ECMAScript版本），最好使用这种方式，因为它的语法简洁。 - 如果与旧版
JavaScript环境的兼容性很重要，请选择Object.assign(). - 如果需要复制嵌套对象（其中嵌套有对象的对象），查看下个章节。
深度合并：深度复制和合并对象
展开运算符和 Object.assign() 都会创建所复制对象的浅副本。本质上，这意味着新对象将引用与原始对象相同的嵌套对象（例如数组和函数），而不是它们的副本。在将对象合并在一起之前我们需要特别考虑到这点。
下面的示例显示了在复制的对象上编辑嵌套对象如何影响原始对象：
const obj = {
name: 'object',
info: {
type: 'Object',
value: 1
}
};
// 使用扩展运算符进行浅复制
const shallowCopyPlanet = { ...planet };
// 修改复制对象
shallowCopyPlanet.info.value = 2;
console.log(obj.info.value);
// 输出 2
console.log(shallowCopyPlanet.info.value);
// 输出 2
自定义深度合并功能
这是一个在合并多个对象之前深度复制它们并返回单个对象的函数。
const deepMergeObjects = (...objects) => {
const deepCopyObjects = objects.map(object => JSON.parse(JSON.stringify(object)));
return deepCopyObjects.reduce((merged, current) => ({ ...merged, ...current }), {});
}
在代码中，deepMergeObjects函数采用任意数量的输入对象，使用JSON.parse(JSON.stringify())技术创建它们的深层副本，然后在reduce()方法内使用扩展运算符将它们合并。
const obj = {
name: 'object',
info: {
type: 'Object',
value: 1
}
};
const shallowCopyPlanet = deepMergeObjects(obj);
shallowCopyPlanet.info.value = 2;
console.log(obj.info.value);
// 输出 `
console.log(shallowCopyPlanet.info.value);
// 输出 2