Copie peu profonde vs copie profonde en javascript

La tâche de copie dans JavaScript est assez simple pour les types de données primitives. Cependant, vous devez choisir soigneusement entre le Copie peu profonde et profonde Techniques tout en manipulant des objets et des références.

Dans copie superficielle uniquement des adresses de référence sont copiés; Par conséquent, modifier un objet appliquera également les mêmes modifications à un autre objet. Pour éviter une telle situation, vous pouvez utiliser la procédure de copie profonde.

Ce message expliquera le concept de copie superficielle et de copie profonde en utilisant des exemples appropriés. Alors, commençons!

Copie superficielle en javascript

Un mécanisme dans lequel un objet est copié par bit dans un objet spécifié est connu sous le nom de copie superficielle.

• La méthode de copie superficielle colle une copie exacte d'un objet particulier dans un autre objet.
• Il est principalement utilisé pour copier des éléments de tableau unique, où il copie uniquement les éléments présents au premier niveau.
• Il copie uniquement les adresses de référence à un autre objet.

Méthodes pour copier superficiel un objet en javascript

Pour copier superficiel un objet JavaScript dans un autre objet, vous pouvez utiliser les méthodes suivantes:

• Objet.Assign () Méthode
• Spread Operator […]
• Opérateur d'affectation «=»

Note: Si vous utilisez le «Spread Operator» ou «Objet.attribuer()" Méthode, alors après la copie peu profonde, l'objet copié est déconnecté de l'objet d'origine, alors que, dans le cas de l'utilisation du «mission»L'opérateur, modification de l'objet copié, modifiera également l'objet d'origine.

Nous discuterons brièvement de chacune des méthodes mentionnées pour copier superficiel un objet en javascript.

Copie superficielle un objet en JavaScript à l'aide de l'opérateur de diffusion

Le "diffuser»L'opérateur peut être utilisé pour la copie peu profonde d'un objet. Il est représenté comme trois points consécutifs «…».

Syntaxe de l'utilisation de l'opérateur de diffusion pour copier superficiel un objet en javascript

Soit object2 = … objet1;

Ici, l'opérateur de diffusion copiera la paire de valeurs clés de «Object1» à «Object2».

Exemple: copie superficielle un objet en javascript à l'aide de l'opérateur de diffusion

Tout d'abord, nous créerons un objet nommé «employé«Avoir deux paires de valeurs clés:

const Employee =
Nom: 'Alex',
Désignation: «gestionnaire»
;

Ensuite, nous copierons superficiel le «employé"Objectif au nouvellement créé"EMP1”Objet utilisant l'opérateur de propagation:

Soit emp1 = … employé;

De plus, vous pouvez vérifier si la modification des valeurs de la propriété du «EMP1"L'objet peut également affecter le"employé”Propriété du nom de l'objet:

EMP1.name = 'max';

console.Log («Nom EMP1:» + EMP1.nom);

