0Pricing
JavaScript Academy · Leçon

Rest et spread — tableaux et objets idiomatiques

Rassemblez les valeurs ou propriétés restantes, clonez et fusionnez avec spread, et évitez les mutations cachées grâce à des modèles simples

Rest et spread — tableaux et objets idiomatiques est une leçon JavaScript Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 2. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage JavaScript Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours JavaScript Academy comprend 2 leçons au total.

Introduction

Objectif : utiliser le reste pour rassembler les éléments supplémentaires et la décomposition pour copier ou fusionner.

  • Décomposition de tableaux et d'objets
  • Reste d'un tableau (tête et queue)
  • Reste d'un objet (exclure certaines clés)
  • Modification ou copie
Rest et spread — tableaux et objets idiomatiques — illustration 1

Bases de la décomposition de tableaux

[...arr] copie un tableau ; combinez des tableaux en les décomposant dans un nouveau tableau.

// Array spread creates a shallow copy and merges arrays
const a = [1, 2];
const b = [3, 4];

const clone = [...a];
const merged = [...a, ...b];

console.log("a:", a);
console.log("clone:", clone);
console.log("merged:", merged);
Rest et spread — tableaux et objets idiomatiques — illustration 2

Motif de reste d'un tableau

L'élément de reste (…tail) rassemble les éléments restants dans un nouveau tableau.

// Array rest collects the remaining items
const nums = [10, 20, 30, 40];

const [head, ...tail] = nums;

console.log("head:", head);
console.log("tail:", tail);
Rest et spread — tableaux et objets idiomatiques — illustration 3

Bases de la décomposition d'objets

La fusion d'objets dépend de l'ordre : les décompositions ultérieures remplacent les clés précédentes.

// Object spread copies and merges; later keys win
const base = { theme: "light", compact: false };
const override = { compact: true };

const copy = { ...base };
const merged = { ...base, ...override };

console.log("copy:", copy);
console.log("merged:", merged);
Rest et spread — tableaux et objets idiomatiques — illustration 4

Motif de reste d'un objet

Utilisez { a, ...rest } pour extraire quelques propriétés et conserver toutes les autres ensemble.

// Object rest collects remaining properties
const user = { id: 7, name: "Ayla", role: "admin" };

const { id, ...publicInfo } = user;

console.log("id:", id);
console.log("publicInfo:", publicInfo);
Rest et spread — tableaux et objets idiomatiques — illustration 5

Éviter les modifications grâce à la copie

Créez un nouvel objet lorsque vous modifiez des valeurs ; c'est plus clair et plus sûr que de modifier des données partagées.

// Copy instead of mutating original data
const settings = { sound: true, volume: 5 };

// Mutating version (avoid in shared state)
// settings.volume = 6;

// Non-mutating: create an updated copy
const updated = { ...settings, volume: 6 };

console.log("settings:", settings);
console.log("updated:", updated);
Rest et spread — tableaux et objets idiomatiques — illustration 6

Quiz sur le reste d'un objet

Vérification rapide : reste d'un objet.

Rest et spread — tableaux et objets idiomatiques — illustration 7

Récapitulatif

Récapitulatif : la décomposition copie ou fusionne les tableaux et les objets ; le reste rassemble les éléments restants. Préférez la copie à la modification afin de rendre les changements explicites.

Rest et spread — tableaux et objets idiomatiques — illustration 8

Questions Fréquemment Posées

La leçon « Rest et spread — tableaux et objets idiomatiques » est-elle gratuite ?

Oui — le texte complet de « Rest et spread — tableaux et objets idiomatiques » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours JavaScript Academy, passe à CoddyKit PRO. Le cours JavaScript Academy comprend 2 leçons au total.

Qu'est-ce que j'apprendrai dans « Rest et spread — tableaux et objets idiomatiques » ?

Rassemblez les valeurs ou propriétés restantes, clonez et fusionnez avec spread, et évitez les mutations cachées grâce à des modèles simples Tu pratiques JavaScript Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer JavaScript Academy ?

Aucune expérience préalable n'est requise. JavaScript Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 2.

Combien de temps prend la leçon « Rest et spread — tableaux et objets idiomatiques » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon JavaScript Academy ?

Oui. Chaque leçon JavaScript Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. Notions de base de la déstructuration des tableaux et des objets
  2. Rest et spread — tableaux et objets idiomatiques
← Retour à JavaScript Academy