Was ist der Unterschied zwischen Deep Copy und Shallow Copy in JS?

Was ist der Unterschied zwischen Deep Copy und Shallow Copy in JS? Es werden spezielle Codebeispiele benötigt

In JavaScript gibt es zwei Methoden zum Kopieren von Objekten: Shallow Copy und Deep Copy. Eine flache Kopie kopiert nur die Referenzadresse eines Objekts, während eine tiefe Kopie eine völlig unabhängige Kopie erstellt.

Beim flachen Kopieren wird die Referenzadresse des Originalobjekts in das neue Objekt kopiert. Sie verweisen auf denselben Speicherplatz. Wenn die Eigenschaften eines der Objekte geändert werden, werden auch die entsprechenden Eigenschaften des anderen Objekts geändert. Dies liegt daran, dass sie dieselbe Speicheradresse verwenden.

Tiefenkopie bedeutet, ein brandneues Objekt zu erstellen und alle Attribute im Originalobjekt nacheinander in das neue Objekt zu kopieren. Das neue Objekt und das Originalobjekt haben keinen Einfluss aufeinander. Selbst wenn Sie die Eigenschaften eines Objekts ändern, hat dies keine Auswirkungen auf die Eigenschaften des anderen Objekts.

Im Folgenden werde ich den Unterschied zwischen flachem Kopieren und tiefem Kopieren anhand spezifischer Codebeispiele veranschaulichen.

Schauen wir uns zunächst ein Beispiel für eine flache Kopie an:

let obj1 = {name: "Alice", age: 20};
let obj2 = obj1;

obj1.age = 21; 

console.log(obj1); // {name: "Alice", age: 21}
console.log(obj2); // {name: "Alice", age: 21}

Im obigen Code implementieren wir eine flache Kopie, indem wir obj1 obj2 zuweisen. Wenn das Attribut age von obj1 geändert wird, wird auch das Attribut age von obj2 geändert, da sie auf das verweisen gleiche Speicheradresse. obj1赋值给obj2实现了一个浅拷贝。当修改obj1的age属性时，obj2的age属性也被修改了，这是因为它们指向同一块内存地址。

接下来，我们来看一个深拷贝的示例：

function deepClone(obj) {
    if (obj === null || typeof obj !== 'object') {
        return obj;
    }
    
    let clone = Array.isArray(obj) ? [] : {};
    
    for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
            clone[key] = deepClone(obj[key]);
        }
    }
    
    return clone;
}

let obj1 = {name: "Alice", age: 20};
let obj2 = deepClone(obj1);

obj1.age = 21;

console.log(obj1); // {name: "Alice", age: 21}
console.log(obj2); // {name: "Alice", age: 20}

在上述代码中，我们定义了一个deepClone函数，用于实现深拷贝。该函数首先判断传入的参数是否为null或不是对象类型，如果是则直接返回，否则创建一个与传入对象类型相同的空对象clone。然后通过遍历原对象的属性，递归调用deepClone函数对每个属性进行深拷贝，并赋值给相应的clone属性。最后返回新对象clone。

通过使用deepClone函数，我们实现了对obj1的深拷贝。即使修改了obj1的age属性，但obj2的age

Als nächstes schauen wir uns ein Beispiel für Deep Copy an:

rrreee

Im obigen Code definieren wir eine deepClone-Funktion, um Deep Copy zu implementieren. Diese Funktion bestimmt zunächst, ob der übergebene Parameter null ist oder nicht. Wenn ja, wird direkt zurückgegeben, andernfalls wird ein leeres Objekt clone desselben Typs wie das übergebene Objekt erstellt. Anschließend werden die Eigenschaften des ursprünglichen Objekts durchlaufen und die Funktion deepClone rekursiv aufgerufen, um jede Eigenschaft tief zu kopieren und sie der entsprechenden Eigenschaft clone zuzuweisen. Abschließend wird das neue Objekt clone zurückgegeben. 🎜🎜Durch die Verwendung der Funktion deepClone implementieren wir eine tiefe Kopie von obj1. Selbst wenn das Attribut age von obj1 geändert wird, bleibt das Attribut age von obj2 unverändert, da es sich vollständig um zwei handelt unabhängige Objekte. 🎜🎜Zusammenfassend lässt sich sagen, dass die flache Kopie nur die Referenzadresse des Objekts kopiert, während die tiefe Kopie eine völlig unabhängige Kopie erstellt. Durch tiefes Kopieren kann sichergestellt werden, dass das Originalobjekt beim Ändern des Kopierobjekts nicht beeinträchtigt wird, und eignet sich zum Kopieren von Objekten mit verschachtelten Strukturen. Es ist zu beachten, dass tiefes Kopieren in der tatsächlichen Entwicklung zu einem großen Leistungsaufwand führen kann. Daher muss eine geeignete Kopiermethode basierend auf der tatsächlichen Situation ausgewählt werden. 🎜

Das obige ist der detaillierte Inhalt vonWas ist der Unterschied zwischen Deep Copy und Shallow Copy in JS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!