JavaScript 中的浅复制与深复制

概述

在 JavaScript 中，复制对象或数组可以分为浅复制和深复制。在处理复杂的数据结构时，尤其是那些包含嵌套对象或数组的数据结构，理解其中的差异至关重要。

本指南解释了这些概念、它们的特征、实现它们的方法以及何时使用它们。

1. 浅拷贝

定义
浅拷贝创建对象或数组的顶级属性的副本。但是，对于嵌套对象或数组，仅复制引用，而不复制实际数据。

特点

• 仅复制第一级属性或元素。
• 嵌套对象或数组与原始对象/数组共享引用。
• 轻量级且高效，适用于简单结构，但不适合嵌套数据的独立复制。

1.1 使用 Object.assign()

const original = { a: 1, b: { c: 2 } };
const shallowCopy = Object.assign({}, original);

shallowCopy.b.c = 42; 
console.log(original.b.c); // OUTPUT: 42 (The original object also affected due to shared reference)

1.2 使用扩展运算符 (...)

const original = { a: 1, b: { c: 2 } };
const shallowCopy = { ...original };

shallowCopy.b.c = 90;
console.log(original.b.c); // OUTPUT: 90

1.3 让我们看一个数组方法浅复制的示例（切片、连接）

const original = [1, 2, [3, 4]];
const shallowCopy = original.slice();

shallowCopy[2][0] = 10; 
console.log(original[2][0]); // OUTPUT: 10

2. 深拷贝

定义
深层复制创建对象或数组的完全独立的副本。所有级别（包括嵌套结构）都会被递归复制。对复制结构的更改不会影响原始结构，反之亦然。

特点

• 递归复制结构的所有级别。
• 嵌套对象或数组独立于原始对象或数组。
• 计算量比浅拷贝重。

2.1 使用 JSON.stringify() 和 JSON.parse()

• 将对象转换为 JSON 字符串，然后再转换回新对象。
• 限制：不处理函数、日期、正则表达式或循环引用。

const original = { a: 1, b: { c: 2 } };
const deepCopy = JSON.parse(JSON.stringify(original));

deepCopy.b.c = 42;
console.log(original.b.c); // OUTPUT: 2 (original remains unaffected)

2.2 使用 StructuredClone()
一种现代的深度复制方法，支持循环引用和日期等特殊对象。

const original = { a: 1, b: { c: 2 }, date: new Date() };
const deepCopy = structuredClone(original);

deepCopy.b.c = 42;
console.log(original.b.c); // OUTPUT: 2
console.log(original.date === deepCopy.date); // FALSE

2.3 使用自定义递归函数
手动处理复杂案例的灵活解决方案。

function deepCopy(obj) {
  if (obj === null || typeof obj !== "object") return obj; 

  if (Array.isArray(obj)) return obj.map(deepCopy); 

  const copy = {};
  for (const key in obj) {
    if (obj.hasOwnProperty(key)) {
      copy[key] = deepCopy(obj[key]);
    }
  }
  return copy;
}

const original = { a: 1, b: { c: 2 } };
const deepCopyObj = deepCopy(original);

deepCopyObj.b.c = 42;
console.log(original.b.c); // OUTPUT: 2

3. 何时使用每一个？

浅复制

• 适用于没有嵌套结构的平面对象或数组。
• 当性能至关重要时，嵌套对象的共享引用是可以接受的。

深复制

• 对于复杂、深度嵌套的对象/数组。
• 当您需要副本和原件之间真正独立时。

4. 总结

浅复制

• 简单高效。
• 适合扁平结构或可接受共享引用的情况。

深复制

• 稳健并确保完全独立。
• 非常适合深层嵌套或复杂的结构。

这是对 JavaScript 中对象的浅拷贝和深拷贝的深入解释。根据您的用例和性能要求选择适当的方法。

以上是JavaScript 中的浅复制与深复制的详细内容。更多信息请关注PHP中文网其他相关文章！