5.9 Cloner un objet

Lors de la dernière vidéo, vous avez appris à énumérer les propriétés d'un objet. Maintenant, en utilisant cette technique, nous pouvons obtenir toutes les propriétés d'un objet et les copier dans un autre objet. Supposons donc que vous souhaitiez créer un autre objet cercle, qui est une copie d'un objet ici. Je vais l'appeler another. Donc, constante de another. au départ, nous le définissons sur un objet vide, nous pouvons maintenant utiliser la boucle for in pour parcourir toutes les propriétés d'un objet et les copier dans ce nouvel objet. Donc, for(let key in cercle) nous utilisons maintenant la notation entre crochets pour accéder à une propriété avec une clé donnée. Nous avons donc mis another key sur le cercle de clé. Donc, en gros, ici dans la première itération, la clé sera radius, donc ce code sera équivalent à cela => Another de radius , donc nous définissons la propriété radius d'un autre objet sur le Cercle of radius, maintenant ici sur le côté droit de l'opérateur d'affectation, vous lisez la propriété radius du cercle, la valeur de cette propriété est 1, nous obtenons donc 1 et le mettons dans la propriété radius de l'autre objet. Faisons un console log de another, enregistrer les modifications, nous avons donc ici cette propriété radius définie sur 1, et voici notre méthode draw, donc si nous en appelons another point draw tout fonctionne comme prévu. Mais cette approche pour copier ou cloner un objet est un peu ancienne. Dans le JavaScript moderne, nous avons de meilleures façons de réaliser la même chose. Une façon consiste à utiliser la methode objet. Assign. Laissez moi vous montrez cela en détail. Je vais donc commenter ces quelques lignes, nous avons cet objet que nous avons vu auparavant, cet objet a une méthode appelée assign. Ici comme premier argument, nous pouvons passer un objet cible qui peut être un objet vide, ou un objet existant, vous verrez la différence dans un instant. Et puis nous pouvons passer 1 ou plusieurs objets source. On va mettre Cercle ici. Ce que fait cette méthode, c'est qu'elle prend toutes les propriétés de cette méthode dans l'objet source et les copie dans ce nouvel objet, et renvoie finalement le résultat ici. Cette ligne de code est donc exactement équivalente à ces trois lignes. Si nous enregistrons les modifications, nous obtenons exactement le même résultat. Maintenant, ce passage d'objet ciblé ici ne doit pas être forcément un objet vide, il peut être un objet existant, il peut avoir une ou plusieurs propriétés ou méthodes, alors à titre d'exemple, ajoutons une propriété de couleur ici, On va la définir sur jaune , maintenant, enregistrez les modifications, donc, ce nouvel objet a la propriété color que nous avions initialement ici, ainsi que les membres de l'objet cercle. Voici donc la methode objet. assigner. Maintenant, permettez-moi de revenir à un objet vide, je vais vous montrer une autre façon plus simple et plus élégante de cloner un objet. Nous pouvons utilis er l'opérateur d'étalement, donc, encore une fois constante de another, ici, nous définissons cela sur un nouvel objet, puis utilisons l'opérateur d'étalement, qui est de trois points, pour étendre l'objet cercle. Cet opérateur prend toutes les propriétés et méthodes de cet objet et les place ici entre ces accolades. C'est donc le moyen le plus simple de cloner un objet. Enregistrez les modifications, encore une fois, nous obtenons exactement le même objet qu'auparavant. Voici donc ce que je veux que vous emportiez, objet. assigner copie les propriétés et les méthodes d'un ou plusieurs objets source dans un objet ciblé, et nous pouvons l'utiliser pour cloner un objet, ou combiner plusieurs objets en un seul objet, et l'opérateur d'étalement est utilisé pour étaler un objet, ce qui signifie essentiellement obtenir toutes ses propriétés et méthodes et les mettre dans un autre objet. Voilà pour cette vidéo sur comment cloner un objet en JavaScript, on se retrouve pour une toute prochaine vidéo