如何在JavaScript中合并对象-js教程-PHP中文网

JavaScript 中常用的对象合并方法包括展开运算符 (...) 和 Object.assign() 方法。展开运算符更现代、简洁，而 Object.assign() 兼容性更好，适用于较旧的环境。
展开运算符和 Object.assign() 在合并对象时都执行浅拷贝，这意味着嵌套对象仍然是原始对象的引用。修改合并对象中的嵌套对象可能会影响原始对象，从而导致潜在的意外副作用。
对于深度合并（正确合并嵌套对象），可以使用自定义函数或 Lodash 等库。文中提供了一个自定义函数 deepMergeObjects 的示例，该函数在使用 JSON.parse(JSON.stringify()) 技术合并对象之前，会创建对象的深度副本。

开发人员经常需要合并或复制对象来完成诸如组合数据或创建新实例之类的任务。展开运算符 (...)（用于合并多个对象的属性）和 Object.assign() 方法（用于将一个对象的属性复制到另一个对象）等技术是完成这些任务的重要工具。但是，了解何时以及如何使用它们对于有效操作对象至关重要。在本文中，我将介绍这些方法的一些实际应用、它们的优缺点以及深度复制后再合并嵌套对象的理念。

对象合并方法
- 1. 展开运算符 (...)
- 1. Object.assign() 方法
陷阱与注意事项
选择哪种方法
深度合并：深度复制和合并对象
- 自定义深度合并函数
结论

对象合并方法

1. 展开运算符 (`...`)

展开运算符 (...) 是在 JavaScript 中合并对象的常用方法。其形式为 { ...object1, ...object2 }。当源对象中存在键相同的属性时，展开运算符会用最新的源对象的数值覆盖目标对象中的数值。

const defaults = { color: 'red', size: 'medium' };
const userSettings = { color: 'blue' };

const combinedSettings = { ...defaults, ...userSettings };
console.log(combinedSettings);
// 输出：{ color: 'blue', size: 'medium' }

登录后复制

2. `Object.assign()` 方法

Object.assign() 是 JavaScript 中用于合并对象的另一种方法。其语法为 Object.assign(target, source1, source2, ...)，其中将源对象合并到目标对象中。当源对象中存在键相同的属性时，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' }

登录后复制

陷阱与注意事项

以下是 JavaScript 中使用展开运算符和 Object.assign() 方法合并对象时可能遇到的陷阱和问题：

1. 浅拷贝

展开运算符和 Object.assign() 在合并对象时都执行浅拷贝。这意味着嵌套对象仍然是原始对象的引用。修改合并对象中的嵌套对象可能会影响原始对象，这可能会导致意外的副作用。

请参阅下面的深度合并。

2. 覆盖属性

当合并具有相同键的属性的对象时，展开运算符和 Object.assign() 会用来自最新源对象的数值覆盖结果对象中的数值。如果处理不当，此行为可能会导致数据丢失。

3. 兼容性问题

展开运算符是 ECMAScript 2015 (ES6) 的一部分，在较旧的 JavaScript 环境或浏览器（例如 Internet Explorer）中不受支持。如果您的代码需要在较旧的环境中运行，这可能会导致兼容性问题。在这种情况下，最好使用 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 defaults = { color: 'red', size: 'medium' };
const userSettings = { color: 'blue' };

const combinedSettings = { ...defaults, ...userSettings };
console.log(combinedSettings);
// 输出：{ color: 'blue', size: 'medium' }

登录后复制

这段代码的输出表明，通过在 shallowCopyPlanet 中编辑原始对象 planet 的 info.moons 属性已被更改（您可能不希望这样）。

自定义深度合并函数

这是一个函数，它在合并之前会深度复制多个对象，并返回单个对象。在代码中，deepMergeObjects 函数接受任意数量的输入对象，使用 JSON.parse(JSON.stringify()) 技术创建它们的深度副本，然后使用 reduce() 方法中的展开运算符合并它们。合并后的对象将包含来自输入对象的属性的深度副本。

const defaults = { color: 'red', size: 'medium' };
const userSettings = { color: 'blue' };

const combinedSettings = Object.assign({}, defaults, userSettings);
console.log(combinedSettings);
// 输出：{ color: 'blue', size: 'medium' }

登录后复制

结论

感谢您的阅读！我希望本文能帮助您深入了解在 JavaScript 中合并对象，而不仅仅是浅显的介绍。能够合并对象应该能很好地与您的 JavaScript 技能相结合，并扩展您的编码能力。如有任何问题或意见，请加入 SitePoint 社区论坛。

关于在 JavaScript 中合并对象的常见问题解答

在 JavaScript 中合并对象的理念是什么？

在 JavaScript 中合并对象是指将两个或多个对象合并成单个对象的过程。这通常是为了将多个对象的属性和方法合并到一个对象中，从而更方便地管理和操作数据。合并后的对象将包含原始对象的所有属性和方法。如果存在重复的属性，则最后一个对象的数值将覆盖之前的数值。

如何使用展开运算符在 JavaScript 中合并对象？

JavaScript 中的展开运算符 (...) 是一种现代且高效的合并对象的方法。它允许展开诸如数组表达式或字符串之类的可迭代对象，以在预期为零个或多个参数或元素的地方使用。以下是如何使用它的示例：

const planet = {
  name: 'Earth',
  emoji: '?',
  info: {
    type: 'terrestrial',
    moons: 1
  }
};

// 使用展开运算符进行浅拷贝
const shallowCopyPlanet = { ...planet };

// 修改浅拷贝中的嵌套对象
shallowCopyPlanet.info.moons = 2;

console.log('原始行星：', planet.info.moons);
// 原始行星：2
console.log('行星的浅拷贝：', shallowCopyPlanet.info.moons);
// 行星的浅拷贝：2

登录后复制

`Object.assign()` 方法在合并对象中的作用是什么？

Object.assign() 方法用于将一个或多个源对象的所有可枚举自身属性的数值复制到目标对象。它将返回目标对象。它是一种非常有用的合并对象的方法，因为它允许您将多个源对象合并到单个目标对象中。但是，需要注意的是，如果在多个对象中都找到了相同的属性，则具有该属性的最后一个对象的数值将覆盖之前的数值。

我可以在 JavaScript 中合并嵌套对象吗？

是的，您可以在 JavaScript 中合并嵌套对象。但是，此过程稍微复杂一些，因为您需要确保嵌套对象也正确合并，而不仅仅是顶级属性。这通常称为深度合并。Object.assign() 和展开运算符默认情况下都不会执行深度合并。为此，您需要实现自定义函数或使用 Lodash 等库。

合并对象时，重复属性会发生什么？

在 JavaScript 中合并对象时，如果存在重复属性，则最后一个对象的数值将覆盖之前的数值。这是因为当合并对象时，它会遍历源对象的属性并将它们分配给目标对象。如果目标对象上已经存在属性，则其数值将被新数值替换。

是否可以像合并对象一样合并 JavaScript 中的数组？

是的，可以使用与对象类似的方法在 JavaScript 中合并数组。展开运算符是合并数组的常用方法。以下是一个示例：

const defaults = { color: 'red', size: 'medium' };
const userSettings = { color: 'blue' };

const combinedSettings = { ...defaults, ...userSettings };
console.log(combinedSettings);
// 输出：{ color: 'blue', size: 'medium' }

登录后复制