Resumen: En este tutorial, aprenderá a copiar objetos en JavaScript, incluidas la copia superficial y la copia profunda., Para copiar un objeto en JavaScript, tiene tres opciones:

  1. Use el spread (...) sintaxis
  2. Use el Object.assign() método
  3. Use el JSON.stringify() y JSON.parse() methods

lo siguiente ilustra cómo copiar un objeto utilizando los tres métodos anteriores:

ambos spread (...) y Object.assign() realizan una copia superficial mientras que los métodos JSON llevan una copia profunda.

copia Superficial vs, copia profunda

en JavaScript, se usan variables para almacenar valores que pueden ser primitivos o referencias. Cuando realiza una copia de un valor almacenado en una variable, crea una nueva variable con el mismo valor. Para un valor primitivo, simplemente use una asignación simple:

Code language: JavaScript (javascript)

y cuando cambie el valor de la variable copiada, el valor del original permanece igual.

Code language: JavaScript (javascript)

Resultado:

sin Embargo, si utiliza el operador de asignación para un valor de referencia, no se copia el valor., En su lugar, ambas variables harán referencia al mismo objeto en la memoria:

Code language: JavaScript (javascript)

y cuando acceda al objeto a través de la nueva variable (copiedPerson) y cambie el valor de su propiedad (name), cambie el valor de la propiedad del objeto.

Code language: JavaScript (javascript)

salida:

Code language: CSS (css)

una copia profunda significa que el valor de la nueva variable está desconectado de la variable original, mientras que una copia superficial significa que algunos valores todavía están conectados a la variable original.,

ejemplo de copia superficial

considere el siguiente ejemplo:

en este ejemplo:

  • Primero, cree un nuevo objeto llamado person.
  • Segundo, clona el objeto person usando el método Object.assign().
  • En tercer lugar, cambie la información de nombre y dirección del objeto copiedPerson.,

Aquí está la salida:

Sin embargo, cuando muestra los valores del objeto person, encontrará que la información de la dirección cambió pero el nombre:

Code language: JavaScript (javascript)

salida:

La razón es que la dirección es un valor de referencia mientras que el nombre es un valor primitivo. Tanto person como copiedPersonhacen referencia a diferentes objetos, pero estos objetos hacen referencia a los mismos objetos address.,

ejemplo de copia profunda

el siguiente fragmento reemplaza el método Object.assign() por los métodos JSON para llevar una copia profunda del objeto person:

salida

Code language: CSS (css)

en este por ejemplo, todos los valores del objeto copiedPerson están desconectados del objeto original person. En este tutorial, ha aprendido cómo copiar objetos en JavaScript utilizando copia superficial o profunda.

  • ¿Fue útil este tutorial ?
  • YesNo