¿Cómo clonar un objeto JavaScript?

La clonación de un objeto de JavaScript es una tarea que se usa principalmente porque no queremos crear el mismo objeto si el mismo objeto ya existe.
Hay pocas formas.

Al iterar a través de cada propiedad y copiarlas en un nuevo objeto.
El uso del método JSON como objeto de origen DEBE ser seguro para JSON. Por lo tanto, necesita un manejo de excepciones para mantenerlo seguro en caso de que el objeto fuente no se pueda convertir a JSON.
object.assign Este método solo hace una copia superficial. Significa que las propiedades anidadas todavía se copian por referencia.

Veámoslos uno por uno con la ayuda de los ejemplos.
Ejemplo 1: el primero es iterar a través de las propiedades del objeto de origen y copiarlas todas una por una en el objeto de destino. Es bastante simple pero no se usa muy a menudo.

<!DOCTYPE html>  
<html>  
    <head> 
        <title></title>
    </head> 
        
    <body style = "text-align:center;">  
        <h1 style = "color:green;" >  
            GeeksForGeeks  
        </h1>  
        <p id="demo2">sourceObject = {a:1, b:2, c:3};</p>    
        <button onClick="fun()">click
        </button>
       <p id="demo"></p> 
        <script>
        function fun(){
          const sourceObject = {a:1, b:2, c:3};
          let tO = {};
            for (let prop in sourceObject) {
              if (sourceObject.hasOwnProperty(prop)) {
                tO[prop] = sourceObject[prop];
              }
            }
           document.getElementById("demo").innerHTML = 
             "targetObject a = "+tO.a+", b = " + tO.b+", c = "+tO.c;
          }
        </script> 
    </body>  
</html>

Producción:

Antes de hacer clic en el botón:
Después de hacer clic en el botón:

Ejemplo 2:

<!DOCTYPE html>  
<html>  
    <head> 
        <title></title>
    </head> 
    <body style = "text-align:center;">  
        <h1 style = "color:green;" >  
            GeeksForGeeks  
        </h1>  
        <p id="demo2">sourceObject = {a:1, b:2, c:3};</p>    
        <button onClick="fun()">click
        </button>
       <p id="demo"></p>
        <script>
        function fun(){
          const sourceObject = {a:1, b:2, c:3};
          let tO = {};
          tO = JSON.parse(JSON.stringify(sourceObject));
          document.getElementById("demo").innerHTML = 
           "targetObject a = "+tO.a+", b = " + tO.b+", c = "+tO.c;
          }
        </script> 
    </body>  
</html>

Producción:

Antes de hacer clic en el botón:
Después de hacer clic en el botón:

Ejemplo 3:

Object.assign

<!DOCTYPE html>  
<html>  
    <head> 
        <title></title>
    </head> 
    <body style = "text-align:center;">  
    
        <h1 style = "color:green;" >  
            GeeksForGeeks  
        </h1>  
        <p id="demo2">sourceObject = {a:1, b:2, c:3};</p>    
        <button onClick="fun()">click
        </button>
       <p id="demo"></p> 
  
        <script>
        function fun(){
          const sourceObject = {a:1, b:2, c:3};
          let tO = {};
          tO = Object.assign({}, sourceObject);
          document.getElementById("demo").innerHTML = 
            "targetObject a = "+tO.a+", b = " + tO.b+", c = "+tO.c;
          }
        </script> 
    </body>  
</html>

Producción:

Antes de hacer clic en el botón:
Después de hacer clic en el botón:

Publicación traducida automáticamente

Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta