透過遍歷每個屬性並將它們複製到新物件。使用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中文網其他相關文章！
