0Pricing
JavaScript Academy · Leçon

Clonage et fusion — opérateur spread et Object.assign

Clonez et fusionnez des objets ou des tableaux avec l’opérateur spread et Object.assign ; comprenez la copie superficielle et l’ordre de remplacement

Clonage et fusion — opérateur spread et Object.assign 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 : cloner et fusionner des objets et des tableaux en toute sécurité.

  • Décomposition pour cloner ou fusionner
  • Object.assign
  • Ordre de remplacement
  • Limite des copies superficielles
Clonage et fusion — opérateur spread et Object.assign — illustration 1

Décomposition : cloner un objet

Utilisez {...obj} pour créer une copie superficielle. Modifier le clone ne change pas les propriétés de premier niveau de l'original.

// Shallow clone with object spread
const user = { name: "Ayla", level: 1 };
const clone = { ...user };

clone.level = 2;

console.log("Original:", user);
console.log("Clone:", clone);
Clonage et fusion — opérateur spread et Object.assign — illustration 2

Object.assign : cloner

Object.assign({}, obj) crée également une copie superficielle. Pour éviter de modifier la source, affectez les propriétés dans un objet vide.

// Shallow clone with Object.assign
const settings = { theme: "dark", compact: false };
const copy = Object.assign({}, settings);

copy.compact = true;

console.log("Settings:", settings);
console.log("Copy:", copy);
Clonage et fusion — opérateur spread et Object.assign — illustration 3

Fusionner : l'ordre compte

La fusion dépend de l'ordre : les sources ultérieures remplacent les clés précédentes (b devient 9 ici).

// Merge: later keys overwrite earlier ones
const base = { a: 1, b: 2 };
const extra = { b: 9, c: 3 };

const mergedSpread = { ...base, ...extra };
const mergedAssign = Object.assign({}, base, extra);

console.log("Spread merged:", mergedSpread);
console.log("Assign merged:", mergedAssign);
Clonage et fusion — opérateur spread et Object.assign — illustration 4

Décomposition de tableau : cloner et fusionner

[...arr] clone un tableau. Combinez des tableaux avec [...a, ...b] sans les modifier.

// Arrays: clone and merge with spread
const nums = [1, 2, 3];
const cloneNums = [...nums];

const more = [4, 5];
const mergedNums = [...nums, ...more];

console.log("nums:", nums);
console.log("clone:", cloneNums);
console.log("merged:", mergedNums);
Clonage et fusion — opérateur spread et Object.assign — illustration 5

Copie superficielle ou profonde

Copie superficielle : les objets et tableaux imbriqués sont partagés. Pour les structures profondes, copiez explicitement les niveaux internes.

// Shallow copy caveat: nested objects are shared
const original = { user: { name: "Mina" }, active: true };
const shallow = { ...original };

// Mutate nested object
shallow.user.name = "Lena";

console.log("Original:", original);
console.log("Shallow:", shallow);
Clonage et fusion — opérateur spread et Object.assign — illustration 6

Quiz sur le clonage

Vérification rapide : créer un clone superficiel sans modification.

Clonage et fusion — opérateur spread et Object.assign — illustration 7

Récapitulatif

Récapitulatif : clonez avec la décomposition ou Object.assign dans un objet vide, fusionnez en plaçant les sources ultérieures en dernier et retenez qu'il s'agit de copies superficielles.

Clonage et fusion — opérateur spread et Object.assign — illustration 8

Questions Fréquemment Posées

La leçon « Clonage et fusion — opérateur spread et Object.assign » est-elle gratuite ?

Oui — le texte complet de « Clonage et fusion — opérateur spread et Object.assign » 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 « Clonage et fusion — opérateur spread et Object.assign » ?

Clonez et fusionnez des objets ou des tableaux avec l’opérateur spread et Object.assign ; comprenez la copie superficielle et l’ordre de remplacement 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 « Clonage et fusion — opérateur spread et Object.assign » ?

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. CRUD des tableaux, itération ; bases des objets et accès
  2. Clonage et fusion — opérateur spread et Object.assign
← Retour à JavaScript Academy