如何在 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>
