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, nous avons deux types de copies :
- Copie superficielle - copie uniquement le premier niveau
- Copie profonde - copie tous les niveaux imbriqués
Méthodes de copie superficielle :
Utilisation de l’opérateur de décomposition :
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); // 3Comprendre les méthodes JSON et la copie profonde
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 (complètement indépendant)
Défi
FacileCré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 leurs noms et leurs prix. Votre tâche consiste à :
- Analyser la chaîne JSON pour la transformer en objet JavaScript
- Créer DEUX paniers distincts à partir de celui-ci
- Dans le deuxième panier :
- Ajouter une propriété
discountedà chaque élément, définie sur false - Appliquer une remise de 10 % à tous les éléments dont le
priceest supérieur à 50 - Définir 'discounted' sur true pour les éléments ayant bénéficié de la remise
- Ajouter une propriété
- Renvoyer un tableau contenant les deux paniers
Essayez vous-même
function processCart(jsonString) {
// Écrivez le code ici
}
// N'écrivez rien en dehors de la fonction
Testez-vousCette 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 livres
Recherche par titreFiltrer par genreMarquer comme lu2Tableaux 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 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 JSONEntraînez-vous par vous-même : Compilateur JavaScript en ligne