Dominando la Clonación Profunda de Objetos en JavaScript

Introducción

En este laboratorio, aprenderemos cómo crear una clonación profunda de un objeto en JavaScript. Usaremos la recursión para clonar primitivos, arrays y objetos, excluyendo las instancias de clase. Al final de este laboratorio, serás capaz de crear una copia completa de un objeto sin alterar el original.

Este es un Guided Lab, que proporciona instrucciones paso a paso para ayudarte a aprender y practicar. Sigue las instrucciones cuidadosamente para completar cada paso y obtener experiencia práctica. Los datos históricos muestran que este es un laboratorio de nivel principiante con una tasa de finalización del 92%. Ha recibido una tasa de reseñas positivas del 100% por parte de los estudiantes.

Instrucciones para clonar profundamente un objeto

Para clonar profundamente un objeto, siga estos pasos:

Cree una nueva instancia de terminal/SSH y escriba node para comenzar a practicar la codificación.
Utilice la recursión para clonar primitivos, arrays y objetos, excluyendo las instancias de clase.
Verifique si el objeto pasado es null y, si es así, devuelva null.
Utilice Object.assign() y un objeto vacío ({}) para crear una clonación superficial del original.
Utilice Object.keys() y Array.prototype.forEach() para determinar qué pares clave-valor deben ser clonados profundamente.
Si el objeto es un Array, establezca la length del clone en la del original y utilice Array.from() para crear un clon.
Utilice el siguiente código para implementar la clonación profunda:

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;
};

Utilice el siguiente código para probar su función de clonación profunda:

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

Resumen

¡Felicitaciones! Has completado el laboratorio de Clonación Profunda de Objetos. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.