Copia superficial y profunda
Parte de la sección Lógica y Flujo del Journey de JavaScript de Coddy. Lección 25 de 65.
Al copiar objetos, tenemos dos tipos de copias:
- Copia superficial: copia solo el primer nivel
- Copia profunda: copia todos los niveles anidados
Métodos de copia superficial:
Usando el operador spread:
const original = { a: 1, b: { x: 2 } };
const spreadCopy = { ...original };Uso de Object.assign(), que crea un nuevo objeto copiando las propiedades del objeto de origen al objeto de destino:
const assignCopy = Object.assign({}, original);Problema con la copia superficial:
original.b.x = 3;
console.log(spreadCopy.b.x); // 3
// (los objetos anidados comparten la referencia)
console.log(assignCopy.b.x); // 3Comprender los métodos de JSON y la copia profunda
JSON.stringify() convierte un objeto de JavaScript en una cadena JSON:
const obj = { name: "John", age: 30 };
const jsonString = JSON.stringify(obj);
console.log(jsonString); // "{"name":"John","age":30}"JSON.parse() convierte una cadena JSON de nuevo en un objeto de JavaScript:
const backToObject = JSON.parse(jsonString);
console.log(backToObject); // { name: "John", age: 30 }Copia profunda usando 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 (completamente independiente)
Desafío
FácilCrea una función llamada processCart que reciba una cadena JSON que represente un carrito de compras. El carrito contiene un arreglo de productos con nombres y precios. Tu tarea es:
- Analizar la cadena JSON para convertirla en un objeto JavaScript
- Crear DOS carritos separados a partir de ella
- En el segundo carrito:
- Agregar una propiedad
discounteda cada elemento, establecida en false - Aplicar un descuento del 10 % a todos los elementos que tengan un
pricemayor que 50 - Establecer 'discounted' en true para los elementos que recibieron el descuento
- Agregar una propiedad
- Devolver un arreglo que contenga ambos carritos
Pruébalo tú mismo
function processCart(jsonString) {
// Escribe el código aquí
}
// No escribas nada fuera de la función
Ponte a pruebaEsta lección incluye un breve cuestionario. Empieza la lección para responderlo y registrar tu progreso.
Todas las lecciones de Lógica y Flujo
1Strings en profundidad
Fundamentos de stringsIterar sobre stringsTemplate LiteralsMétodos de stringsResumen - String Weaver4JSON Parte 2
Iterar sobre JSONJSON anidadoEncadenamiento opcional en JSONCopia superficial y profundaResumen - Tienda de bicicletasResumen - Sistema solar7Sistema de Gestión de Biblioteca
Descripción general del proyectoAñadir libros
Buscar por títuloFiltrar por géneroMarcar como leído10Gestionar el sistema del festival
Descripción general del proyectoAñadir películas y sedesAñadir proyeccionesComprar entradasCalificar películasCancelar proyecciones2Arreglos multidimensionales
Conceptos básicos de arreglos 2DAcceso a elementos de arreglos 2DBucles anidados con arreglos 2DResumen - Arreglos 2DSuma y resta de matricesArreglos irregulares (Jagged Arrays)Arreglos 3D y más alláPatrones comunes en arreglos 2DResumen - Todo sobre arreglos5Conjuntos Parte 1
¿Qué es un conjunto?Iterar sobre conjuntosAñadir un elementoEliminar un elementoComprobar si un elemento existeTamaño y Is EmptyCopy y ClearResumen - Conceptos básicos de conjuntos8Temas interesantes de Arrays
Desestructuración de ArraysSintaxis Spread en ArraysArrays dispersosResumen - Taller de Arrays3JSON Parte 1
¿Qué es un JSON?Comprobar si existe una claveMétodos de objetoEl Spread Operator Parte 1El Spread Operator Parte 2Eliminar clavesResumen - Manipular claves de JSONPractica por tu cuenta: Compilador de JavaScript online