Syntaxe Spread dans les Tableaux
Fait partie de la section Logique & Flux du Journey JavaScript de Coddy — leçon 48 sur 65.
La syntaxe de décomposition (...) permet à un itérable, tel qu'un tableau, d'être étendu là où zéro ou plus d'arguments ou d'éléments sont attendus. Elle fournit un moyen concis d'effectuer des opérations telles que la combinaison de tableaux ou la copie de tableaux.
Voici quelques cas d'utilisation courants :
1. Combiner des tableaux :
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = [...arr1, ...arr2];
console.log(combined); // [1, 2, 3, 4, 5, 6]2. Créer une copie superficielle d'un tableau :
const original = [1, 2, 3];
const copy = [...original];
console.log(copy); // [1, 2, 3]3. Ajouter des éléments à un tableau :
const numbers = [1, 2, 3];
const moreNumbers = [0, ...numbers, 4];
console.log(moreNumbers); // [0, 1, 2, 3, 4]4. Passage d'éléments de tableau comme arguments de fonction :
function sum(a, b, c) {
return a + b + c;
}
const numbers = [1, 2, 3];
console.log(sum(...numbers)); // 6Défi
FacileCréez une fonction appelée mergeArr qui prend deux tableaux de nombres comme arguments. La fonction doit :
- Fusionner les deux tableaux en utilisant l'opérateur de décomposition (spread operator)
- Supprimer tous les nombres en double
- Retourner le tableau résultant
Aide-mémoire
La syntaxe de décomposition (...) permet d'étendre un itérable à des endroits où zéro ou plusieurs arguments ou éléments sont attendus.
Combiner des tableaux :
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = [...arr1, ...arr2];
console.log(combined); // [1, 2, 3, 4, 5, 6]Créer une copie superficielle :
const original = [1, 2, 3];
const copy = [...original];
console.log(copy); // [1, 2, 3]Ajouter des éléments à un tableau :
const numbers = [1, 2, 3];
const moreNumbers = [0, ...numbers, 4];
console.log(moreNumbers); // [0, 1, 2, 3, 4]Passer des éléments de tableau comme arguments de fonction :
function sum(a, b, c) {
return a + b + c;
}
const numbers = [1, 2, 3];
console.log(sum(...numbers)); // 6Essayez vous-même
function mergeArr(arr1, arr2) {
// Écrivez votre code ici
}
Cette leçon comprend un petit quiz. Commencez la leçon pour y répondre et suivre votre progression.
Toutes les leçons de Logique & Flux
1Les chaînes de caractères en profondeur
Fondamentaux des chaînesParcourir les chaînesTemplate LiteralsMéthodes des chaînesRécapitulatif - String Weaver4JSON Partie 2
Itérer sur du JSONJSON imbriquéChaînage optionnel JSONCopie superficielle et profondeRécapitulatif - Magasin de vélosRécapitulatif - Système solaire7Système de gestion de bibliothèque
Présentation du projetAjouter des livres2Tableaux multidimensionnels
Bases des tableaux 2DAccès aux éléments d'un tableau 2DBoucles imbriquées et tableaux 2DRécapitulatif - Tableaux 2DAddition et soustraction de matricesTableaux irréguliers (Jagged Arrays)Tableaux 3D et au-delàModèles courants de tableaux 2DRécapitulatif - Tout sur les tableaux5Les Ensembles - Partie 1
Qu'est-ce qu'un ensemble ?Parcourir les ensemblesAjouter un élémentSupprimer un élémentVérifier si un élément existeTaille et Est videCopier et EffacerRécapitulatif - Les bases des ensembles8Tableaux : Sujets avancés
Déstructuration de TableauxSyntaxe Spread dans les TableauxTableaux creuxRécapitulatif - Atelier sur les Tableaux3JSON Partie 1
Qu'est-ce qu'un JSON ?Vérifier si une clé existeMéthodes d'objetL'opérateur Spread Partie 1L'opérateur Spread Partie 2Supprimer des clésRécapitulatif - Manipuler les clés JSON