在运行时合并 JavaScript 对象的属性

Noah Rousseau

2024年7月4日星期四上午7:45:56

在 JavaScript 中组合对象属性

合并两个 JavaScript 对象的属性是开发人员遇到的常见任务。无论您正在处理配置、选项还是简单的数据对象，了解如何有效地组合属性都可以节省您的时间并使代码更易于维护。

在本指南中，我们将探讨如何在运行时合并两个简单 JavaScript 对象的属性。我们将提供一个实际示例来说明该过程，并讨论 JavaScript 中可用的内置方法来实现此目的，而无需递归或合并函数。

命令	描述
Object.assign()	将一个或多个源对象的属性合并到目标对象中。直接修改目标对象。
Spread Operator (...)	允许将对象的属性扩展到另一个对象。创建具有组合属性的新对象。
$.extend()	将两个或多个对象的内容合并到第一个对象中的 jQuery 方法。
_.assign()	Lodash 函数，将源对象的属性复制到目标对象。
const	声明一个块范围的只读命名常量。常量的值不能通过重新赋值来更改。
console.log()	向 Web 控制台输出一条消息。它用于调试目的以打印变量值或消息。
<script>	包含 JavaScript 代码或外部 JavaScript 文件链接的 HTML 标记。

了解对象合并技术

在 JavaScript 中，合并两个对象的属性是一项基本任务，尤其是在处理配置或选项时。我们探索的第一种方法使用 Object.assign() 功能。该方法将一个或多个源对象的属性合并到目标对象中，直接修改目标。例如， Object.assign(obj1, obj2) 需要 obj2 并将其属性复制到 obj1。结果是 obj1 现在包括两者的所有属性 obj1 和 obj2。此方法对于属性不需要深度合并的简单、平面对象非常有效。

第二种方法使用ES6 spread operator (...) 。该运算符允许将对象的属性扩展到另一个对象，从而创建具有组合属性的新对象。例如， const mergedObj = { ...obj1, ...obj2 } 结果产生一个新对象 mergedObj 其中包括来自的所有属性 obj1 和 obj2。不像 Object.assign()，扩展运算符不会修改原始对象，使其成为一种更不可变的方法。扩展运算符在语法上也更简单，并且通常因其可读性和简洁的代码而受到青睐。

利用库进行对象合并

对于那些喜欢使用库的人来说，jQuery 和 Lodash 提供了强大的方法来合并对象。这 $.extend() jQuery 的方法将两个或多个对象的内容合并到第一个对象中。当你使用 $.extend(obj1, obj2), 的性质 obj2 被合并到 obj1。当在以 jQuery 为中心的项目中工作时，此方法特别有用，它提供了一种无缝的方式来处理对象合并，而无需额外的依赖项。

同样，Lodash 提供了 17 号 函数，它将源对象的属性复制到目标对象。通过致电 _.assign(obj1, obj2), obj1 已更新以包含来自的所有属性 obj2。 Lodash 是一个功能强大的实用程序库，提供了许多对象操作方法，并且 17 号 是合并对象的可靠选择，特别是在处理更大、更复杂的应用程序时。 jQuery 和 Lodash 的两种方法都确保了兼容性并扩展了本机 JavaScript 方法的功能。

使用 Object.assign() 合并对象属性

JavaScript ES6 方法

const obj1 = { food: 'pizza', car: 'ford' };
const obj2 = { animal: 'dog' };

// Using Object.assign() to merge obj2 into obj1
Object.assign(obj1, obj2);

console.log(obj1); // Output: { food: 'pizza', car: 'ford', animal: 'dog' }

将对象属性与展开运算符相结合

JavaScript ES6+ 方法

const obj1 = { food: 'pizza', car: 'ford' };
const obj2 = { animal: 'dog' };

// Using the spread operator to merge objects
const mergedObj = { ...obj1, ...obj2 };

console.log(mergedObj); // Output: { food: 'pizza', car: 'ford', animal: 'dog' }

