資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何在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>
瀏覽量：189
