Une introduction à l'opérateur de propagation et au paramètre de repos dans JavaScript (ES6)

L'opérateur d'étalement et le paramètre repos sont écrits sous forme de trois points consécutifs (…). Ont-ils autre chose en commun?

L'opérateur de diffusion (…)

L'opérateur de diffusiona été introduit dans ES6. Il vous offre la possibilité de développer des objets itérables en plusieurs éléments. Qu'est-ce que cela signifie vraiment? Vérifions quelques exemples.

const movies = ["Leon", "Love Actually", "Lord of the Rings"];console.log(...movies);

Impressions:

Leon Love en fait le Seigneur des Anneaux
const numbers = new Set([1, 4, 5, 7]);console.log(...numbers);

Impressions:

1 4 5 7

Vous remarquerez peut-être que le tableau du premier exemple et l'ensemble du second ont été développés dans leurs éléments individuels (chaînes et chiffres respectivement). Comment cela peut-il être utile, demandez-vous.

L'utilisation la plus courante consiste probablement à combiner des tableaux. Si vous avez déjà eu à faire cela avant l'opérateur de diffusion, vous avez probablement utilisé la concat()méthode.

const shapes = ["triangle", "square", "circle"];const objects = ["pencil", "notebook", "eraser"];const chaos = shapes.concat(objects);console.log(chaos);

Impressions:

["Triangle", "carré", "cercle", "crayon", "cahier", "gomme"]

Ce n'est pas trop mal, mais l'opérateur de diffusion propose un raccourci, ce qui rend votre code beaucoup plus lisible également:

const chaos = [...shapes, ...objects];console.log(chaos);

Impressions:

["Triangle", "carré", "cercle", "crayon", "cahier", "gomme"]

Voici ce que nous obtiendrions si nous essayions de faire de même sans l'opérateur de propagation:

const chaos = [shapes, objects];console.log(chaos);

Impressions:

[Array (3), Array (3)]

Que s'est-il passé ici? Au lieu de combiner les tableaux, nous avons obtenu un chaostableau avec le shapestableau à l'index 0 et le objectstableau à l'index 1.

Le paramètre reste (…)

Vous pouvez considérer le paramètre repos comme l'opposé de l'opérateur d'étalement. Tout comme l'opérateur de propagation vous permet d'étendre un tableau en ses éléments individuels, le paramètre rest vous permet de regrouper les éléments dans un tableau.

Assigner des valeurs d'un tableau à des variables

Jetons un œil à l'exemple suivant:

const movie = ["Life of Brian", 8.1, 1979, "Graham Chapman", "John Cleese", "Michael Palin"];const [title, rating, year, ...actors] = movie;console.log(title, rating, year, actors);

Impressions:

«La vie de Brian», 8.1, 1979, [«Graham Chapman», «John Cleese», «Michael Palin»]

Le paramètre rest nous permet de prendre les valeurs du movietableau et de les affecter à plusieurs variables individuelles en utilisant la déstructuration. De cette façon title, ratinget yearreçoivent les trois premières valeurs du tableau, mais c'est là que se produit la vraie magie actors. Grâce au paramètre rest, actorson attribue les valeurs restantes du movietableau, sous forme de tableau.

Fonctions variadiques

Les fonctions variadiques sont des fonctions qui acceptent un nombre indéfini d'arguments. Un bon exemple est la sum()fonction: nous ne pouvons pas savoir à l'avance combien d'arguments lui seront passés:

sum(1, 2);sum(494, 373, 29, 2, 50067);sum(-17, 8, 325900);

Dans les versions antérieures de JavaScript, ce type de fonction était géré à l'aide de l'objet arguments, qui est un objet de type tableau, disponible en tant que variable locale à l'intérieur de chaque fonction. Il contient toutes les valeurs des arguments passés à une fonction. Voyons comment la sum()fonction pourrait être implémentée:

function sum() { let total = 0; for(const argument of arguments) { total += argument; } return total;}

Cela fonctionne, mais c'est loin d'être parfait:

  • Si vous regardez la définition de la sum()fonction, elle n'a aucun paramètre. Cela peut être assez trompeur.
  • Cela peut être difficile à comprendre si vous n'êtes pas familier avec l'objet arguments (comme dans: d'où vient le diable arguments?!)

Voici comment nous écririons la même fonction avec le paramètre rest:

function sum(...nums) { let total = 0; for(const num of nums) { total += num; } return total;}

Notez que la for...inboucle a également été remplacée par la for...ofboucle. Nous avons rendu notre code plus lisible et concis à la fois.

Hallelujah ES6!

Vous commencez tout juste votre aventure avec la programmation? Voici quelques articles qui pourraient également vous intéresser:

  • Un bootcamp de codage est-il quelque chose pour vous?
  • Un changement de carrière est-il vraiment possible?
  • Pourquoi Ruby est un excellent langage pour commencer à programmer