Raggruppa una serie di oggetti in JavaScript
Questo tutorial dimostrerà metodi per raggruppare gli oggetti Javascript in un array.
Come raggruppare una serie di oggetti in JavaScript?
Per raggruppare una serie di oggetti in JavaScript, utilizzare i seguenti metodi:
- Riduci () metodo
- Metodo GroupBy () dalla Biblioteca Lodash
Comprendiamo il funzionamento di questi metodi uno per uno.
Metodo 1: raggruppare un array di oggetti utilizzando il metodo riduttore ()
Il metodo più comunemente usato per raggruppare l'array di oggetti è il "ridurre()" metodo. È invocato con la funzione di call-back. Riduce l'array di oggetti raggruppati per tipo specificato. Il metodo di riduzione () è potente ma un po 'complesso da capire.
Sintassi
Utilizzare la seguente sintassi per il metodo di riduzione () per raggruppare una serie di oggetti:
Ridurre (valore precedente, CurrentValue)Valore di ritorno
Restituisce la somma di tutti gli elementi raggruppati in un array.
Esempio
Crea una matrice di oggetti "vettore"Con proprietà, nomi e categorie:
const array = [nome: "Apple", categoria: "Frutti",
nome: "Orange", categoria: "Colori",
nome: "mango", categoria: "frutti",
nome: "pesca", categoria: "colori",
nome: "Orange", categoria: "Frutti",
nome: "uva", categoria: "frutti",
];
Chiama il "ridurre()"Metodo con la funzione di freccia di call back che raggrupperà gli oggetti in base alla chiave" categoria "e li memorizzerà in una variabile"GroupArrayObject":
const grouparrayobject = array.ridotta ((gruppo, arr) =>const categoria = arr;
gruppo [categoria] = gruppo [categoria] ?? [];
Gruppo [categoria].push (arr);
gruppo di ritorno;
,
);
Stampa l'array risultante sulla console usando "console.tronco d'albero()" metodo:
console.log (GroupArrayObject);Produzione
Dall'uscita sopra, l'array risultante ha due array ridottiColori" E "Frutta". Basta fare clic sulla testa dell'array accanto al nome dell'array ridotto per espanderlo:
Ora l'output mostra due oggetti, "Colori" E "Frutta,"Che contengono 2 e 4 array, rispettivamente.
Metodo 2: raggruppare un array di oggetti usando il metodo GroupBy ()
Un altro metodo per raggruppare una serie di oggetti è il "raggruppa per()" metodo. Il metodo GroupBy () verrà utilizzato nel progetto NPM con "Lodash" biblioteca. È più semplice da capire e prende meno righe di codice.
Sintassi
Seguire la sintassi di seguito per il metodo GroupBy () per raggruppare l'array di oggetti in JavaScript:
_.Groupby (elenco, chiave)Nella sintassi sopra,
- IL "elenco"È una serie di oggetti.
- IL "chiave"È la proprietà degli oggetti con cui gli elementi saranno raggruppati.
Valore di ritorno
Restituisce le più raccolte raggruppate per una determinata chiave.
Esempio
Usa i seguenti comandi per includere la libreria Lodash nel progetto NPM:
$ npm i -g npm$ npm i - -save lodash
Quindi, aggiungi la libreria Lodash nel file JavaScript con la riga seguente:
var _ = requisito ("lodash");Successivamente, usa semplicemente le seguenti righe di codice:
const array = [nome: "Apple", categoria: "Frutti",
nome: "Orange", categoria: "Colori",
nome: "mango", categoria: "frutti",
nome: "pesca", categoria: "colori",
nome: "Orange", categoria: "Frutti",
nome: "uva", categoria: "frutti",
];
Let output = _.GroupBy (Array, "Categoria");
console.registro (output);
In questo frammento di codice:
- Crea un array di oggetti chiamati "array".
- Chiama il "raggruppa per()"Metodo passando una serie di oggetti"vettore"E una chiave"categoria"In esso, che raggruppa tutti gli elementi relativi alle categorie.
Esegui il codice sopra e l'output sarà:
Si può facilmente osservare che gli oggetti sono stati ora raggruppati in base al valore della chiave "categoria".
Conclusione
Per il raggruppamento, una serie di oggetti in JavaScript, usa il “ridurre()Metodo o il "raggruppa per()" metodo. Il metodo di riduzione () è il metodo più comunemente usato per raggruppare una serie di oggetti, mentre il metodo GroupBy () richiede meno codice ed è più facile da capire, ma eseguirà nel progetto NPM con la libreria Lodash. Questo tutorial ha dimostrato i metodi per raggruppare gli oggetti Javascript in un array.