首页 > web前端 > js教程 > JavaScript 中的浅复制与深复制

JavaScript 中的浅复制与深复制

Mary-Kate Olsen
发布: 2024-11-25 05:32:17
原创
426 人浏览过

Shallow Copy vs. Deep Copy in JavaScript

概述

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

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

1. 浅拷贝

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

特点

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

1.1 使用 Object.assign()

1

2

3

4

5

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 使用扩展运算符 (...)

1

2

3

4

5

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

const shallowCopy = { ...original };

 

shallowCopy.b.c = 90;

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

登录后复制

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

1

2

3

4

5

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 字符串,然后再转换回新对象。
  • 限制:不处理函数、日期、正则表达式或循环引用。

1

2

3

4

5

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()
一种现代的深度复制方法,支持循环引用和日期等特殊对象。

1

2

3

4

5

6

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 使用自定义递归函数
手动处理复杂案例的灵活解决方案。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

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

来源:dev.to
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板