資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究JavaScript 中複製物件的不同技巧
在 JavaScript 中，物件是鍵值對的集合。物件的屬性是鍵，並用字串表示。鍵的值是給定物件屬性的值。
物件複製的型別/技巧
在任何語言中，複製物件有兩種型別：深複製和淺複製。
淺複製
在這種技術中，物件儘可能少地被複制。例如，如果您使用此技術複製集合，則集合的結構將被複制到目標，而不是元素。
示例
以下是淺複製的示例：
let innerObj = { a: 'b', c: 'd' } let obj = { x: "test", y: innerObj } // Create a shallow copy. let copyObj = Object.assign({}, obj); // Both copyObj and obj's prop y now refers to the same innerObj. Any changes to this will be reflected. innerObj.a = "test" console.log(obj) console.log(copyObj)
請注意，淺複製不會遞迴地建立克隆。它只在頂層執行。
深複製
在深複製中，物件被完全複製。集合的深複製是兩個集合，其中包含原始集合中所有克隆的元素。
示例
以下是深複製的示例：
let innerObj = { a: 'b', c: 'd' } let obj = { x: "test", y: innerObj } // Create a deep copy. let copyObj = JSON.parse(JSON.stringify(obj)) // Both copyObj and obj's prop y now refers to the same innerObj. Any changes to this will be reflected. innerObj.a = "test" console.log(obj) console.log(copyObj)
其他複製物件的方法
在 JavaScript 中，物件可以透過多種方式複製到另一個物件，其中一些將在下面討論。
使用擴充套件運算子（…）
JavaScript 中的擴充套件運算子用於將原始給定物件的值複製到新物件。此運算子由三個點（…）表示。
示例
此示例演示瞭如何在 JavaScript 中使用擴充套件運算子複製物件：
var employee = { emp_name: "Abdul Rawoof", company: "Tutorials Point", salary: 18000, job: "Software Engineer-Intern" } console.log("The original object employee is:", employee) var cpyEmployee = {...employee} console.log("The copied object cpyEmployee is:",cpyEmployee);
如果物件具有巢狀物件，則在使用擴充套件運算子時應編寫一些額外的程式碼。
使用 assign() 函式
此函式用於將原始物件複製到新物件。它與擴充套件運算子的區別在於，當存在巢狀物件時，如果使用 assign() 複製物件，則巢狀物件不會更改，而物件的其它變數可以更改。
assign() 函式有兩個引數。第一個引數是花括號 {}，用於確保新物件不會更改原始物件。第二個引數是要複製到新物件中的原始物件的名稱。
語法
以下是 assign() 函式的語法。
Object.assign({},originalObjectName)
示例
此示例演示瞭如何使用 assign() 將物件複製到新物件：
var employee = { emp_name: "Abdul Rawoof", company: "Tutorials Point", salary: 18000, job: "Software Engineer-Intern" } console.log("The original object employee is:", employee) var cpyEmployee = Object.assign({},employee) console.log("The copied object cpyEmployee is:",cpyEmployee); cpyEmployee.emp_name="Jason" cpyEmployee.job="Content writer-Intern" console.log("The copied object with some different name and role is:",cpyEmployee)
在上面的示例中，原始物件被複制到新物件，然後物件的屬性被更改。因此，由此可以得出結論，我們可以在從原始物件複製物件後更新物件屬性的值。
當這些物件使用 assign() 函式複製時，原始值和新複製的值將具有相同的引用。因此，一個值的變化會相應地改變另一個值。
使用 JSON
這用於以快速簡便的方式將原始物件複製到新物件。當給定的輸入是數字、字串和物件文字時，可以使用此函式進行復制。
這樣，必須使用兩種方法來複制物件，它們是 parse() 和 stringify() 函式。Parse() 函式將字串解析為 JavaScript 物件。透過這樣做，這兩個物件將擁有各自的記憶體。
語法
下面給出了 json() 方法的語法。
JSON.parse(JSON.stringify(originalObjectName))
示例
此示例演示瞭如何使用 parse() 和 stringify() 複製物件：
let employee = { emp_name: 'Abdul Rawoof', company: 'Tutorials Point', emp_id: 'TP10000', role: 'Software Engineer-Intern', salary: 18000 } let cpyEmployee = JSON.parse(JSON.stringify(employee)) console.log("This is the original object:",employee) console.log("This is the new copied object:",cpyEmployee) cpyEmployee.emp_name = 'B Jason' cpyEmployee.emp_id = 'TP9999' cpyEmployee.role = 'Content Writing-Intern' console.log("The copied object with updations is:",cpyEmployee)
276 次瀏覽
