Home > Article > Web Front-end > How to clone objects in JavaScript?
By looping through each property and cloning them to a new object. Using JSON methods as source objects must be JSON safe. Therefore, exception handling is required to keep it safe in cases where the source object cannot be converted to JSON. The object.assign method only performs shallow cloning. This means nested properties are still cloned by reference.
Note, shallow cloning: simple types are passed by value, and object types are passed by reference. Deep cloning: All elements or attributes are completely copied and completely separated from the original object, which means that all modifications to the new object will not be reflected in the original object.
There are several ways to clone a JavaScript object, as follows:
Example 1: One method is to iterate through the properties of the source object and copy all properties to the target object one by one . It's simple, but not used often.
<!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>Output:
Before clicking the button
Example 2: This example uses JSON. Using this method, the source object must be JSON safe.
<!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>
Example 3: This method uses the Object.assign method.
<!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>Related recommendations: "javascript tutorial"
This article is about the method of cloning objects in javascript. I hope it will be helpful to friends in need!The above is the detailed content of How to clone objects in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!