Une introduction à la syntaxe Spread en JavaScript

Qu'est-ce que c'est et pourquoi en avons-nous besoin?

La syntaxe de diffusion a été introduite dans la spécification ES6 de JavaScript. Depuis, il s'est avéré être un élément de code précieux rendant le code propre et facile à comprendre.

MDN définit comme:

La syntaxe de propagation permet à un itérable tel qu'une expression de tableau ou une chaîne d'être développé aux endroits où zéro ou plus d'arguments (pour les appels de fonction) ou d'éléments (pour les littéraux de tableau) sont attendus, ou une expression d'objet à être développée aux endroits où zéro ou plus des paires clé-valeur (pour les littéraux d'objet) sont attendues.

Soyons tous d'accord pour dire que la définition ci-dessus est une poignée et qu'aucun de nous n'a saisi un mot qu'il essaie de dire. Commençons donc par les éléments les plus élémentaires de la syntaxe de diffusion.

  • L'opérateur d'étalement est juste 3 points ...
  • Il peut être utilisé sur des itérables comme un tableau ou une chaîne.
  • Il étend un itérable à ses éléments individuels
  • Il peut fournir un appel de fonction avec un tableau (ou tout autre itérable) où 0 ou plusieurs arguments étaient attendus.

Exemple

L'extrait ci-dessous contient une fonction appelée sum qui attend 3 arguments x, y et z. Nous avons un tableau avec 3 éléments, et nous voulons passer les éléments du tableau comme arguments pour la fonction.

Avant l'introduction de l'opérateur de diffusion, cela se faisait via la fonction apply.

Après l'introduction de l'opérateur de propagation, cela pourrait être fait très simplement:

Comme on peut le voir dans l'extrait de code ci-dessus avec l'opérateur spread, nous n'avons pas besoin d'utiliser la fonction apply. Cela nous évite d'écrire plus de code.

L'exemple ci-dessus donne une idée très approximative et brève sur l'opérateur de propagation. Tout d'abord, entrons dans plus de détails sur la même chose, puis nous verrons plus d'exemples.

Syntaxe

L'opérateur de diffusion peut être utilisé de nombreuses manières et scénarios tels que

  • Appels de fonction internes

Lorsqu'il est utilisé dans le scénario ci-dessus, le est appelé le paramètre rest. Nous verrons des exemples liés à cela dans la section des exemples.

  • Création / extension d'un tableau / itérable:

Exemples

  • Comme repos

… Est utilisé comme argument pour une fonction variadique. Une fonction variadique est une fonction qui peut avoir un nombre variable de paramètres.

Ici, lorsque nous retournons args, nous voyons que nous récupérons notre tableau que nous avons passé en tant que valeurs séparées dans l'appel. Cela montre que l'opérateur rest fonctionne exactement à l'opposé de la syntaxe de propagation. On dilate et on condense la valeur.

Une autre chose à souligner est qu'il n'y a pas de nombre spécifique de paramètres mentionnés dans la définition de la fonction. Cela signifie utiliser… la fonction peut avoir n nombre d'arguments. Nous n'avons pas besoin de spécifier les paramètres au préalable.

C'est en particulier une manière très flexible de recevoir des arguments pour une fonction pour laquelle les nombres d'arguments spécifiques ne sont pas déterminés comme les fonctions Math.max et Math.min. Ce sont des fonctions variadiques car le nombre d'entrées peut être infini pour elles.

Revenons à l'exemple, pour obtenir la somme de tous les arguments

Nous devons itérer le tableau et ajouter tous les éléments individuels pour produire le résultat.

  • Pousser les éléments dans un tableau

La fonction push () est utilisée pour pousser des éléments dans un tableau. La limitation avec push est que nous devons pousser les éléments un par un (push (1,2,3)). S'il y a un tableau dont les éléments doivent être insérés dans le tableau en utilisant push, nous obtiendrons un tableau multidimensionnel, ce que nous n'avons pas demandé.

Appliquez à nouveau à la rescousse

Comme nous pouvons le voir, utiliser apply n'a pas l'air très élégant et nous avons besoin d'une syntaxe simple et petite pour le faire. Utilisons Spread…

Élégant!

  • Copier un tableau

Facile!

Le même résultat peut être produit à l'aide d'un objet

  • Concaténation de 2 tableaux

La concaténation est effectuée à l'aide de la fonction concat

La même chose peut être obtenue en utilisant l'opérateur…

  • Conversion d'une chaîne en tableau

Cela peut être fait en utilisant à la fois la fonction de fractionnement et l'opérateur…

  • Utilisation dans les fonctions max et min

L'extrait ci-dessous a tendance à trouver l'élément maximum dans le tableau, nous passons donc tout le tableau dans la fonction mais nous obtenons le résultat comme NaN

Nous pouvons utiliser apply, mais comme le montrent les exemples précédents, je déteste l'utiliser

Idem pour min

Conclusion

Nous avons vu de nombreuses situations où l'opérateur de propagation est utile et réduit notre code et le rend également très facile à comprendre.

Si vous l'aimez Clap? et suivre? pour plus.