3 exemples pratiques d'utilisation de la déstructuration en JavaScript

Écriture d'un nettoyeur de code à l'aide de modèles de destruction

Vous connaissez probablement déjà la restructuration en JavaScript. Il nous est parvenu en 2015 dans la spécification ES6 , mais si vous avez besoin de rafraîchir vos connaissances, alors sur le site Web de Mozilla, vous pouvez lire un grand article détaillé sur la façon dont tout cela fonctionne .

Mais savoir comment cela fonctionne n'est pas du tout la même chose que de savoir comment l'utiliser. Voici trois modèles pour vous aider à rendre votre code plus propre, plus fiable et plus facile à lire!

1. Arguments des fonctions nommées

Les arguments nommés sont une autre façon de gérer les paramètres de fonction aux arguments positionnels. Au lieu de spécifier des arguments dans un ordre bien défini, indiquez simplement leur nom. En Python, par exemple, cela ressemble à ceci:

def sum(a=1,b=2,c=3): return a+b+c sum(b=5,a=10) 

Tu vois? L'ordre n'est pas important si vous avez spécifié explicitement le nom du paramètre. Les avantages par rapport aux arguments positionnels sont les suivants:

1. Vous pouvez omettre un ou plusieurs paramètres lors de l'appel d'une fonction
2. L'ordre de passage des arguments n'est plus important
3. Le code est devenu plus lisible

Bien que les arguments nommés de manière native ne soient pas pris en charge dans JavaScript, nous pouvons utiliser le modèle de déstructuration pour obtenir les trois avantages ci-dessus. Ce sera le dernier exemple déjà en JavaScript:

 function sum({a = 1, b = 2, c = 3}) { return a + b + c } sum({b: 10, a: 5}) // 5 + 10 + 3 = 18 

Tous les objectifs ont été atteints: vous pouvez omettre c , l'ordre n'est plus important et les arguments sont suivis de leurs propres noms. Tout cela est possible précisément grâce à la déstructuration.

2. Analyse plus claire des réponses du serveur

Souvent, dans la réponse du serveur, nous ne sommes intéressés que par un bloc de données ou même une seule valeur spécifique de ce bloc. Si tel est votre cas, utilisez la déstructuration pour ignorer tout le reste que le serveur envoie habituellement. Un exemple:

 function mockServerCall () { return new Promise((resolve, reject) => { setTimeout(() => { resolve({ 'status': 200, 'content-type': 'application/json', 'data' : { dataOfInterest: 42 } }) }, 250) }) } mockServerCall() .then(({data: { dataOfInterest = 100 }}) => { console.log(dataOfInterest) // 42 (    100) }) 

Ce modèle vous permet d'extraire les données qui nous intéressent pendant l'analyse des arguments. Et vous avez la possibilité d'ajuster les valeurs par défaut en bonus. Ce qui nous amène en douceur au modèle suivant ...

Définition des valeurs par défaut lors de l'affectation

Si une variable n'existe pas dans l'espace de noms, nous devons souvent la définir à sa valeur par défaut.

Avant la déstructuration, vous pouviez faire quelque chose comme ceci:

 //      var nightMode = userSettings.nightMode || false 

Mais cette approche nécessitera une ligne de code pour chaque affectation. La déstructuration vous permettra de tout faire d'un seul coup:

 const userSettings = {nightMode: true, fontSize: 'large'} const { nightMode = false, language = 'en', fontSize = 'normal' } = userSettings console.log(nightMode) // true console.log(language) // 'en' console.log(fontSize) // 'large' 

Ce modèle peut être utilisé pour définir l'état des composants React !.

J'espère que ces modèles vous seront utiles! Pour en savoir plus sur la déstructuration, suivez les liens ci-dessous (informations en anglais - traduction approximative) :

ES6 en profondeur: la restructuration

Apprenez les bases de la déstructuration des accessoires dans React