如何在 JavaScript 中合并对象

DigvijayDD

开发人员经常需要合并或复制对象来执行组合数据或创建新实例等任务。扩展 ( ...) 运算符（用于合并多个对象的属性）和方法Object.assign()（用于将属性从一个对象复制到另一个对象）等技术是完成这些任务的重要工具。然而，了解何时以及如何使用它们对于有效的对象操作至关重要。在本文中，我将介绍这些方法的一些实际应用、它们的优点和缺点，以及合并嵌套对象之前深度复制的概念。 Pause Next Unmute Current Time 0:15 / Duration 2:00 Fullscreen 目录 合并对象的方法 1. 展开运算符 ( … ) 2.Object.assign()方法 陷阱和注意事项 使用哪一个 深度合并：深度复制和合并对象 自定义深度合并功能 结论 合并对象的方法 1. 展开运算符 ( ...) 展开运算符( ...) 是 JavaScript 中合并对象的常用方法。它具有以下形式{...object1, ...object2}。

当源对象中存在具有相同键的属性时，扩展运算符会使用最新 电话号码列表  的源对象的值覆盖目标对象中的值。 合并到target对象中。当源对象中存在具有相同键的属性时，Object.assign()用最新的源对象的值覆盖目标对象中的值。 const defaults = { color: 'red', size: 'medium' }; const userSettings = { color: 'blue' }; const combinedSettings = Object.assign({}, defaults, userSettings); console.log(combinedSettings); // Output: { color: 'blue', size: 'medium' } 陷阱和注意事项 Object.assign()以下是JavaScript 中扩展运算符和合并对象方法的潜在陷阱和问题： 1.浅复制 扩展运算符和合并对象时都Object.assign()执行浅复制。这意味着嵌套对象仍然是对原始对象的引用。修改合并对象中的嵌套对象可能会影响原始对象，这可能会导致意外的副作用。



请参阅下面的深度合并。 2. 覆盖属性 当合并具有相同键的属性的对象时，扩展运算符和Object.assign()结果对象中的值都会被最新源对象中的值覆盖。如果处理不当，此行为可能会导致数据丢失。 学习使用 JavaScript 编码 3、兼容性问题 扩展运算符是 ECMAScript 2015 (ES6) 的一部分，并且在较旧的 JavaScript 环境或浏览器（例如 Internet Explorer）中不受支持。如果您的代码需要在较旧的环境中运行，这可能会导致兼容性问题。在这种情况下，最好使用Object.assign()具有更广泛支持的 。 4. 不可枚举属性 扩展运算符Object.assign()仅将可枚举属性从源对象复制到目标对象。在合并过程中不会复制不可枚举属性，这可能会导致数据丢失或意外行为。 5. 性能问题 当您需要合并大型对象或频繁执行合并操作时，使用Object.assign()或 展开运算符可能会因合并​​过程中创建新对象而导致性能问题。 6. 原型属性 Object.assign()将属性从源对象的原型复制到目标对象，如果源对象的原型具有与目标对象的属性冲突的属性，则可能会导致意外行为。