将对象属性与 jQuery 相结合

使用jQuery的extend()方法

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<script>
  const obj1 = { food: 'pizza', car: 'ford' };
  const obj2 = { animal: 'dog' };

  // Using jQuery's extend() to merge obj2 into obj1
  $.extend(obj1, obj2);

  console.log(obj1); // Output: { food: 'pizza', car: 'ford', animal: 'dog' }
</script>
</body>
</html>

将属性与 Lodash 合并

使用 Lodash 的 allocate() 方法

<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
</head>
<body>
<script>
  const obj1 = { food: 'pizza', car: 'ford' };
  const obj2 = { animal: 'dog' };

  // Using Lodash's assign() to merge obj2 into obj1
  _.assign(obj1, obj2);

  console.log(obj1); // Output: { food: 'pizza', car: 'ford', animal: 'dog' }
</script>
</body>
</html>

合并 JavaScript 对象的高级技术

除了合并 JavaScript 对象的基本方法之外，还有可以处理更复杂场景的高级技术。其中一种技术涉及使用深度合并函数。与前面讨论的浅层合并方法不同，深度合并涉及递归合并嵌套对象。当处理需要组合嵌套对象的复杂数据结构时，这特别有用。像 Lodash 这样的图书馆提供 22 号 执行深度合并的函数，确保所有嵌套属性都正确合并而不会丢失任何数据。

另一种高级方法是创建适合特定需求的自定义合并函数。例如，您可能需要根据某些条件有条件地合并对象。通过编写自定义合并函数，您可以精确控制属性的合并方式，包括处理冲突或跳过某些属性。这种级别的定制可以在管理对象数据方面提供更大的灵活性和精确度，使其成为复杂应用程序或特定用例的宝贵工具。

有关合并 JavaScript 对象的常见问题和解答

合并对象时如何处理冲突？
可以通过使用指定如何解决冲突的自定义合并函数来处理冲突，例如从一个对象中选择值而不是另一个对象中的值。
你能同时合并两个以上的对象吗？
是的，两者都 Object.assign() 和 spread operator 可以通过将多个对象作为附加参数传递来合并它们。
浅层合并和深层合并有什么区别？
浅合并仅合并顶层属性，而深合并递归地合并对象的所有嵌套属性。
是否可以在不修改原始对象的情况下合并对象？
是的，使用 spread operator 或创建新对象 Object.assign() 确保原始对象保持不变。
如果对象将函数作为属性会发生什么？
如果对象将函数作为属性，那么这些函数将像任何其他属性一样被合并。如果需要合并或覆盖函数，则需要特殊处理。
洛达什的怎么样 22 号 与......不同 17 号？
22 号 执行深度合并，递归地合并嵌套对象，同时 17 号 只执行浅合并。
可以将对象与数组合并为属性吗？
是的，数组可以合并，但您可能需要决定如何处理数组合并，例如连接数组或合并单个元素。
合并大型对象时是否有任何性能考虑？
合并大型对象，尤其是深度合并，可能需要大量计算。对于性能关键型应用程序可能需要优化或仔细设计。
合并对象是否需要使用第三方库？
虽然不是必需的，但像 Lodash 这样的第三方库提供了方便且经过充分测试的方法来合并对象，特别是对于复杂的场景。

总结对象合并技术

合并 JavaScript 对象的属性是开发中的常见任务。方法如 Object.assign() 和 spread operator 对于简单的对象处理这个。对于更复杂的场景，像 jQuery 这样的库 $.extend() 和洛达什的 17 号 提供强大的解决方案。每种方法都有其优点，开发者可以根据自己的需求进行选择。了解这些技术有助于编写高效且可维护的代码，确保准确有效地合并对象属性。

自定义合并函数和深度合并等高级技术对于处理嵌套对象至关重要。使用这些方法可以提高数据管理的灵活性和精确度，特别是在复杂的应用程序中。必须考虑性能影响并根据应用程序的要求和数据结构选择最合适的方法。