Objeto.assign( ) en JavaScript

¿Objetos y constructores de objetos en JavaScript?  
En el vivo mundo de la programación orientada a objetos ya sabemos la importancia de las clases y los objetos pero a diferencia de otros lenguajes de programación, JavaScript no tiene las clases tradicionales como se ve en otros lenguajes. Pero JavaScript tiene objetos y constructores que funcionan principalmente de la misma manera para realizar el mismo tipo de operaciones. 
Los constructores son funciones generales de JavaScript que se utilizan con la palabra clave «nuevo». Los constructores son de dos tipos en JavaScript, es decir, constructores incorporados (array y objeto) y constructores personalizados (definen propiedades y métodos para objetos específicos). 
Los constructores pueden ser útiles cuando necesitamos una forma de crear un «tipo» de objeto que se pueda usar varias veces sin tener que redefinir el objeto cada vez y esto podría lograrse usando la función Object Constructor. Es una convención usar mayúsculas en el nombre de los constructores para distinguirlos de las funciones regulares. 
Por ejemplo, considere el siguiente código:
 

function Automobile(color) {
  this.color=color;
}

var vehicle1 = new Automobile ("red");

La función «Automóvil()» es un constructor de objetos, y sus propiedades y métodos, es decir, «color», se declara dentro de ella con el prefijo «esto». Los objetos definidos usando un constructor de objetos se convierten en instantes usando la palabra clave «nuevo». 
Cuando se llama a new Automobile(), JavaScript hace dos cosas: 
 

  1. Crea un nuevo objeto nuevo (instancia) Automobile() y lo asigna a una variable.
  2. Establece la propiedad del constructor, es decir, el «color» del objeto en Automóvil.

Método Object.assign() 
Entre los métodos constructores de objetos, hay un método Object.assign() que se utiliza para copiar los valores y propiedades de uno o más objetos de origen a un objeto de destino. Invoca getters y setters ya que usa [[Get]] en el origen y [[Set]] en el destino. Devuelve el objeto de destino que tiene propiedades y valores copiados del objeto de destino. Object.assign() no genera valores de origen nulos o indefinidos. 
Aplicaciones: 
 

  • Object.assign() se usa para clonar un objeto.
  • Object.assign() se usa para fusionar objetos con las mismas propiedades.

Sintaxis: 
 

Object.assign(target, ...sources)

Parámetros utilizados: 
 

  1. destino: Es el objeto de destino al que se deben copiar valores y propiedades.
  2. fuentes: Es el objeto fuente desde el cual se deben copiar valores y propiedades.

Valor devuelto: 
Object.assign() devuelve el objeto de destino.
A continuación se proporcionan ejemplos de la función anterior.
Ejemplos: 
 

Input : var obj1 = { a: 10 };
        var new_obj = Object.assign({}, obj1);
        console.log(new_obj);
Output : Object { a: 10 }

Explanation: Here in this example the properties of object "obj1" i.e. { a: 10 } is copied to the target object "new_obj".

Input : var obj1 = { a: 10 };
        var obj2 = { b: 20 };
        var obj3 = { c: 30 };
        var new_obj = Object.assign(obj1, obj2, obj3);
        console.log(new_obj);
Output : Object { a: 10, b: 20, c: 30 }

Explanation: Here in this example the properties of three source objects "obj1, obj2, obj3" are copied to the target object "new_obj". The value of any pre-existing key-value pair that existed in the previous object will be over-written.

For example: obj1.b which has value of 10 will now be overwritten with obj2.b which has a value of 20

Input : var obj1 = { a: 10, b: 10, c: 10 };
        var obj2 = { b: 20, c: 20 };
        var obj3 = { c: 30 };
        var new_obj = Object.assign({}, obj1, obj2, obj3);
        console.log(new_obj); 
Output : Object { a: 10, b: 20, c: 30 }

Explanation: Here in this example the properties of three source objects "obj1, obj2, obj3" are copied to the target object "new_obj"  and the target object gets the overwritten values.

Los códigos para la función anterior se proporcionan a continuación.
Código 1:
 

html

<script>
<!-- creating an object constructor and assigning values to it -->
const obj1 = { a: 1 };
 
<!--creating a target object and copying values and properties to it using object.assign() method -->
<!--Here, obj1 is the source object-->
const new_obj = Object.assign({}, obj1);
 
<!-- Displaying the target object -->
console.log(new_obj);
</script>

PRODUCCIÓN : 
 

Object { a: 1 }

Código 2:
 

html

<script>
<!-- creating 3 object constructors and assigning values to it -->
var obj1 = { a: 10 };
var obj2 = { b: 20 };
var obj3 = { c: 30 };
 
<!--creating a target object and copying values and properties to it using object.assign() method -->
var new_obj = Object.assign({}, obj1, obj2, obj3);
 
<!-- Displaying the target object -->
console.log(new_obj);
</script>

PRODUCCIÓN : 
 

Object { a: 10, b: 20, c: 30 }

Código 3:
 

html

<script>
 
<!-- creating 3 object constructors and assigning values to it -->
var obj1 = { a: 10, b: 10, c: 10 };
var obj2 = { b: 20, c: 20 };
var obj3 = { c: 30 };
 
<!--creating a target object and copying values and properties to it using object.assign() method -->
var new_obj = Object.assign({}, obj1, obj2, obj3);
 
<!-- Displaying the target object -->
console.log(new_obj);
</script>

PRODUCCIÓN : 
 

Object { a: 10, b: 20, c: 30 }

Explicación: en el código anterior, las propiedades se sobrescriben con otros objetos que tienen las mismas propiedades más adelante en el mismo orden de parámetros.
Errores y excepciones 
 

  • Se genera un TypeError si no se puede escribir en la propiedad.
  • El objeto de destino solo se puede cambiar si las propiedades se agregan antes de que se genere el error.
  • Object.assign() no genera valores de origen nulos o indefinidos.

Navegadores compatibles:

  • Google Chrome 6.0 y superior
  • Internet Explorer 9.0 y superior
  • Mozilla 4.0 y superior
  • Ópera 11.1 y superior
  • Safari 5.0 y superior

Publicación traducida automáticamente

Artículo escrito por Shubrodeep Banerjee 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 *