Unisci oggetti in Javasript

1. Usa la funzione object.assign() per unire oggetti in JavaScript
2. Usa l’operatore di diffusione per unire oggetti in JavaScript
3. Usa la funzione array.reduce() per unire oggetti in JavaScript
4. Usa la funzione jquery.extend() per unire oggetti in JavaScript
5. Usa una funzione definita dall’utente per unire oggetti in JavaScript

Un oggetto è un tipo di dati non primitivo che ci consente di memorizzare i dati in coppie chiave-valore.

In questo tutorial uniremo due o più oggetti in JavaScript utilizzando metodi diversi.

Usa la funzione object.assign() per unire oggetti in JavaScript

In JavaScript, il metodo assign() può leggere in modo iterativo le proprietà da uno o più di un oggetto a un oggetto di destinazione. Restituisce l’oggetto di destinazione. Possiamo passare i due oggetti con un oggetto vuoto per unirli.

Controlla il codice qui sotto.

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

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

Produzione:

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

Usa l’operatore di diffusione per unire oggetti in JavaScript

In JavaScript, l’operatore di diffusione (…) può decomprimere tutti gli elementi di un array. Possiamo anche usarlo per unire oggetti.

Vedere il codice seguente su come utilizzare questo metodo.

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

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

Produzione:

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

Usa la funzione array.reduce() per unire oggetti in JavaScript

In questo, abbiamo utilizzato la funzione array.reduce(), che viene utilizzata per implementare una funzione di riduzione (fornita dall’utente) su ciascun elemento in un array. Restituisce un singolo valore di output.

Lo implementiamo nel seguente frammento di codice.

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

Produzione:

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

Usa la funzione jquery.extend() per unire oggetti in JavaScript

jQuery è una libreria di JavaScript leggera e molto veloce. Semplifica l’uso di JavaScript.

L’extend() è un metodo jQuery utilizzato per unire due o più oggetti in un oggetto. Restituisce un oggetto.
Per esempio,

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

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

jQuery.extend(obj1, obj2);

Produzione:

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

Usa una funzione definita dall’utente per unire oggetti in JavaScript

In questo, creiamo la nostra funzione per restituire un oggetto unito. Utilizza le proprietà dei due oggetti vengono uniti in un terzo oggetto.

Controlla il codice qui sotto.

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

Produzione:

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