Fusionar objetos en Javasript

1. Utilice la función object.assign() para fusionar objetos en JavaScript
2. Utilice el operador de propagación para fusionar objetos en JavaScript
3. Utilice la función array.reduce() para fusionar objetos en JavaScript
4. Utilice la función jquery.extend() para fusionar objetos en JavaScript
5. Utilice una función definida por el usuario para fusionar objetos en JavaScript

Un objeto es un tipo de datos no primitivo que nos permite almacenar datos en pares clave-valor.

En este tutorial, fusionaremos dos o más objetos en JavaScript usando diferentes métodos.

Utilice la función object.assign() para fusionar objetos en JavaScript

En JavaScript, el método assign() puede leer iterativamente propiedades de uno o más de un objeto a un objeto de destino. Devuelve el objeto de destino. Podemos pasar los dos objetos con un objeto vacío para fusionarlos.

Verifique el código a continuación.

var obj1 = {
  fruits: ['Banana', 'Mango'],
  vegetables: ['Potato', 'Broccoli'],
};
var obj2 = {
  store: 'Walmart',
};

var obj3 = Object.assign({}, obj1, obj2);
console.log(obj3);

Producción :

{fruits: ["Banana", "Mango"], vegetables: ["Potato", "Broccoli"], store: "Walmart"}

Utilice el operador de propagación para fusionar objetos en JavaScript

En JavaScript, el operador de propagación (…) puede descomprimir todos los elementos de un array. También podemos usarlo para fusionar objetos.

Consulte el siguiente código sobre cómo utilizar este método.

var obj1 = {
  fruits: ['Banana', 'Mango'],
  vegetables: ['Potato', 'Broccoli'],
};
var obj2 = {
  store: 'Walmart',
};

var obj3 = {...obj1, ...obj2};
console.log(obj3);

Producción :

{fruits: ["Banana", "Mango"], vegetables: ["Potato", "Broccoli"], store: "Walmart"}

Utilice la función array.reduce() para fusionar objetos en JavaScript

En esto, hemos utilizado la función array.reduce(), que se utiliza para implementar una función reductora (que usted proporciona) en cada elemento de un array. Devuelve un solo valor de salida.

Implementamos esto en el siguiente fragmento de código.

var obj1 = {
  fruits: ['Banana', 'Mango'],
  vegetables: ['Potato', 'Broccoli'],
};
var obj2 = {
  store: 'Walmart',
};

function merge(...arr) {
  return arr.reduce((acc, val) => {
    return {...acc, ...val};
  }, {});
}

var obj3 = merge(obj1, obj2);
console.log(obj3);

Producción :

{fruits: ["Banana", "Mango"], vegetables: ["Potato", "Broccoli"], store: "Walmart"}

Utilice la función jquery.extend() para fusionar objetos en JavaScript

jQuery es una biblioteca de JavaScript que es ligera y muy rápida. Simplifica el uso de JavaScript.

El extend() es un método jQuery usado para fusionar dos o más objetos en un objeto. Devuelve un objeto.
Por ejemplo,

var obj1 = {
  fruits: ['Banana', 'Mango'],
  vegetables: ['Potato', 'Broccoli'],
};

var obj2 = {
  store: 'Walmart',
};

jQuery.extend(obj1, obj2);

Producción :

{fruits: ["Banana", "Mango"], vegetables: ["Potato", "Broccoli"], store: "Walmart"}

Utilice una función definida por el usuario para fusionar objetos en JavaScript

En esto, creamos nuestra propia función para devolver un objeto combinado. Utiliza las propiedades de los dos objetos que se fusionan en un tercer objeto.

Verifique el código a continuación.

var obj1 = {
  fruits: ['Banana', 'Mango'],
  vegetables: ['Potato', 'Broccoli'],
};

var obj2 = {
  store: 'Walmart',
};

function merge_options(obj1, obj2) {
  var obj3 = {};
  for (var key in obj1) {
    obj3[key] = obj1[key];
  }
  for (var key in obj2) {
    obj3[key] = obj2[key];
  }
  return obj3;
};

merge_options(obj1, obj2);

Producción :

{fruits: ["Banana", "Mango"], vegetables: ["Potato", "Broccoli"], store: "Walmart"}