JavaScript 中的浅复制与深复制-js教程-PHP中文网

JavaScript 中的浅复制与深复制

Mary-Kate Olsen

发布： 2024-11-25 05:32:17

原创

449 人浏览过

Shallow Copy vs. Deep Copy in 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

登录后复制