Heim > Artikel > Web-Frontend > Wie klone ich Objekte in JavaScript?
Wie klone ich Objekte in JavaScript?
- 藏色散人Original
- 2019-04-02 09:54:102469Durchsuche
Indem Sie jede Eigenschaft durchlaufen und sie in ein neues Objekt klonen. Die Verwendung von JSON-Methoden als Quellobjekte muss JSON-sicher sein. Daher ist eine Ausnahmebehandlung erforderlich, um die Sicherheit in Fällen zu gewährleisten, in denen das Quellobjekt nicht in JSON konvertiert werden kann. Die Methode object.assign führt nur flaches Klonen durch. Dies bedeutet, dass verschachtelte Eigenschaften weiterhin per Referenz geklont werden.
Hinweis: Flaches Klonen: Einfache Typen werden als Wert und Objekttypen als Referenz übergeben. Deep Cloning: Alle Elemente oder Attribute werden vollständig kopiert und vollständig vom Originalobjekt getrennt, was bedeutet, dass alle Änderungen am neuen Objekt nicht im Originalobjekt widergespiegelt werden.
Es gibt mehrere Möglichkeiten, ein JavaScript-Objekt zu klonen:
Beispiel 1: Eine Methode besteht darin, die Eigenschaften des Quellobjekts zu durchlaufen und alle Eigenschaften zu kopieren nacheinander zum Zielobjekt. Es ist einfach, wird aber nicht oft verwendet.
<!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>Ausgabe:
Vor dem Klicken auf die Schaltfläche
Nach dem Klicken auf die Schaltfläche
Beispiel 2: Dieses Beispiel verwendet JSON. Bei dieser Methode muss das Quellobjekt JSON-sicher sein.
<!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>Beispiel 3: Diese Methode verwendet die Object.assign-Methode.
<!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>Verwandte Empfehlungen: „Javascript-Tutorial“
In diesem Artikel geht es um die Methode zum Klonen von Objekten in Javascript. Ich hoffe, dass er Freunden, die es benötigen, hilfreich sein wird!
Das obige ist der detaillierte Inhalt vonWie klone ich Objekte in JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!