03 - Structures de Données et Méthodes Modernes
3.1 Tableaux (Arrays) - Méthodes Avancées
Méthodes de transformation
Cours : Les méthodes de transformation permettent de manipuler les données d’un tableau pour en produire un nouveau, sans modifier le tableau initial (immutabilité). C’est un principe clé de la programmation fonctionnelle. Syntaxe :
const nouveauTableau = tableau.methode((element, index, tableau) => { ... });
Importance : Elles favorisent un code plus prévisible, plus lisible et évitent les effets de bord fréquents avec les boucles for.
Les méthodes de transformation créent de nouveaux tableaux sans modifier l’original :
const nombres = [1, 2, 3, 4, 5];
// map : transformer chaque élément
const doubles = nombres.map((nombre) => nombre * 2);
console.log(doubles); // [2, 4, 6, 8, 10]
// filter : filtrer selon une condition
const pairs = nombres.filter((nombre) => nombre % 2 === 0);
console.log(pairs); // [2, 4]
// reduce : réduire à une seule valeur
const somme = nombres.reduce((accumulateur, nombre) => accumulateur + nombre, 0);
console.log(somme); // 15
// flatMap : transformer et aplatir
const phrases = ['Bonjour le monde', 'Comment allez-vous'];
const mots = phrases.flatMap((phrase) => phrase.split(' '));
console.log(mots); // ['Bonjour', 'le', 'monde', 'Comment', 'allez-vous']
Méthodes de recherche
Cours : Ces méthodes parcourent le tableau pour trouver un élément précis ou vérifier une condition, retournant soit l’élément, son index, ou un booléen. Syntaxe :
const resultat = tableau.methode(predicateCallback);
Importance : Elles abstraient la boucle de parcours, rendant l’intention du code (trouver, vérifier) explicite et concise.
const utilisateurs = [
{ nom: 'Alice', age: 25, ville: 'Paris' },
{ nom: 'Bob', age: 30, ville: 'Lyon' },
{ nom: 'Charlie', age: 35, ville: 'Marseille' },
];
// find : trouver le premier élément correspondant
const alice = utilisateurs.find((user) => user.nom === 'Alice');
console.log(alice); // { nom: 'Alice', age: 25, ville: 'Paris' }
// findIndex : trouver l'index du premier élément
const indexBob = utilisateurs.findIndex((user) => user.nom === 'Bob');
console.log(indexBob); // 1
// some : vérifier si au moins un élément correspond
const hasParis = utilisateurs.some((user) => user.ville === 'Paris');
console.log(hasParis); // true
// every : vérifier si tous les éléments correspondent
const allAdults = utilisateurs.every((user) => user.age >= 18);
console.log(allAdults); // true
Méthodes d’ajout/suppression
Cours : Ces méthodes modifient directement le tableau existant (mutables) pour ajouter ou retirer des éléments. Syntaxe :
tableau.push(val)`, `tableau.pop()`, `tableau.splice(...)
Importance : Essentielles pour gérer des listes dynamiques, mais doivent être utilisées avec précaution dans les environnements réactifs (comme React) qui préfèrent l’immutabilité.
const fruits = ['pomme', 'banane'];
// push : ajouter à la fin
fruits.push('cerise');
console.log(fruits); // ['pomme', 'banane', 'cerise']
// unshift : ajouter au début
fruits.unshift('orange');
console.log(fruits); // ['orange', 'pomme', 'banane', 'cerise']
// splice : ajouter/supprimer à une position spécifique
fruits.splice(1, 0, 'fraise'); // Insérer 'fraise' à l'index 1
fruits.splice(2, 1); // Supprimer 1 élément à l'index 2
console.log(fruits);
Méthodes de tri
Cours : Permet de réorganiser l’ordre des éléments du tableau sur place (in-place). Syntaxe :
tableau.sort(compareFunction);
Importance : Indispensable pour l’affichage ordonné des données. Attention : sans fonction de comparaison, le tri par défaut convertit tout en chaînes (donc 10 vient avant 2).
const personnes = [
{ nom: 'Alice', age: 25 },
{ nom: 'Charlie', age: 35 },
{ nom: 'Bob', age: 30 },
];
// sort : trier avec fonction de comparaison
personnes.sort((a, b) => a.age - b.age);
console.log(personnes);
// [
// { nom: 'Alice', age: 25 },
// { nom: 'Bob', age: 30 },
// { nom: 'Charlie', age: 35 }
// ]
// Tri par nom alphabétique
personnes.sort((a, b) => a.nom.localeCompare(b.nom));
Nouvelles méthodes ES2023+
Cours : Ces méthodes introduisent des alternatives “non-destructives” aux méthodes classiques de tri et modification. Syntaxe :
const copieTrie = tableau.toSorted(...)
Importance : Elles comblent un manque historique en permettant de trier ou inverser un tableau sans muter l’original, simplifiant grandement la gestion d’état.
const nombres = [1, 2, 3, 4, 5];
// with : utiliser un élément comme contexte sans le répéter
const premier = nombres[0];
const deuxieme = nombres[1];
console.log(premier, deuxieme); // 1, 2
// Avec with
console.log(with (nombres) { premier, deuxieme }); // 1, 2
// toReversed : créer une copie inversée
const inverse = nombres.toReversed();
console.log(inverse); // [5, 4, 3, 2, 1]
// toSorted : créer une copie triée
const trie = nombres.toSorted((a, b) => b - a);
console.log(trie); // [5, 4, 3, 2, 1]
console.log(nombres); // [1, 2, 3, 4, 5] // original inchangé
Array grouping
Cours : Fonctionnalité statique récente permettant de regrouper les éléments d’un tableau en fonction d’une clé dérivée.
Syntaxe : Object.groupBy(items, callback)
Importance : Simplifie radicalement une opération très fréquente (le partitionnement de données) qui nécessitait auparavant des réductions complexes ou des bibliothèques externes (Lodash).
const produits = [
{ nom: 'iPhone', categorie: 'electronique' },
{ nom: 'MacBook', categorie: 'electronique' },
{ nom: 'Pomme', categorie: 'alimentaire' },
{ nom: 'Banane', categorie: 'alimentaire' },
];
// Object.groupBy : grouper par propriété
const groupParCategorie = Object.groupBy(produits, (produit) => produit.categorie);
console.log(groupParCategorie);
// {
// electronique: [
// { nom: 'iPhone', categorie: 'electronique' },
// { nom: 'MacBook', categorie: 'electronique' }
// ],
// alimentaire: [
// { nom: 'Pomme', categorie: 'alimentaire' },
// { nom: 'Banane', categorie: 'alimentaire' }
// ]
// }
// Map.groupBy : avec Map pour meilleures performances
const groupeMap = Map.groupBy(produits, (produit) => produit.categorie);
console.log(groupeMap.get('electronique')); // Accès direct à une catégorie
3.2 Objets Modernes
Création et manipulation d’objets
Cours : L’objet littéral est la structure de base. Les améliorations ES6 rendent leur définition plus souple et concise.
Syntaxe : { prop, methode() {}, ["prop_" + id]: val }
Importance : Permet d’écrire moins de code (shorthand value) et de créer des propriétés dynamiques lors de la déclaration.
// Création d'objet littéral
const personne = {
nom: 'Alice',
age: 25,
ville: 'Paris',
// Méthode concise
sePresenter() {
return `Bonjour, je suis ${this.nom} et j'ai ${this.age} ans`;
},
};
console.log(personne.sePresenter()); // "Bonjour, je suis Alice et j'ai 25 ans"
// Computed properties
const compteur = {
_valeur: 0,
get valeur() {
return this._valeur;
},
set valeur(nouvelleValeur) {
this._valeur = nouvelleValeur;
console.log(`Valeur changée : ${nouvelleValeur}`);
},
};
compteur.valeur = 10; // "Valeur changée : 10"
console.log(compteur.valeur); // 10
Object methods
Cours : Méthodes statiques pour transformer un objet en structures itérables (tableaux de clés, valeurs ou paires).
Syntaxe : Object.keys(o), Object.values(o), Object.entries(o)
Importance : Crucial pour itérer sur un objet avec map/forEach/filter, ce qu’on ne peut pas faire directement sur un objet brut.
const configuration = {
theme: 'sombre',
langue: 'fr',
notifications: true,
};
// Object.keys : obtenir les clés
const cles = Object.keys(configuration);
console.log(cles); // ['theme', 'langue', 'notifications']
// Object.values : obtenir les valeurs
const valeurs = Object.values(configuration);
console.log(valeurs); // ['sombre', 'fr', true]
// Object.entries : obtenir les paires clé-valeur
const entrees = Object.entries(configuration);
console.log(entrees); // [['theme', 'sombre'], ['langue', 'fr'], ['notifications', true]]
// Object.fromEntries : créer un objet depuis des entrées
const nouvelObjet = Object.fromEntries([
['nouvelleCle', 'nouvelleValeur'],
['autreCle', 'autreValeur'],
]);
console.log(nouvelObjet); // { nouvelleCle: 'nouvelleValeur', autreCle: 'autreValeur' }
Optional chaining avancé
Cours : L’opérateur ?. (elvis operator) court-circuite l’évaluation et renvoie undefined si la référence précédente est nulle ou indéfinie.
Syntaxe : obj?.prop, func?.(), arr?.[index]
Importance : Empêche les crashs d’application dus à des données manquantes dans des structures imbriquées profondes (API responses, etc.).
const utilisateur = {
profil: {
nom: 'Alice',
adresse: {
rue: '123 rue de la Paix',
ville: 'Paris',
},
},
};
// Optional chaining sécurisé
const ville = utilisateur.profil?.adresse?.ville ?? 'Ville non spécifiée';
console.log(ville); // 'Paris'
// Sans optional chaining (risque d'erreur)
// const villeRisquee = utilisateur.profil.adresse.ville; // Erreur si adresse est undefined
3.3 Structures de Données ES6+
Set et WeakSet
Cours : Set est une collection de valeurs uniques. WeakSet stocke des objets “faiblement” (ne bloque pas le garbage collector).
Syntaxe : new Set([val1, val1]) -> {val1}
Importance : Idéal pour garantir l’unicité des données et effectuer des opérations d’ensemble (union, intersection) performantes.
// Set : collection de valeurs uniques
const tags = new Set(['javascript', 'html', 'css', 'javascript']);
console.log(tags.size); // 3 (javascript n'est pas dupliqué)
// Ajouter et vérifier
tags.add('react');
tags.has('python'); // false
// Parcourir un Set
tags.forEach((tag) => console.log(tag));
// Convertir en tableau
const tagsArray = Array.from(tags);
console.log(tagsArray); // ['javascript', 'html', 'css', 'react']
// WeakSet : références faibles (garbage collection)
const weakSet = new WeakSet();
const obj1 = { id: 1 };
const obj2 = { id: 2 };
weakSet.add(obj1);
weakSet.has(obj1); // true
weakSet.has(obj2); // false
Map et WeakMap
Cours : Structure clé-valeur plus robuste que l’objet classique. Conserve l’ordre d’insertion et accepte tout type de clé.
Syntaxe : const map = new Map(); map.set(k, v);
Importance : Indispensable quand les clés ne sont pas des chaînes ou pour des performances d’ajout/suppression supérieures sur de grands volumes de données.
// Map : collection de paires clé-valeur
const cache = new Map();
// Ajouter et récupérer
cache.set('utilisateur:1', { nom: 'Alice', age: 25 });
cache.set('utilisateur:2', { nom: 'Bob', age: 30 });
const alice = cache.get('utilisateur:1');
console.log(alice); // { nom: 'Alice', age: 25 }
// Vérifier l'existence
cache.has('utilisateur:1'); // true
cache.has('utilisateur:3'); // false
// Parcourir une Map
cache.forEach((valeur, cle) => {
console.log(`${cle} -> ${JSON.stringify(valeur)}`);
});
// WeakMap : clés doivent être des objets
const weakMap = new WeakMap();
const utilisateur1 = { id: 1 };
const utilisateur2 = { id: 2 };
weakMap.set(utilisateur1, 'données sensibles');
weakMap.get(utilisateur1); // 'données sensibles'
3.4 Destructuring et Spread
Destructuring d’objets et tableaux
Cours : Déballage de valeurs d’objets ou de tableaux dans des variables distinctes.
Syntaxe : const { x } = obj; const [y] = arr;
Importance : Permet d’extraire de manière déclarative les données nécessaires, rendant les signatures de fonctions et l’utilisation de données complexes beaucoup plus claires.
// Destructuring de tableau
const couleurs = ['rouge', 'vert', 'bleu'];
const [premier, deuxieme, troisieme] = couleurs;
console.log(premier, deuxieme, troisieme); // 'rouge', 'vert', 'bleu'
// Avec valeurs par défaut
const [a, b, c = 'default'] = [1, 2];
console.log(a, b, c); // 1, 2, 'default'
// Destructuring d'objet
const personne = {
nom: 'Alice',
age: 25,
ville: 'Paris',
};
const { nom, age, ville } = personne;
console.log(nom, age, ville); // 'Alice', 25, 'Paris'
// Renommage avec valeurs par défaut
const { nom: nomUtilisateur, pays = 'France' } = personne;
console.log(nomUtilisateur, pays); // 'Alice', 'France'
// Destructuring imbriquée
const produit = {
infos: {
nom: 'iPhone',
prix: 999,
},
stock: 10,
};
const {
infos: { nom: nomProduit },
stock,
} = produit;
console.log(nomProduit, stock); // 'iPhone', 10
Spread operator
Cours : L’opérateur ... expanse les éléments d’un itérable à un endroit où zéro ou plusieurs arguments/éléments sont attendus.
Syntaxe : [...arr], {...obj}
Importance : La méthode standard moderne pour copier des structures, fusionner des données et passer des arguments, tout en préservant l’immutabilité.
// Spread avec tableaux
const tableau1 = [1, 2, 3];
const tableau2 = [4, 5, 6];
const combine = [...tableau1, ...tableau2];
console.log(combine); // [1, 2, 3, 4, 5, 6]
// Copie de tableau
const copie = [...tableau1];
// Spread avec objets
const base = { nom: 'Alice', age: 25 };
const etendu = { ...base, ville: 'Paris', pays: 'France' };
console.log(etendu);
// { nom: 'Alice', age: 25, ville: 'Paris', pays: 'France' }
// Fusion d'objets (attention à l'ordre)
const objet1 = { a: 1, b: 2 };
const objet2 = { b: 3, c: 4 };
const fusionne = { ...objet1, ...objet2 };
console.log(fusionne); // { a: 1, b: 3, c: 4 }
Rest pattern
Cours : L’inverse du Spread. Collecte les éléments restants dans un tableau ou un objet.
Syntaxe : function f(...args), const {a, ...rest} = obj
Importance : Permet de gérer un nombre indéfini d’arguments et de créer des objets “propres” en excluant certaines propriétés (props omission).
// Rest parameters dans les fonctions
function somme(...nombres) {
return nombres.reduce((total, n) => total + n, 0);
}
console.log(somme(1, 2, 3, 4, 5)); // 15
// Rest dans la destructuring
const [premier, ...reste] = [1, 2, 3, 4, 5];
console.log(premier, reste); // 1, [2, 3, 4, 5]
const { nom, ...autresInfos } = {
nom: 'Alice',
age: 25,
ville: 'Paris',
pays: 'France',
};
console.log(nom, autresInfos); // 'Alice', { age: 25, ville: 'Paris', pays: 'France' }
3.5 Chaînes de Caractères (Strings)
Template literals avancés
Cours : Littéraux de chaînes permettant l’interpolation d’expressions et le texte multiligne.
Syntaxe : `Texte ${var}`
Importance : Améliore radicalement la lisibilité de la construction de chaînes dynamiques par rapport à la concaténation classique (+).
const nom = 'Alice';
const age = 25;
// Template literals multilignes
const message = `Bonjour ${nom},
Vous avez ${age} ans.
Cordialement,
L'équipe`;
// Template literals avec expressions
const calcul = `Le double de ${age} est ${age * 2}`;
// Tagged templates
function highlight(strings, ...valeurs) {
return strings.reduce((resultat, str, i) => {
return resultat + str + `<mark>${valeurs[i]}</mark>`;
}, '');
}
const surligne = highlight`Bonjour ${nom}, comment allez-vous ?`;
console.log(surligne);
// "<mark>Bonjour</mark> <mark>Alice</mark>, comment allez-vous ?"
Méthodes modernes
Cours : Méthodes utilitaires ajoutées récemment pour des opérations courantes sur les chaînes.
Syntaxe : str.padStart(n, car), str.replaceAll(find, replace)
Importance : Offre des solutions standardisées et performantes pour le formatage et le nettoyage de texte, évitant les solutions “maison” ou les Regex complexes.
const texte = ' Bonjour le monde ';
// padStart et padEnd
const centre = texte.padStart(20, '-').padEnd(20, '-');
console.log(centre); // '--- Bonjour le monde ---'
// trimStart et trimEnd
const nettoye = texte.trimStart().trimEnd();
console.log(nettoye); // 'Bonjour le monde'
// replaceAll
const phrase = 'JavaScript est génial, JavaScript est puissant';
const remplace = phrase.replaceAll('JavaScript', 'JS');
console.log(remplace); // 'JS est génial, JS est puissant'
// matchAll
const texte2 = 'Les prix sont : 100€, 250€, 75€';
const prix = texte2.matchAll(/\d+€/g);
console.log(prix); // ['100€', '250€', '75€']
Prêt à passer à la suite ?
Vous avez terminé cette leçon sur 03 - Structures de Données et Méthodes Modernes. Continuez votre apprentissage avec la prochaine leçon ou explorez d'autres formations.