Mesclar objetos em Javasript

1. Use a função object.assign() para mesclar objetos em JavaScript
2. Use o operador Spread para mesclar objetos em JavaScript
3. Use a função array.reduce() para mesclar objetos em JavaScript
4. Use a função jquery.extend() para mesclar objetos em JavaScript
5. Use uma função definida pelo usuário para mesclar objetos em JavaScript

Um objeto é um tipo de dados não primitivo que nos permite armazenar dados em pares chave-valor.

Neste tutorial, mesclaremos dois ou mais objetos em JavaScript usando métodos diferentes.

Use a função object.assign() para mesclar objetos em JavaScript

Em JavaScript, o método assign() pode ler iterativamente as propriedades de um ou mais de um objeto para um objeto de destino. Ele retorna o objeto de destino. Podemos passar os dois objetos com um objeto vazio para mesclá-los.

Verifique o código abaixo.

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

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

Resultado:

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

Use o operador Spread para mesclar objetos em JavaScript

Em JavaScript, o operador spread (…) pode desempacotar todos os elementos de um array. Também podemos usá-lo para mesclar objetos.

Consulte o código a seguir sobre como usar esse método.

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

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

Resultado:

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

Use a função array.reduce() para mesclar objetos em JavaScript

Para isso, usamos a função array.reduce(), que é usada para implementar uma função redutora (fornecida por você) em cada elemento de um array. Ele retorna um único valor de saída.

Implementamos isso no seguinte trecho 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);

Resultado:

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

Use a função jquery.extend() para mesclar objetos em JavaScript

jQuery é uma biblioteca de JavaScript leve e muito rápida. Isso simplifica o uso de JavaScript.

O extend() é um método jQuery usado para mesclar dois ou mais objetos em um objeto. Ele retorna um objeto.
Por exemplo,

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

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

jQuery.extend(obj1, obj2);

Resultado:

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

Use uma função definida pelo usuário para mesclar objetos em JavaScript

Neste, criamos nossa própria função para retornar um objeto mesclado. Ele usa as propriedades dos dois objetos são fundidos em um terceiro objeto.

Verifique o código abaixo.

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);

Resultado:

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