Copie superficielle et profonde

Fait partie de la section Logique & Flux du Journey JavaScript de Coddy — leçon 25 sur 65.

Lors de la copie d'objets, il existe deux types de copies :

Copie superficielle (Shallow Copy) - ne copie que le premier niveau
Copie profonde (Deep Copy) - copie tous les niveaux imbriqués

Méthodes de copie superficielle :

Utilisation de l'opérateur spread :

const original = { a: 1, b: { x: 2 } };
const spreadCopy = { ...original };

Utilisation de Object.assign() qui crée un nouvel objet en copiant les propriétés de l'objet source vers l'objet cible :

const assignCopy = Object.assign({}, original);

Problème avec la copie superficielle :

original.b.x = 3;
console.log(spreadCopy.b.x); // 3
// (les objets imbriqués partagent la référence)

console.log(assignCopy.b.x); // 3

Comprendre les méthodes JSON et la copie profonde

JSON.stringify() convertit un objet JavaScript en une chaîne JSON :

const obj = { name: "John", age: 30 };
const jsonString = JSON.stringify(obj);
console.log(jsonString); // "{"name":"John","age":30}"

JSON.parse() convertit une chaîne JSON en un objet JavaScript :

const backToObject = JSON.parse(jsonString);
console.log(backToObject); // { name: "John", age: 30 }

Copie profonde en utilisant JSON :

const original = { a: 1, b: { x: 2 } };
const deepCopy = JSON.parse(JSON.stringify(original));

original.b.x = 3;
console.log(deepCopy.b.x); // 2 (complètement indépendant)

Défi

Facile

Créez une fonction nommée processCart qui prend une chaîne JSON représentant un panier d'achat. Le panier contient un tableau de produits avec des noms et des prix. Votre tâche consiste à :

Analyser la chaîne JSON en un objet JavaScript
Créer DEUX paniers distincts à partir de celle-ci
Dans le deuxième panier :
1. Ajouter une propriété discounted à chaque article définie sur false
2. Appliquer une remise de 10 % à tous les articles dont le price est supérieur à 50
3. Définir 'discounted' sur true pour les articles ayant bénéficié de la remise
Retourner un tableau contenant les deux paniers

Aide-mémoire

Lors de la copie d'objets, il existe deux types de copies :

Copie superficielle (Shallow Copy) - ne copie que le premier niveau
Copie profonde (Deep Copy) - copie tous les niveaux imbriqués

Méthodes de copie superficielle :

Utilisation de l'opérateur de décomposition (spread operator) :

const original = { a: 1, b: { x: 2 } };
const spreadCopy = { ...original };

Utilisation de Object.assign() :

const assignCopy = Object.assign({}, original);

Problème avec la copie superficielle :

original.b.x = 3;
console.log(spreadCopy.b.x); // 3 (nested objects share reference)

Méthodes JSON :

JSON.stringify() convertit un objet JavaScript en chaîne JSON :

const obj = { name: "John", age: 30 };
const jsonString = JSON.stringify(obj);
console.log(jsonString); // "{"name":"John","age":30}"

JSON.parse() convertit une chaîne JSON en objet JavaScript :

const backToObject = JSON.parse(jsonString);
console.log(backToObject); // { name: "John", age: 30 }

Copie profonde à l'aide de JSON :

const original = { a: 1, b: { x: 2 } };
const deepCopy = JSON.parse(JSON.stringify(original));

original.b.x = 3;
console.log(deepCopy.b.x); // 2 (completely independent)

Essayez vous-même

function processCart(jsonString) {
    // Écrivez le code ici
}
// N'écrivez rien en dehors de la fonction

Testez-vous

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înes Parcourir les chaînes Template Literals Méthodes des chaînes Récapitulatif - String Weaver

4JSON Partie 2

Itérer sur du JSON JSON imbriqué Chaînage optionnel JSONCopie superficielle et profondeRécapitulatif - Magasin de vélos Récapitulatif - Système solaire

7Système de gestion de bibliothèque

Présentation du projet Ajouter des livres

Recherche par titre

Filtrer par genre

Marquer comme lu

10Gérer le système du festival

Présentation du projet Ajouter des films et des lieux

Ajouter une projection

Acheter des billets

Noter les films

Annuler des projections