Décomposition et déstructuration
La décomposition est le moyen de transformer un itérable (tableau, objet...) en suite d'arguments.
La déstructuration est le moyen d'extraire des données d'un itérable à l'aide d'une syntaxe courte.
Définition : Décomposition
L'opérateur de décomposition Spread ... permet de transformer un tableau en liste d'arguments.
const tab1 = [1, 2, 3];
const tab2 = [4, 5, 6];
const tab3 = [tab1, 4]; // [1, 2, 3, 4]
const tab4 = [tab1, tab2]; // [1, 2, 3, 4, 5, 6]
const tab5 = [0, tab1, 4]; // [0, 1, 2, 3, 4]
Exemple : Envoyer une variable décomposée
const somme = (a, b, c) => a+b+c;
const somme1 = somme(1, 2, 3); // 6
const somme2 = somme([1, 2, 3]); // 6
const tab = [1,2,3];
const somme3 = somme(tab); // 6
Exemple : Argument décomposé
La décomposition peut être utilisée comme argument de fonction.
On dit que l'on utilise les paramètres du reste rest parameters (...).
Ce qui permet de créer une fonction avec un nombre d'arguments indéterminé.
L'argument est utilisé comme un tableau à l'intérieur de la fonction.
const somme = function(nombres) {
let s=0;
for(let valeur of nombres) {
s = s + valeur;
}
return s;
}
const somme1 = somme(1, 2, 3); // 6
const somme2 = somme(1, 2, 3, 4); // 10
const somme3 = somme([1, 2, 3]); // 6
const somme4 = somme([1, 2, 3], 4); // 10
nombres est un tableau qui contient tous les paramètres entrés.
Simplification
Avec une fonction fléchée et la méthode reduce de tableau :
const somme = (nombres) => nombres.reduce((s, x) => s+x, 0);
const somme1 = somme(1, 2, 3); // 6
const somme2 = somme(1, 2, 3, 4); // 10
const somme3 = somme([1, 2, 3]); // 6
const somme4 = somme([1, 2, 3], 4); // 10
Définition : Déstructuration (Affectation par décomposition)
L'affectation par décomposition permet d'affecter le contenu de plusieurs variables sous la forme d'une écriture de tableau.
const [a, b, c] = [1, 2, 3]; // a=1, b=2, c=3
const [d, e, f, reste] = [1, 2, 3, 4, 5]; // d=1, e=2, f=3, reste = [4,5]
Ignorer des valeurs
const tab = [1, 2, 3];
const [a,,b] = tab; // a=1, b=3
Valeur par défaut
const tab = [1, 2];
const [a, b=3, c=4] = tab; // a=1, b=2, c=4
Échange de valeurs
let a=1, b=2;
[a, b] = [b, a]; // a=2, b=1
L'affectation par décomposition fonctionne aussi pour les objets.
Les clés deviennent des variables :
const obj = {id: 1, nom: 'dupont', prenom: 'jean', age: 30};
const {nom, prenom, reste} = obj; // nom='dupont', prenom='jean', reste={id: 1, age: 30}
On peut utiliser un alias pour les clés
const obj = {id: 1, nom: 'dupont', prenom: 'jean', age: 30};
const {nom: a, prenom: b, reste} = obj; // a='dupont', b='jean', reste={id: 1, age: 30}
On peut combiner
const tab = [{id: 1, age: 30},{id: 4, age: 20},{id: 5, age: 25}];
const [fiche,{id: identifiant},{age}] = tab; // fiche={id: 1, age: 30}, identifiant=4, age=25
Exemple : Argument déstructuré
Argument tableau :
const afficher = function([nom, prenom, age]) {
return `${nom} ${prenom} a ${age}ans`;
}
const personne = ['Dupont', 'Paul', '30'];
console.log(afficher(personne)); // Dupont Paul a 30ans
Argument objet :
const afficher = function({nom, prenom, age}) {
return `${nom} ${prenom} a ${age}ans`;
}
const personne = {nom:'Dupont', prenom:'Paul', age:'30'}
console.log(afficher(personne)); // Dupont Paul a 30ans
Argument combiné :
const afficher = function([{nom: n1, prenom: p1, age: a1},{nom: n2, prenom: p2, age: a2}]) {
return `${n1} ${p1} a ${a1}ans et ${n2} ${p2} a ${a2}ans`;
}
const personnes = [{nom:'Dupont', prenom:'Paul', age:'30'},{nom:'Dupuis', prenom:'Jean', age:'70'}];
console.log(afficher(personnes)); // Dupont Paul a 30ans
Exemple de tri :
const personnes = [
{ nom: 'Dupont', prenom: 'Paul', age: '30' }, { nom: 'Dupuis', prenom: 'Jean', age: '70' }, { nom: 'Durant', prenom: 'Pierre', age: '40' },];
personnes.sort(({ age: a }, { age: b }) => a - b);
console.log(personnes); // affiche le tableau dans l'ordre croissant