Résumé: dans ce tutoriel, vous apprendrez comment copier des objets en JavaScript, y compris shallow copy et deep copy., Pour copier un objet en JavaScript, vous avez trois options:

  1. Utilisation de la propagation (...) syntaxe
  2. Utilisation de la balise Object.assign() méthode
  3. Utilisation de la balise JSON.stringify() et JSON.parse() méthode

L’exemple suivant illustre comment copier un objet en utilisant une des trois méthodes ci-dessus:

les Deux écart (...) et Object.assign() effectuer une copie superficielle alors que le JSON méthodes de réaliser une copie en profondeur.

Copie superficielle vs., deep copy

En JavaScript, vous utilisez des variables pour stocker des valeurs qui peuvent être primitives ou des références. Lorsque vous faites une copie d’une valeur stockée dans une variable, vous créez une nouvelle variable avec la même valeur. Pour une valeur primitive, vous utilisez simplement une affectation simple:

Code language: JavaScript (javascript)

Et lorsque vous modifiez la valeur de la variable copiée, la valeur de l’original reste la même.

Code language: JavaScript (javascript)

Résultat:

Cependant, si vous utilisez l’opérateur d’affectation pour une valeur de référence, il ne sera pas copier la valeur., Au lieu de cela, les deux variables référenceront le même objet dans la mémoire:

Code language: JavaScript (javascript)

Et lorsque vous accédez à l’objet via la nouvelle variable (copiedPerson) et modifiez la valeur de sa propriété (name), vous modifiez la valeur de la propriété de l’objet.

Code language: JavaScript (javascript)

Résultat:

Code language: CSS (css)

Une profonde copie signifie que la valeur de la nouvelle variable est déconnecté de la variable d’origine, tandis que d’une copie signifie que certaines valeurs sont toujours connectés à la variable d’origine.,

la copie Superficielle exemple

prenons l’exemple suivant:

Dans cet exemple:

  • tout d’Abord, créez un nouvel objet nommé person.
  • Deuxièmement, cloner l’objetperson en utilisant la méthodeObject.assign().
  • Troisièmement, modifiez les informations de prénom et d’adresse de l’objet copiedPerson.,

Voici la sortie:

Cependant, lorsque vous affichez les valeurs de l’objet person, vous constaterez que les informations d’adresse ont changé mais le prénom: 

Code language: JavaScript (javascript)

Sortie:

La raison en est que l’adresse est une valeur de référence alors que le prénom est une valeur primitive. Les deux person et copiedPerson références à des objets différents, mais ces objets font référence à la même address objets.,

copie en Profondeur exemple

L’extrait de code suivant remplace la balise Object.assign() méthode par le JSON méthodes pour effectuer une copie en profondeur le person objet:

Sortie

Code language: CSS (css)

Dans cet exemple, toutes les valeurs dans le copiedPerson objet sont déconnectés de l’original person objet. Dans ce tutoriel, vous avez appris à copier des objets en JavaScript en utilisant une copie superficielle ou profonde.

  • ce tutoriel a Été utile ?
  • Ouinon