LabEx
EntrerRejoindre

Clonage profond d'objet

Beginner

This tutorial is from open-source community. Access the source code

Introduction

Dans ce laboratoire, nous allons apprendre à créer un clonage profond d'un objet en JavaScript. Nous utiliserons la récursivité pour cloner des primitifs, des tableaux et des objets tout en excluant les instances de classe. À la fin de ce laboratoire, vous serez capable de créer une copie complète d'un objet sans modifier l'original.

Ceci est un Guided Lab, qui fournit des instructions étape par étape pour vous aider à apprendre et à pratiquer. Suivez attentivement les instructions pour compléter chaque étape et acquérir une expérience pratique. Les données historiques montrent que c'est un laboratoire de niveau débutant avec un taux de réussite de 92%. Il a reçu un taux d'avis positifs de 100% de la part des apprenants.

Instructions pour cloner profondément un objet

Pour cloner profondément un objet, suivez ces étapes :

  1. Créez une nouvelle instance de terminal/SSH et tapez node pour commencer à pratiquer la programmation.
  2. Utilisez la récursivité pour cloner des primitifs, des tableaux et des objets, en excluant les instances de classe.
  3. Vérifiez si l'objet passé est null et, si c'est le cas, renvoyez null.
  4. Utilisez Object.assign() et un objet vide ({}) pour créer un clonage superficiel de l'original.
  5. Utilisez Object.keys() et Array.prototype.forEach() pour déterminer quelles paires clé-valeur doivent être clonées profondément.
  6. Si l'objet est un Array, définissez la length du clone sur celle de l'original et utilisez Array.from() pour créer un clone.
  7. Utilisez le code suivant pour implémenter le clonage profond :
const deepClone = (obj) => {
  if (obj === null) return null;
  let clone = Object.assign({}, obj);
  Object.keys(clone).forEach(
    (key) =>
      (clone[key] =
        typeof obj[key] === "object" ? deepClone(obj[key]) : obj[key])
  );
  if (Array.isArray(obj)) {
    clone.length = obj.length;
    return Array.from(clone);
  }
  return clone;
};

Utilisez le code suivant pour tester votre fonction de clonage profond :

const a = { foo: "bar", obj: { a: 1, b: 2 } };
const b = deepClone(a); // a!== b, a.obj!== b.obj

Résumé

Félicitations ! Vous avez terminé le laboratoire sur le clonage profond d'objets. Vous pouvez pratiquer d'autres laboratoires sur LabEx pour améliorer vos compétences.