Dans ce post, vous apprendrez à supprimer les propriétés d’un objet en JavaScript en utilisant la déstructuration et la syntaxe ...rest .
Cette nouvelle façon de supprimer les propriétés d’un objet (en les excluant d’un nouvel objet) nous donne une façon plus propre d’écrire JavaScript, avec moins de code et une meilleure lisibilité – en plus d’être une opération immuable.
Avant la déstructuration, nous utilisions généralement le mot-clé delete pour supprimer les propriétés d’un objet. Le problème avec delete est qu’il s’agit d’une opération mutable, qui modifie physiquement l’objet et peut potentiellement provoquer des effets secondaires indésirables en raison de la façon dont JavaScript gère les références d’objets.
En utilisant la déstructuration d’objet, combinée à l’opérateur de repos ...rest, nous avons une approche propre en une ligne.
Qu’est-ce que la déstructuration d’objet ?
La déstructuration d’objets nous permet de créer des variables à partir de noms de propriétés d’objets, et la variable contiendra la valeur du nom de la propriété – par exemple :
const data = { a: 1, b: 2, c: 3 };const { a, b, c } = data;console.log(a, b, c); // 1, 2, 3En utilisant const { a, b, c } = data nous déclarons 3 nouvelles variables (ab et c).
Si ab et c existent comme noms de propriétés sur data, alors des variables seront créées contenant les valeurs des propriétés de l’objet. Si les noms de propriétés n’existent pas, vous obtiendrez undefined.
…le repos dans la déstructuration des objets
D’abord sont arrivés les paramètres de repos, puis les propriétés de repos !
Ajoutés dans ECMAScript 2015 et maintenant à l’étape 4 – ils sont là pour rester et être utilisés aujourd’hui.
Avec cela en tête, comment ...rest nous aide-t-il à supprimer une propriété d’un objet via la déstructuration ?
🎉 Téléchargez-le gratuitement !
Vous êtes prêt à aller au-delà de ForEach ? Mettez-vous en confiance avec les méthodes avancées – Reduce, Find, Filter, Every, Some et Map.
-
Comprenez pleinement comment gérer les structures de données JavaScript avec des opérations immuables - 31 pages de syntaxe en plongée profonde, des exemples réels, des conseils et des astuces
- Écrire une logique de programmation plus propre et mieux structurée en 3 heures
En prime, nous vous enverrons également quelques goodies supplémentaires à travers quelques emails supplémentaires.
Reprenons notre exemple précédent et utilisons la syntaxe ...rest pour voir ce qui se passe :
const data = { a: 1, b: 2, c: 3 };const { a, ...rest } = data;console.log(a); // 1console.log(rest); // { b: 2, c: 3 }L’utilisation de ...rest ici (et vous pouvez appeler rest ce que vous voulez) nous donne tout ce qui reste, le urmm « reste » des propriétés si vous voulez.
Alors, ne venons-nous pas d’apprendre à supprimer une propriété d’un objet ? Je ne vois plus a: 1 à l’intérieur de rest – elle a été supprimée !
Techniquement, elle a été exclue plutôt que physiquement » retirée » de l’objet – et cela suit un modèle immuable pour l’écriture de JavaScript et la gestion de l’état (l’état étant notre data).
Voici comment nous ferions cela sans déstructuration d’objet ni syntaxe de repos, c’est beaucoup plus fastidieux et ne nous permet pas d’obtenir dynamiquement toutes les propriétés restantes :
const data = { a: 1, b: 2, c: 3 };const a = data.a;const rest = { b: data.b, c: data.c };console.log(a); // 1console.log(rest); // { b: 2, c: 3 }Suppression dynamique d’une propriété par clé
Disons que nous avons une clé que peut-être un utilisateur a fournie et qu’il veut supprimer. Pour cela, nous allons utiliser b. Comment supprimer cet élément spécifique ? Tous les exemples jusqu’à présent étaient des valeurs codées en dur.
Supposons que nous avons 'b' comme valeur quelque part, nous pouvons dynamiquement passer cela dans notre syntaxe de déstructuration en utilisant la syntaxe des crochets , tout comme une recherche d’objet (au lieu de cela, cela crée une nouvelle variable basée sur la valeur passée dynamiquement) :
const data = { a: 1, b: 2, c: 3 };const removeProp = 'b';const { : remove } = data;console.log(remove); // 2C’est vrai, comme nous construisons dynamiquement une nouvelle variable, nous devons utiliser : remove pour lui réattribuer un nouveau nom. Sinon, comment allons-nous la référencer ? Nous ne pouvons pas référencer , nous devrons donc nous en souvenir.
Cependant, à ce stade, nous pouvons à nouveau introduire la syntaxe rest pour supprimer la propriété de l’objet :
const data = { a: 1, b: 2, c: 3 };const removeProp = 'b';const { : remove, ...rest } = data;console.log(remove); // 2console.log(rest); // { a: 1, c: 3 }Voilà, nous avons réussi à supprimer une propriété dynamiquement en JavaScript en utilisant la déstructuration d’objet et la syntaxe rest !
Voyez l’exemple en direct dans StackBlitz, amusez-vous et soyez à l’aise avec cette technique :
Résumé
Nous avons parcouru un long chemin ! Cette technique nous aide à éviter les opérations mutables et le mot-clé delete, nous donnant un modèle immuable pour supprimer les propriétés des objets en JavaScript.
Nous avons utilisé la déstructuration d’objet et regardé comment la combiner avec la syntaxe de repos pour nous donner une solution propre pour supprimer les propriétés des objets.
🏆 Consultez mes cours de JavaScript pour apprendre pleinement les bases profondes du langage, les patterns avancés, les paradigmes de programmation fonctionnelle et orientée objet et tout ce qui concerne le DOM. Une série de cours incontournables pour tout développeur JavaScript sérieux.
Happy coding!
P.S. ce billet de blog a été suscité par une discussion soignée sur Twitter que j’ai eue avec Mauricio Correa ! C’est un gars et un développeur génial du Brésil.
🎉 Téléchargez-le gratuitement !
Vous êtes prêt à aller au-delà de ForEach ? Mettez-vous en confiance avec les méthodes avancées – Reduce, Find, Filter, Every, Some et Map.
- Comprenez pleinement comment gérer les structures de données JavaScript avec des opérations immuables
- 31 pages de syntaxe en plongée profonde, des exemples réels, des conseils et des astuces
- Écrire une logique de programmation plus propre et mieux structurée en 3 heures
En prime, nous vous enverrons également quelques goodies supplémentaires à travers quelques emails supplémentaires.