En JavaScript puedes combinar múltiples objetos de diversas formas. Los métodos más utilizados son el operador spread ...
y la función Object.assign()
.
Cómo copiar objetos con el operador spread
Para empezar utilizaremos el spread operator u operador de propagación para esta tarea, pues el el método más eficiente. Vamos a partir de que tenemos los siguiente objetos:
const marcas1 = {'a': 'Fiat', 'b': 'Seat'};
const marcas2 = {'c': 'Renault'};
const marcas3 = {'d': 'Ford'};
El operador spread se representa por tres puntos ...
y sirve para separar los elementos del interior de los objetos. Para unir los objetos en uno solo tendríamos que hacer lo siguiente:
const marcasFinal = {...marcas1, ...marcas1, ...marcas1};
Si hacemos un console.log(marcasFinal)
tendremos el siguiente resultado:
a: Fiat
b: Seat
c: Renault
d: Ford
El objeto marcasFinal
que hemos obtenido es un nuevo objeto creado con copias de los otros objetos, por lo que podemos modificar los objetos marcas1
, marcas2
y marcas3
sin miedo a que este se vea afectado. Sin embargo, si se incluyen objetos dentro de los objetos marcas1
, marcas2
o marcas3
, no se crearán copias de estos, sino que se copiará su referencia. Es decir, el operador spread ...
solo creará copias de los elementos de nivel superior.
Aquí tienes un enlace al fiddle de ejemplo.
Cómo copiar objetos con Object.assign()
Otra posible forma de copiar objetos consiste en usar la función Object.assign()
, que copiará todas las propiedades de un objeto a otro. En caso de que el objeto al que copias elementos ya contenga propiedades, las propiedades que se copien se agregarán a estas y, en caso de que tengan el mismo nombre, siempre se dará prioridad a las nuevas.
Aquí tienes un ejemplo:
const marcas1 = { a: 'Nissan', b: 'Fiat' };
const marcas2 = { b: 'Mercedes', c: 'Ford' };
Object.assign(marcas1, marcas2);
Si ahora hacemos un console.log
del objeto marcas1
, obtendremos lo siguiente:
a: Nissan
b: Mercedes
c: Ford
Como puedes ver, la propiedad b
del objeto que hemos copiado, cuyo valor es Mercerces
, tiene prioridad.
Aquí tienes un enlace al fiddle de ejemplo.
Y esto ha sido todo.
De mucha ayuda muchas gracias!
unico comentario hay un error en
const marcasFinal = {…marcas1, …marcas1, …marcas1};
deberia ser
const marcasFinal = {…marcas1, …marcas2, …marcas3};
Saludos!
Nah, man, ya te sigo por twitter. Me acabas de salvar la vida, TE QUIERO NENE!