JavaScript 浅复制与深复制：示例和最佳实践

在 JavaScript 中使用对象和数组时，创建数据结构的副本是一项常见任务。然而，开发人员在浅拷贝和深拷贝之间做出选择时经常面临挑战。误解这些差异可能会导致代码中出现意想不到的副作用。让我们深入探讨这些概念、它们的差异以及何时使用它们。

？ 下载电子书 - JavaScript：从 ES2015 到 ES2023

什么是浅拷贝？

浅拷贝使用原始对象的顶级属性的副本创建一个新对象。对于基元属性（例如数字、字符串、布尔值），将复制值本身。但是，对于对象属性（如数组或嵌套对象），仅复制引用，而不复制实际数据。

这意味着虽然新对象有自己的顶级属性副本，但嵌套对象或数组在原始对象和副本之间保持共享。

浅拷贝示例

const original = {
  name: "Alice",
  details: {
    age: 25,
    city: "Wonderland"
  }
};

// Shallow copy
const shallowCopy = { ...original };

// Modify the nested object in the shallow copy
shallowCopy.details.city = "Looking Glass";

// Original object is also affected
console.log(original.details.city); // Output: "Looking Glass"

如何创建浅拷贝

1. 使用扩展运算符 (...)：

   const shallowCopy = { ...originalObject };

1. 使用Object.assign()：

   const shallowCopy = Object.assign({}, originalObject);

虽然这些方法快速且简单，但它们不适合深度嵌套的对象。

什么是深拷贝？

深层复制会复制原始对象的每个属性和子属性。这确保了副本完全独立于原始对象，并且对副本的更改不会影响原始对象。

在处理嵌套对象或数组等复杂数据结构时，深度复制至关重要，特别是在数据完整性至关重要的情况下。

深层复制示例

const original = {
  name: "Alice",
  details: {
    age: 25,
    city: "Wonderland"
  }
};

// Shallow copy
const shallowCopy = { ...original };

// Modify the nested object in the shallow copy
shallowCopy.details.city = "Looking Glass";

// Original object is also affected
console.log(original.details.city); // Output: "Looking Glass"

如何创建深层副本

1. 使用 JSON.stringify() 和 JSON.parse()：
   • 将对象转换为 JSON 字符串，然后将其解析回新对象。
   • 限制：
     • 无法处理循环引用。
     • 忽略函数、未定义或符号等属性。

   const shallowCopy = { ...originalObject };

1. 使用库：
   像 Lodash 这样的库提供了强大的深度克隆方法。

   const shallowCopy = Object.assign({}, originalObject);

1. 自定义递归函数：
   为了完全控制，您可以编写递归函数来克隆嵌套对象。

浅复制和深复制的比较

何时使用浅复制

• 平面对象：处理没有嵌套属性的简单对象时。
• 性能：当速度至关重要且不需要处理深层嵌套数据时。
• 临时更改：当您打算修改顶级属性但共享嵌套数据时。

示例用例

复制用户的设置对象以进行快速调整：

const original = {
  name: "Alice",
  details: {
    age: 25,
    city: "Wonderland"
  }
};

// Shallow copy
const shallowCopy = { ...original };

// Modify the nested object in the shallow copy
shallowCopy.details.city = "Looking Glass";

// Original object is also affected
console.log(original.details.city); // Output: "Looking Glass"

何时使用深度复制

• 复杂结构：适用于具有多层嵌套的对象。
• 避免副作用：当您需要确保副本中的更改不会影响原始版本时。
• 状态管理：在 React 或 Redux 等框架中，不变性至关重要。

示例用例

复制游戏或应用程序的状态：

   const shallowCopy = { ...originalObject };

常见错误和陷阱

1. 假设浅拷贝总是足够的:

   • 开发人员经常错误地对嵌套对象使用浅复制方法，导致原始数据发生意外更改。

2. 过度使用 JSON 方法:

   • 虽然 JSON.stringify/JSON.parse 很简单，但它并不适用于所有对象（例如，包含方法或循环引用的对象）。

3. 忽视性能：

   • 深度复制方法可能会比较慢，尤其是对于大型对象，因此请谨慎使用它们。

结论

理解浅复制和深复制之间的区别对于编写无错误的 JavaScript 代码至关重要。浅拷贝对于平面结构来说是有效的，而深拷贝对于复杂的嵌套对象来说是必不可少的。根据您的数据结构和应用程序需求选择合适的方法，并通过了解每种方法的局限性来避免潜在的陷阱。

？ 下载电子书 - JavaScript：从 ES2015 到 ES2023

以上是JavaScript 浅复制与深复制：示例和最佳实践的详细内容。更多信息请关注PHP中文网其他相关文章！