Introduction
La déstructuration de tableaux
La syntaxe de déstructuration de tableaux de JavaScript est un moyen concis d'extraire des valeurs d'un tableau et de les affecter à des variables distinctes.
Dans cet exemple, chaque valeur du tableau numberOfMoons est affectée à la planète qui lui correspond :
const numberOfMoons = [0, 2, 14];
const [venus, mars, neptune] = numberOfMoons;
neptune;
// => 14
En bref :
- La syntaxe permet de nommer des éléments positionnés d'un tableau, et aussi de permuter des variables par réaffectation.
- La syntaxe de déstructuration est disponible dans les paramètres de fonction, ainsi que sur tout itérable.
- Ne pas nommer une position (en n'écrivant aucun nom de variable) fait que cette position est ignorée silencieusement.
La déstructuration d'objets
En JavaScript, il existe aussi une syntaxe de déstructuration pour extraire les propriétés d'un objet et les affecter à des variables distinctes.
Dans cet exemple, des symboles météo sont extraits de l'objet weather :
const weather = {
sun: '☀️',
sun_behind_small_cloud: '🌤️',
sun_behind_cloud: '⛅',
sun_behind_large_cloud: '🌥️',
sun_behind_rain_cloud: '🌦️',
cloud: '☁️',
cloud_with_rain: '🌧️',
cloud_with_snow: '🌨️',
cloud_with_lightning: '🌩️',
cloud_with_lightning_and_rain: '⛈️',
};
const { sun, cloud, cloud_with_lightning: thunder } = weather;
sun;
// => '☀️'
cloud;
// => '☁️'
thunder;
// => '🌩️'
En bref :
- La syntaxe permet à la fois d'extraire des propriétés et de les extraire en les renommant.
- La syntaxe de déstructuration est disponible dans les paramètres de fonction.
Instructions
Elyse, apprentie magicienne, poursuit son entraînement.
Elle a un jeu de cartes qu'elle veut manipuler.
Pour simplifier, elle ne commence généralement qu'avec des cartes numérotées de 2 à 10, même si certains tours peuvent faire intervenir d'autres cartes (les figures).
Il existe de nombreuses façons de mélanger les cartes, mais pour entretenir l'illusion magique, il est essentiel de ne jamais recourir à une seule et même méthode, par exemple Elyse n'utilise ni splice, ni slice, ni shift, ni unshift, ni push, ni at.
L'accesseur de tableau array[index] et l'accesseur d'objet (object[key] et object.key) ne doivent pas non plus être utilisés.
Tu veux aider Elyse à faire progresser sa magie ?
Chaque fonction peut être implémentée à l'aide des paramètres et d'un corps de fonction composé d'une seule return expression.
1. Récupère la première carte
Elyse va invoquer la première carte du jeu sans utiliser array[index], .at(index) ni .shift().
C'est comme par magie.
const deck = [5, 9, 7, 1, 8];
getFirstCard(deck);
// => 5
2. Récupère la deuxième carte
Elyse fait un tour de passe-passe et invoque la deuxième carte du jeu sans utiliser array[index] ni .shift().
const deck = [3, 2, 10, 6, 7];
getSecondCard(deck);
// => 2
3. Échange deux cartes
Elyse va intervertir les deux cartes du jeu.
Elle n'a pas besoin d'appeler la moindre fonction.
const deck = [10, 7];
swapTwoCards(deck);
// => [7, 10]
4. Décale trois cartes
Pour réaliser un nouveau tour de passe-passe, Elyse prend trois cartes et déplace rapidement celle du haut à la fin, ce qui fait de la carte du milieu la première carte et de l'ancienne carte du bas la carte du milieu.
Elle n'a pas besoin d'appeler la moindre fonction.
const deck = [2, 6, 10];
shiftThreeCardsAround(deck);
// => [6, 10, 2]
5. Choisis la pile nommée
Elyse va séparer le jeu en deux piles.
Elle demande ensuite au spectateur de choisir l'une des deux piles, que nous appellerons chosen.
La pile disregarded n'est plus utile, et elle la fait disparaître.
Elle n'a pas besoin d'appeler la moindre fonction.
const deck = [5, 4, 7, 10];
const chosen = [5, 4];
const disregarded = [7, 10];
pickNamedPile({ chosen, disregarded });
// => [5, 4]
5. Échange la pile choisie
Malheureusement, le spectateur continue de choisir la «\u00a0mauvaise\u00a0» pile, mais grâce à une magie rapide et astucieuse, Elyse renomme la pile chosen en disregarded et la pile disregarded en chosen.
Elle n'a pas besoin d'appeler la moindre fonction.
const deck = [5, 4, 7, 10];
const chosen = [5, 4];
const disregarded = [7, 10];
swapNamedPile({ chosen, disregarded });
// => { chosen: [7, 10], disregarded: [5, 4] }
Exercice d'apprentissage
