¿Cómo copiar propiedades de un objeto a otro en ES6?

Las propiedades de un objeto se pueden copiar en otro objeto a través de diferentes métodos. Estos son algunos de esos métodos.  

Object.assign() : al utilizar el método Object.assign(), todas las propiedades enumerables de uno o más objetos de origen se copian en el objeto de destino. Este método devuelve el objeto de destino modificado. Las propiedades del objeto de destino se sobrescriben si tienen la misma clave que las propiedades de los orígenes. Las propiedades de fuentes posteriores sobrescriben las propiedades de fuentes anteriores. Object.assign() solo copia propiedades enumerables y propias de un objeto a otro. Como resultado, invoca captadores y definidores en el origen y el destino. Como resultado, asigna propiedades en lugar de copiar o definir otras nuevas. Las fuentes de fusión pueden contener captadores, por lo que no es adecuado para fusionar nuevas propiedades en prototipos.

Sintaxis:

Object.assign(target, ...sources)

Ejemplo:

JavaScript

<script>
    let obj1 = { a: 1, b: 2 };
    let obj2 = { a: 3, c: 4 };
    let obj3 = { b: 5, d: 6 };
    
    // Target object itself is changed.
    let targetobj1 = Object.assign(obj1, obj2);
    
    // Here the obj1 and targetobj1 both are same
    console.log(obj1);
    console.log(targetobj1);
    
    // Passing multiple objects and copy
    // to the target obj
    let targetobj2 = Object.assign(obj1, obj2, obj3);
    console.log(obj1);
    console.log(targetobj2);
</script>

Producción:

{
    a: 3,
    b: 2,
    c: 4
}
{
    a: 3,
    b: 2,
    c: 4
}
{
    a: 3,
    b: 5,
    c: 4,
    d: 6
}
{
    a: 3,
    b: 5,
    c: 4,
    d: 6
}

Uso del operador de extensión : una expresión de array o string puede tener una sintaxis extendida (…) para expandirse donde no hay o hay múltiples argumentos (para llamadas a funciones) o elementos (para literales de array), o una expresión de objeto puede expandirse donde no hay o múltiples pares clave-valor (para literales de objeto).

JavaScript

<script>
    let obj1 = { a: 1, b: 2 };
    let obj2 = { a: 3, c: 4 };
    let obj3 = { b: 5, d: 6 };
    
    // (...) is syntax of spread operator
    let targetobj = { ...obj1, ...obj2, ...obj3 };
    console.log(targetobj);
</script>
  

Producción:

{
    a: 3,
    b: 5,
    c: 4,
    d: 6
}

Mediante el bucle for: es necesario iterar sobre la propiedad del objeto de origen (es decir, obj2) y asignar la propiedad con el valor al objeto de destino obj1. Pero este método está limitado a dos objetos si usamos uno para bucle.

JavaScript

<script>
    let obj1 = { a: 1, b: 2 };
    let obj2 = { a: 3, c: 4 };
    for (let key in obj2) {
        obj1[key] = obj2[key];
    }
    console.log(obj1);
</script>

Producción:

{
    a: 3,
    b: 2,
    c: 4
}

Publicación traducida automáticamente

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *