資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何在 JavaScript 中克隆物件？
一個物件指的是具有屬性和型別的實體。例如，將一個人視為一個物件，它具有身高、體重、年齡和薪水等屬性。同樣，JavaScript 也具有物件及其定義的屬性。
JavaScript 中的物件是一種複雜的資料型別，它可以儲存各種資料型別。讓我們考慮下面的示例
const employee = {
name : ‘Dhoni’,
age : 41,
height : 5.8,
}
使用 JavaScript 克隆物件
一般來說，“克隆”定義為建立具有相同屬性的原始物件的副本。這些 JavaScript 物件藉助引用儲存在記憶體中。在記憶體中，兩個變數可以指向同一個物件。如果我們嘗試修改一個物件變數，則會影響其他變數。
const copyemp = employee; console.log(copyemp);
在上述情況下，我們不能簡單地這樣克隆物件，原因是employee是一個物件。
copyemp.name = ‘Kohli’; copyemp.age = 34; Console.log(copyemp.name); // Kohli Console.log(employee.name); //Kohli
在上述情況下，copyemp 的變數與employee 物件的值相同。由於此處未設定目標，因此對copyemp 物件值所做的更改也已應用於employee 物件。
我們看到了兩個物件的變化，因為 copyemp 和 employee 指向同一個物件。
物件的克隆可以透過以下幾種方式完成：
- 使用 object.assign()。
- 使用展開語法。
- 遍歷每個屬性並將它們複製到新物件。
使用 Object.assign()
JavaScript 的“Object.assign()”方法將建立一個包含原始物件所有屬性的副本物件並返回它。要實現此方法，需要遵循以下步驟。
如果我們使用 Object.assign() 來克隆物件。
宣告一個物件，將其視為父物件
為父物件分配屬性
建立克隆物件並使用Object.assign() 為其賦值。
示例
在這個示例中，我們使用了Object.assign() 方法。結合stringify()，我們可以獲取 JSON 物件的內容：
<!DOCTYPE html> <html> <head> <script> const employee = { name: 'Dhoni', age: 41, role: 'Manager', salary: 80000, } const copyemp = Object.assign({}, employee); document.write(JSON.stringify(copyemp), "<br>"); copyemp.name = 'Kohli'; copyemp.age = 34; document.write(JSON.stringify(copyemp.name), "<br>"); document.write(JSON.stringify(copyemp.age), "<br>"); document.write(JSON.stringify(employee.name), "<br>"); document.write(JSON.stringify(employee.age)); </script> </head> </html>
輸出
上述指令碼的輸出將是：
{ name: 'Dhoni', age: 41, role: 'Manager', salary: 80000 }
“Kohli”
34
“Dhoni”
41
使用展開語法 (…)
“展開”運算子有效地將物件或陣列的所有屬性複製到新的物件或陣列中。要實現此方法，我們需要遵循以下步驟：
如果我們使用 (…) 語法來克隆物件。
宣告一個物件，將其視為父物件
為父物件分配屬性
建立克隆物件並使用{…父物件} 為其賦值。
示例
在這個示例中，我們使用了“展開語法” (…)。此展開語法也用於從父物件複製屬性。
<!DOCTYPE html> <html> <head> <script> const employee = { name: 'Dhoni', age: 41, role: 'Manager', salary: 80000, } // cloning the object const copyemp = { ... employee} document.write(JSON.stringify(copyemp), "<br>"); // modifying the value of copyemp copyemp.name = 'Peter'; copyemp.age = 34; document.write(JSON.stringify(copyemp.name), "<br>"); document.write(JSON.stringify(copyemp.age), "<br>"); document.write(JSON.stringify(employee.name), "<br>"); document.write(JSON.stringify(employee.age)); </script> </head> </html>
輸出
上述指令碼的輸出將是：
{"name":"Dhoni","age":41,"role":"Manager","salary":80000}
"Peter"
34
"Dhoni"
41
使用 JSON.parse()
JavaScript 方法 JSON.parse() 將 JSON 字串轉換為物件。如果傳遞給 JSON.parse() 的字串包含任何尾隨逗號，則該字串將失敗，因為它們在 JSON 中是無效的。要實現此方法，需要遵循以下步驟。
如果我們使用 JSON.parse() 語法來克隆物件。
宣告一個物件，將其視為父物件
為父物件分配屬性
建立克隆物件並使用 JSON.parse() 為其賦值。
在JSON.parse() 中，如果物件文字包含函式和符號屬性，則它不會執行物件的克隆工作。這隻在物件文字包含數字和字串時才有效。
示例
在這個示例中，我們使用的是JSON.parse() 方法，它將複製現有物件的屬性。
<!DOCTYPE html> <html> <head> <script> const employee = { name: 'Dhoni', age: 41, role: 'Manager', salary: 80000, } // cloning the object const copyemp = JSON.parse(JSON.stringify(employee)); document.write(JSON.stringify(copyemp), "<br>"); // modifying the value of copyemp copyemp.name = 'Peter'; copyemp.age = 34; document.write(JSON.stringify(copyemp.name), "<br>"); document.write(JSON.stringify(copyemp.age), "<br>"); document.write(JSON.stringify(employee.name), "<br>"); </script> </head> </html>
輸出
上述指令碼的輸出將是：
{"name":"Dhoni","age":41,"role":"Manager","salary":80000}
"Peter"
34
"Dhoni"
5K+ 次瀏覽
