如何在JavaScript中深度复制一个对象？

克隆通常指将值从一个地方复制到另一个地方。我们使用JavaScript将一个值复制到另一个值，这被称为克隆。在JavaScript中，实际上有两种不同的复制方式。能够区分深克隆和浅克隆是每个程序员都应该理解的概念，无论其经验水平如何。

由于本文重点介绍深克隆，我们将详细研究深克隆。任何数据类型，包括复合数据类型（如数组和JavaScript对象）以及原始数据类型（如字符串和数字），都可能涉及克隆的概念。因此，我们必须理解其基本原理。

对于原始数据类型，JavaScript中的复制操作相当简单。在处理对象和引用时，必须仔细选择浅复制和深复制策略。

深克隆 − 为了防止在克隆数组期间数据丢失，JavaScript使用一种称为深克隆的方法来复制每一个元素。

示例1

在这个例子中，让我们看看当我们修改一个对象的值时，数据是如何损坏的，因为它也会影响所有其他对象。因此，使用深克隆来解决这个问题。

<!DOCTYPE html>
<html>
<title>How would you deep copy an Object in Javascript - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="text-align:center">
   <script>
      let engTeacher ={
         name : "John Smith",
         Institute : "Tutorialspoint"
      }
      let mathTeacher = engTeacher ;
      engTeacher.name = "Steve Smith"
      document.write("English Teacher name is ",engTeacher.name +"<br>")
      document.write("Maths Teacher name is ",mathTeacher.name);
   </script>
</body>
</html>

示例2

在这个例子中，让我们了解如何使用扩展运算符进行对象的深复制。

<!DOCTYPE html>
<html>
<title>How would you deep copy an Object in Javascript - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="text-align:center">
   <script>
      let engTeacher ={
         name : "John Smith",
         Institute : "Tutorialspoint"
      }
      let mathTeacher = { ...engTeacher } ;
      engTeacher.name = "Steve Smith"
      document.write("English Teacher name is ",engTeacher.name +"<br>")
      document.write("Maths Teacher name is ",mathTeacher.name);
   </script>
</body>
</html>

示例3

在这个例子中，让我们了解如何使用Object.assign()进行深复制。

<!DOCTYPE html>
<html>
<title>How would you deep copy an Object in Javascript - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="text-align:center">
   <script>
      let engTeacher ={
         name : "John Doe",
         Institute : "Tutorialspoint"
      }
      let mathTeacher = Object.assign( {} ,engTeacher) ;
      engTeacher.name = "Steve Smith"
      document.write("English Teacher name is ",engTeacher.name +"<br>")
      document.write("Maths Teacher name is ",mathTeacher.name);
   </script>
</body>
</html>

示例4

在这个例子中，让我们了解如何使用Json.parse和Json.stringify进行深复制。

<!DOCTYPE html>
<html>
<title>How would you deep copy an Object in Javascript - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="text-align:center">
   <script>
      let engTeacher ={
         name : "John Doe",
         Institute : "Tutorialspoint"
      }
      let mathTeacher = JSON.parse(JSON.stringify(engTeacher))
      engTeacher.name = "Steve Smith"
      document.write("English Teacher name is ",engTeacher.name +"<br>")
      document.write("Maths Teacher name is ",mathTeacher.name);
   </script>
</body>
</html>

浅复制

在浅复制的情况下，当原始对象被复制到克隆对象中时，克隆对象会接收到原始对象内存地址的副本。这意味着两者指向相同的内存地址。

在内部，原始对象和复制对象都引用相同的引用项。它们都指向相同的内存地址，因此，如果我们对克隆对象进行了修改，这些修改也会反映在原始对象中，因为它们具有相同的内存地址。

示例5

在这个例子中，对象“engTeacher”已被复制到对象“mathTeacher”。由于它们在内部都指向相同的内存地址，如果更改了对象mathTeacher的id，对象“engTeacher”的id也会被修改。mathTeacher.id = 444也会更改对象“engTeacher”的id。

我们将其称为浅复制。浅复制表示我们对克隆对象所做的任何更改也会反映在原始对象中。

<!DOCTYPE html>
<html>
<title>How would you deep copy an Object in Javascript - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="text-align:center">
   <script>
      let engTEacher = {
         id: 111,
         Institute: "Tutorialspoint"
      };
      let mathTeacher = engTEacher;
      mathTeacher.id = 444;
      document.write(engTEacher.id +"<br>");
      document.write(mathTeacher.id);
   </script>
</body>
</html>

更新于：2022年8月23日

浏览量：189

开启您的职业生涯

通过完成课程获得认证

开始学习
广告