JavaScriptLeçon 11 sur 16

Déstructuration et spread

La déstructuration sort les valeurs d’un tableau ou d’un objet dans des variables séparées, en une ligne. Les trois points font l’inverse : ils étalent un tableau ou un objet pour le copier ou le fusionner avec un autre.

L’essentiel

const [first, second] = list crée des variables dans l’ordre des éléments
const { name, age } = user crée des variables d’après les clés ; = "…" fixe une valeur par défaut
{ ...a, ...b } est un nouvel objet : une copie de a, recouverte par les clés de b
[...list, "new"] est une copie du tableau avec un élément de plus
function sum(...numbers) : un paramètre rest rassemble tous les arguments dans un tableau

Exemple

const [gold, silver, ...rest] = ["Ana", "Ben", "Cleo", "Dan"];console.log(gold, silver, rest); const user = { name: "Kai", age: 27 };const { name, age, country = "unknown" } = user;console.log(name, age, country); const older = { ...user, age: 28 };console.log(older, [...rest, "Eve"]);console.log(Math.max(...[3, 9, 4]));

rest a pris tous ceux qui ne tenaient pas dans gold et silver. L’objet n’avait pas de clé country, d’où la valeur par défaut. Spread a créé un nouvel objet et user garde son age 27.

Exercice

Utiliser l’éditeur⌘ Entrée ou Ctrl Entrée lance le code, ⇧ ⌘ Entrée vérifie l’exercice.Tab et Maj Tab indentent la ligne ou la sélection ; Échap puis Tab quitte l’éditeur.La vérification compare ce que le programme a affiché à l’exercice ; les espaces en fin de ligne ne comptent pas.Après deux vérifications ratées, la solution s’ouvre. Votre code reste dans ce navigateur.

Fusionnez defaults et userSettings dans un nouvel objet settings avec spread (defaults lui-même ne doit pas changer), sortez theme et fontSize par déstructuration et réécrivez sum avec un paramètre rest pour additionner autant de nombres qu’on veut. Sortie : Theme: dark, size: 16, Sound: true, Defaults untouched: light et 10.

// App settings: defaults plus what the user changedconst defaults = { theme: "light", fontSize: 14, sound: true };const userSettings = { theme: "dark", fontSize: 16 }; // TODO: settings = a copy of defaults, overwritten by userSettings (spread)const settings = defaults;// TODO: take theme and fontSize out of settings with destructuringconst theme = "?";const fontSize = 0; // TODO: sum should add up any number of arguments (rest parameter ...numbers)function sum(a, b) {  return a + b;} console.log(`Theme: ${theme}, size: ${fontSize}`);console.log(`Sound: ${settings.sound}`);console.log(`Defaults untouched: ${defaults.theme}`);console.log(sum(1, 2, 3, 4));

// App settings: defaults plus what the user changed
const defaults = { theme: "light", fontSize: 14, sound: true };
const userSettings = { theme: "dark", fontSize: 16 };

// TODO: settings = a copy of defaults, overwritten by userSettings (spread)
const settings = defaults;
// TODO: take theme and fontSize out of settings with destructuring
const theme = "?";
const fontSize = 0;

// TODO: sum should add up any number of arguments (rest parameter ...numbers)
function sum(a, b) {
  return a + b;
}

console.log(`Theme: ${theme}, size: ${fontSize}`);
console.log(`Sound: ${settings.sound}`);
console.log(`Defaults untouched: ${defaults.theme}`);
console.log(sum(1, 2, 3, 4));

Sortie

Ce que le programme affiche apparaîtra ici.