console.Journal («Nom de l'employé:» + Employé.nom); [/ cc]

Nous avons réussi à copier le «employé"Object au"EMP1«Object et modification du«EMP1.nom«La valeur de la propriété n'a appliqué aucune modification au«employé.nom" propriété:

Copie peu profonde en javascript à l'aide de l'objet.Assign () Méthode

Le javascript "Objet.attribuer()«La méthode est utilisée pour copier superficiel le«valeur clé”Paire d'un objet déjà créé dans un autre objet. L'objet d'origine ne sera pas affecté lors de l'utilisation de l'objet.Assign () Méthode.

Syntaxe de l'utilisation d'objet.Assignez () Méthode à une copie superficielle en javascript

Objet.attribuer (cible, source)

Ici, "cible»Représente l'objet JavaScript dont la paire de valeurs clés sera copiée, et«source»Indique l'objet où la paire de valeurs clés copiée sera placée.

Exemple: copie superficielle en javascript à l'aide de l'objet.Assign () Méthode

Nous invoquerons le «Objet.attribuer()”Méthode pour copier peu profond le «Employé» s'oppose à «EMP1»:

Soit emp1 = ; objet.Assign (EMP1, employé);

Le "Objet.attribuer()«La méthode renverra l'objet cible, qui est«EMP1" dans notre cas:

Ensuite, nous mettrons à jour le «empiler.nom" valeur de la propriété:

EMP1.name = 'Stepheny'; console.Log ("Nom EMP1:" + EMP1.nom);
console.Journal ("Employé.Nom: "+ Employé.nom);

Comme vous pouvez le voir dans la sortie ci-dessous, modifiant le «empiler.nom«La valeur de la propriété n'a pas modifié le«employé" objet.

Copie peu profonde en JavaScript à l'aide de l'opérateur d'affectation

L'opérateur d'affectation «=«Peut également aider à copier superficiel un objet en javascript. Dans le cas de l'utilisation de l'opérateur d'affectation, les deux variables feront référence au même objet. Les modifications dans un objet affecteront également la valeur de propriété de l'objet correspondant:

Syntaxe de l'utilisation de l'opérateur d'affectation à une copie superficielle en javascript

objet2 = objet1

Ici, l'opérateur d'affectation copie le «Object1» à «Object2».

Exemple: copie superficielle en javascript à l'aide de l'opérateur d'affectation

Maintenant, nous utiliserons l'opérateur d'affectation JavaScript pour une copie superficielle «Employé» s'oppose à «EMP1»:

Soit emp1 = ; emp1 = employé;

Dans la prochaine étape, nous spécifierons «Stepheny"Comme la valeur de"EMP1.nom" propriété:

EMP1.name = 'Stepheny'; console.Log ("Nom EMP1:" + EMP1.nom);
console.Journal ("Employé.Nom: "+ Employé.nom);

La sortie donnée signifie que la modification du «empiler.nom»La valeur de la propriété n'a pas modifié le «Employé» objet «Nom» propriété:

Maintenant, nous discuterons du concept de copie profonde un objet en javascript.

Copie profonde en javascript

"Copie profonde«Est une procédure récursive de copie d'objet. Ce mécanisme crée un nouvel objet puis clonére la paire de valeurs clés de l'objet spécifié. Cette déclaration signifie que, bien que la copie profonde, un objet JavaScript est complètement cloné dans un autre objet. Après cela, l'objet copié est déconnecté de l'objet d'origine.

Méthodes pour copier en profondeur un objet en javascript

Les méthodes utilisées pour la copie profonde d'un objet JavaScript sont Json.Stringify () et JSON.Parse (), où la méthode stringify () convertit un objet JavaScript particulier en une chaîne, puis la méthode parse () effectue l'opération d'analyse et renvoie un objet.

Syntaxe de l'utilisation de JSON.Stringify () et JSON.Parse () Méthodes pour copier en profondeur un objet en javascript

Laissez object2 = json.Parse (JSON.stringify (object1));

Ici le stringify () méthoD convertit JavaScript "objet1«À une chaîne, puis la méthode Parse () effectue l'opération d'analyse et les retours qui seront stockés dans«objet2".

Exemple: copie profonde dans javascript un objet en javascript à l'aide de JSON.Stringify () et JSON.Parse () Méthodes

Dans cet exemple, nous avons utilisé le stringify () et parse () méthodes copier «Employé» au «EMP1» objet. Le "Json.stringify ()"La méthode convertira le"employé"Object dans un"chaîne"Et puis le"Json.Parse ()”Méthode analyse la chaîne résultante et renvoie un objet JavaScript:

Laissez Employee =
Nom: 'Alex',
Adresse: City: 'Ankara', pays: 'Turquie'
;
var emp1 = json.Parse (JSON.Stringify (employé));
console.log (emp1);

Une sortie donnée signifie que nous avons copié avec succès le «Employé» s'oppose à «EMP1»:

Enfin, nous modifierons certaines propriétés de l'objet «EMP1», puis vérifierons le résultat:

EMP1.name = 'max';
EMP1.adresse.City = 'Istanbul';
console.Log ("EMP1.Nom: "+ EMP1.nom);
console.Log ("EMP1.adresse.Ville: "+ EMP1.adresse.ville);
console.Journal ("Employé.Nom: "+ Employé.nom);
console.Journal ("Employé.adresse.Ville: "+ Employé.adresse.ville);

Après avoir effectué l'opération de copie profonde, le «EMP1"Se déconnecte du"employé,"Donc, toutes les modifications apportées dans le"EMP1"N'affectera pas le"employé" objet:

Nous avons compilé toutes les informations essentielles liées à une copie superficielle et à des objets de copie profonde en javascript. Vous pouvez l'explorer davantage en fonction de vos exigences.

Conclusion

Spread Operator «[…]», «Objet.Assign () ”et opérateur« affectation » sont des méthodes qui vous permettent de des objets de copie superficiel et pour copier en profondeur un objet JavaScript, JSON.Stringify () et JSON.Parse () Méthodes sont utilisés, où le json.La méthode stringify () convertit un objet particulier en une chaîne, qui est ensuite analysé en arrière à l'aide de JSON.Parse () Méthode. Ce message a expliqué le concept de copie superficielle et profonde en utilisant des exemples appropriés.