透過遍歷每個屬性並將它們複製到新物件。使用JSON方法作為來源物件必須是JSON安全的。因此,在來源物件無法轉換為JSON的情況下,需要異常處理以確保其安全。 object.assign
方法僅執行淺度複製。這意味著嵌套屬性仍然透過引用克隆。
註,淺度複製:簡單型別為值傳遞,物件型別是引用的傳遞。深度克隆:所有元素或屬性完全複製,與原始物件完全脫離,也就是說所有對於新物件的修改都不會反映在原始物件中。
複製JavaScript物件有幾種方法,如下:
範例1:一種方法是遍歷來源物件的屬性,並將所有屬性逐一複製到目標對象。它很簡單,但不常使用。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body style = "text-align:center;"> <h1 style = "color:green;" > js克隆对象 </h1> <p id="demo2">sourceObject = {a:1, b:2, c:3};</p> <button onClick="fun()">click </button> <p id="demo"></p> <script> function fun(){ const sourceObject = {a:1, b:2, c:3}; let tO = {}; for (let prop in sourceObject) { if (sourceObject.hasOwnProperty(prop)) { tO[prop] = sourceObject[prop]; } } document.getElementById("demo").innerHTML = "targetObject a = "+tO.a+", b = " + tO.b+", c = "+tO.c; } </script> </body> </html>
輸出:
點擊按鈕前
#點擊按鈕後
範例2:此範例使用JSON。使用此方法,來源物件必須是JSON安全的。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body style = "text-align:center;"> <h1 style = "color:green;" > js克隆对象 </h1> <p id="demo2">sourceObject = {a:1, b:2, c:3};</p> <button onClick="fun()">click </button> <p id="demo"></p> <script> function fun(){ const sourceObject = {a:1, b:2, c:3}; let tO = {}; tO = JSON.parse(JSON.stringify(sourceObject)); document.getElementById("demo").innerHTML = "targetObject a = "+tO.a+", b = " + tO.b+", c = "+tO.c; } </script> </body> </html>
範例3:此方法使用Object.assign
方法。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body style = "text-align:center;"> <h1 style = "color:green;" > js克隆对象 </h1> <p id="demo2">sourceObject = {a:1, b:2, c:3};</p> <button onClick="fun()">click </button> <p id="demo"></p> <script> function fun(){ const sourceObject = {a:1, b:2, c:3}; let tO = {}; tO = Object.assign({}, sourceObject); document.getElementById("demo").innerHTML = "targetObject a = "+tO.a+", b = " + tO.b+", c = "+tO.c; } </script> </body> </html>
相關推薦:《javascript教學》
本篇文章就是關於javascript複製物件的方法介紹,希望對需要的朋友有幫助!
以上是JavaScript如何實作複製物件?的詳細內容。更多資訊請關注PHP中文網其他相關文章!