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. 自定义递归函数：
   为了完全控制，您可以编写递归函数来克隆嵌套对象。

---

浅复制和深复制的比较

功能 浅复制 深复制 标题>

范围

Feature	Shallow Copy	Deep Copy
Scope	Copies only top-level properties.	Copies all levels, including nested data.
References	Nested references are shared.	Nested references are independent.
Performance	Faster and lightweight.	Slower due to recursive operations.
Use Cases	Flat or minimally nested objects.	Deeply nested objects or immutable structures.

仅复制顶级属性。 复制所有级别，包括嵌套数据。 参考文献 嵌套引用是共享的。 嵌套引用是独立的。 性能 更快、更轻量。 由于递归操作而较慢。 用例 平面或最小嵌套对象。 深度嵌套的对象或不可变的结构。 表>

---

何时使用浅复制

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

示例用例

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

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中文网其他相关文章！