Comment les objets de clone profond en javascript
Il existe deux types de clones d'objets \ Arrays, l'un d'eux étant clones peu profonds Et l'autre étant clones profonds.
Créer clones profonds Dans Vanilla JavaScript, nous devons utiliser un combinaison de JSON Parse () fonction et JSON Stringify () fonction. Dans cet article, nous allons discuter des clones peu profonds et des clones profonds, comment faire des clones en javascript et comment faire des clones profonds.
Clones peu profonds vs clones profonds
Chaque fois qu'un tableau \ objet contenant un autre tableau \ objet à l'intérieur, il est copié d'une variable à une autre variable, les éléments de cet objet Array \ ne sont pas copiés; Un pointeur de référence est plutôt copié dans la nouvelle variable qui pointe à l'ancienne variable. Ces copies sont appelées copies peu profondes ou clones peu profonds
Tandis que, lorsque les éléments d'un tableau \ objet sont copiés directement (pas leur pointeur de référence) vers une nouvelle variable avec le tableau imbriqué \ objet alors cette copie est connue sous le nom clones profonds ou copies profondes.
Explication avec le code JavaScript
Ce sont des concepts JavaScript avancés, c'est pourquoi nous utiliserons des exemples de codage pour démontrer la différence entre le clonage peu profond et le clonage profond. Pour commencer, créez un tableau contenant divers éléments en utilisant la ligne de code suivante:
var originalArray = [true, false, 2, "google", indéfini];
Maintenant, il y a deux façons de cloner ce tableau:
- En utilisant la méthode Slice
- En utilisant l'opérateur de propagation
Pour créer un clone à l'aide de la méthode Slice, utilisez la ligne suivante:
var clone1 = originalArray.tranche (0);
Et pour créer un clone à l'aide de l'opérateur d'écart, utilisez la ligne suivante:
var clone2 = [… originalArray];
Pour tester si nos éléments ont été copiés ou non, nous pouvons utiliser la fonction de journal de console pour imprimer le tableau d'origine ainsi que nos deux clones:
console.Log (originalArray);
console.log (clone1);
console.log (clone2);
Nous obtenons la sortie suivante sur notre console:
Pour prouver que ce sont des clones réels, et non des références du tableau d'origine passées à l'intérieur de ces variables, nous allons apporter des modifications dans les clones et vérifier si ces modifications affectent le tableau d'origine ou non.
clone1 [0] = 1;
clone2 [1] = "Bonjour";
Imprimez à nouveau tous les tableaux sur la console pour examiner les modifications avec les lignes suivantes:
console.Log (originalArray);
console.log (clone1);
console.log (clone2);
Vous observerez la sortie suivante:
Comme vous pouvez le voir, les modifications des tableaux de clones n'ont pas affecté le tableau d'origine, ce qui signifie que d'autres tableaux n'ont pas copier la référence du tableau d'origine.
Vérification des clones peu profonds
Nous avons vu comment cloner les tableaux simples, mais que se passe-t-il si nous avons un tableau ou un objet qui contient un autre tableau à l'intérieur, considérez le tableau suivant:
var originalArray = [["Google"]];
Comme vous pouvez le voir, nous avons un tableau à l'intérieur d'un autre tableau, essayons de faire un clone de ce tableau en utilisant la méthode Slice que nous avons déjà utilisée dans l'exemple ci-dessus:
var clone = OriginalArray.tranche (0);
Nous avons fait un clone de ce tableau dans la variable "cloner", Imprimez ces deux tableaux à l'aide de la fonction de journal de console:
console.log (originalArray [0]);
console.log (clone [0]);
Vous devriez voir le résultat suivant sur la console de votre écran:
Essayons d'apporter quelques modifications dans le tableau cloné avec la ligne de code suivante:
clone [0].push ("cartes");
Cela ne devrait apporter des modifications que dans le "cloner" tableau et non dans le tableau d'origine, mais c'est là que les choses deviennent intéressantes. Imprimez les deux tableaux à l'aide de la fonction de journal de console:
console.log (originalArray [0]);
console.log (clone [0]);
Vous devriez voir le résultat suivant sur votre console:
Vous pouvez facilement observer à partir de l'image ci-dessus que les changements dans le tableau cloné ont provoqué des changements dans le tableau d'origine. Cela signifie que si notre objet \ array contient objet \ arrays, le clonage passe une référence aux objets imbriqués créant ainsi un clone peu profond.
Clonage profond dans la vanille javascript
Ouf… c'était beaucoup de choses juste pour expliquer un concept de clones peu profonds Mais là encore, ce sont des concepts de niveau avancé. Pour créer des clones profonds en utilisant JavaScript, plusieurs méthodes sont disponibles, mais la plupart d'entre elles nécessitent des nodejs. Pour faire des clones profonds dans la vanille javascrip. Créez un tableau avec un tableau imbriqué à l'intérieur avec la ligne de code suivante:
var originalArray = [["Google"]];
Utilisez une combinaison de JSON Parse et JSON Stringify () avec la ligne suivante:
var deepclone = json.Parse (JSON.Stringify (originalArray));
Maintenant, que nous avons fait notre clone, nous devons le vérifier en l'imprimant sur la console en utilisant la fonction de journal de la console:
console.log (clone [0]);
Vous obtiendrez le résultat suivant sur la console:
Maintenant, essayons de changer les éléments du tableau cloné en utilisant la ligne suivante:
Deepclone [0].push ("cartes");
La dernière chose qui reste est d'observer les deux tableaux sur la console pour déterminer si la modification du tableau cloné a changé ou non le tableau d'origine:
console.log (originalArray [0]);
console.log (DeepClone [0]);
Vous obtiendrez le résultat suivant sur votre console:
Dans l'image ci-dessus, vous pouvez observer ces changements dans le cloné le tableau n'a provoqué aucun changement dans le tableau d'origine. Cela signifie que les tableaux imbriqués ont également été copiés plutôt que leur référence transmise à la nouvelle variable, et c'est pourquoi de tels clones sont appelés le clones profonds.
Conclusion
Les clones profonds de Vanilla Javascript sont fabriqués en utilisant une combinaison de la fonction JSON Parse () et JSON Stringify () lors de l'analyse d'un objet \ Array dans une nouvelle variable. Tout dans JavaScript est un objet, et lorsque nous essayons de copier des objets imbriqués, leur référence au pointeur est copiée dans la nouvelle variable plutôt que de copier les éléments des tableaux imbriqués \. Lorsque la référence d'un objet est transmise à un nouveau changement d'objet dans le nouvel objet provoque également des changements dans l'ancien objet qui n'est pas très efficace. C'est la raison pour laquelle JavaScript a ajouté un moyen de créer des clones profonds.