Articolo originale: https://www.freecodecamp.org/news/javascript-array-of-objects-tutorial-how-to-create-update-and-loop-through-objects-using-js-array-methods/
In media lavoro con i dati di tipo JSON 18 volte a settimana. E ho ancora bisogno di cercare su Google modi specifici per manipolarli quasi ogni volta. E se ci fosse una guida definitiva in grado di darti sempre la risposta?
In questo articolo, ti mostrerò le basi per lavorare con gli array di oggetti in JavaScript.
Se non hai mai lavorato con una struttura JSON, hai lavorato con oggetti JavaScript. Letteralmente JSON sta per JavaScript Object Notation.
Si crea un oggetto semplicemente così:
{
"color": "purple",
"type": "minivan",
"registration": new Date('2012-02-03'),
"capacity": 7
}
Questo oggetto rappresenta un'auto. Ci possono essere auto di molti tipi e colori, ogni oggetto rappresenta quindi un'auto specifica.
Ora, la maggior parte delle volte ottieni dati come questo da un servizio esterno. Ma a volte è necessario creare manualmente oggetti e i loro array. Come ho fatto quando stavo creando questo e-shop:
Considerando che ogni elemento dell'elenco di categorie appare così in HTML:
Non volevo che questo codice venisse ripetuto 12 volte, il che lo renderebbe ingestibile.
Creare un array di oggetti
Ma torniamo alle auto. Diamo un'occhiata a questo gruppo di auto:
Possiamo rappresentarlo come un array in questo modo:
let cars = [
{
"color": "purple",
"type": "minivan",
"registration": new Date('2017-01-03'),
"capacity": 7
},
{
"color": "red",
"type": "station wagon",
"registration": new Date('2018-03-03'),
"capacity": 5
},
{
...
},
...
]
Gli array di oggetti non rimangono sempre le stessi. Abbiamo quasi sempre bisogno di manipolarli. Diamo quindi un'occhiata a come possiamo aggiungere oggetti a un array già esistente.
Aggiungi un nuovo oggetto all'inizio - Array.unshift
Per aggiungere un oggetto nella prima posizione, usa Array.unshift.
let car = {
"color": "red",
"type": "cabrio",
"registration": new Date('2016-05-02'),
"capacity": 2
}
cars.unshift(car);
Aggiungi un nuovo oggetto alla fine - Array.push
Per aggiungere un oggetto nell'ultima posizione, usa Array.push.
let car = {
"color": "red",
"type": "cabrio",
"registration": new Date('2016-05-02'),
"capacity": 2
}
cars.push(car);
Aggiungi un nuovo oggetto nel mezzo - Array.splice
Per aggiungere un oggetto nel mezzo, usa Array.splice. Questa funzione è molto utile in quanto può anche rimuovere oggetti. Attenzione ai suoi parametri:
Array.splice(
{indice dove iniziare},
{quanti elementi rimuovere},
{elementi da aggiungere}
);
Quindi se vogliamo aggiungere la Volkswagen Cabrio rossa in quinta posizione, useremo:
let car = {
"color": "red",
"type": "cabrio",
"registration": new Date('2016-05-02'),
"capacity": 2
}
cars.splice(4, 0, car);
Iterare attraverso un array di oggetti
A questo punto permettimi di farti una domanda: perché vuoi iterare su un array di oggetti? Il motivo per cui lo chiedo è che il looping non è quasi mai la causa principale di ciò che vogliamo ottenere.
JavaScript fornisce molte funzioni che possono risolvere il tuo problema senza implementare effettivamente la logica in un ciclo generico. Diamo un'occhiata.
Trovare un oggetto in un array in base ai suoi valori - Array.find
Diciamo che vogliamo trovare un'auto rossa. Possiamo usare la funzione Array.find.
let car = cars.find(car => car.color === "red");
Questa funzione restituisce il primo elemento corrispondente:
console.log(car);
// output:
// {
// color: 'red',
// type: 'station wagon',
// registration: 'Sat Mar 03 2018 01:00:00 GMT+0100 (GMT+01:00)',
// capacity: 5
// }
È anche possibile cercare più valori:
let car = cars.find(car => car.color === "red" && car.type === "cabrio");
In questo caso otterremo l'ultima macchina della lista.
Ottenere tutti gli elementi da un array che soddisfano una condizione - Array.filter
La funzione Array.find ritorna un solo oggetto. Se vogliamo ottenere tutte le macchine rosse, dobbiamo usare Array.filter.
let redCars = cars.filter(car => car.color === "red");
console.log(redCars);
// output:
// [
// {
// color: 'red',
// type: 'station wagon',
// registration: 'Sat Mar 03 2018 01:00:00 GMT+0100 (GMT+01:00)',
// capacity: 5
// },
// {
// color: 'red',
// type: 'cabrio',
// registration: 'Sat Mar 03 2012 01:00:00 GMT+0100 (GMT+01:00)',
// capacity: 2
// }
// ]
Trasformare gli oggetti di un array - Array.map
Questo è qualcosa di cui abbiamo bisogno molto spesso. Trasformare una matrice di oggetti in una matrice di oggetti diversi. Questo è il lavoro di Array.map. Diciamo che vogliamo classificare le nostre auto in tre gruppi in base alle loro dimensioni.
let sizes = cars.map(car => {
if (car.capacity <= 3){
return "small";
}
if (car.capacity <= 5){
return "medium";
}
return "large";
});
console.log(sizes);
// output:
// ['large','medium','medium', ..., 'small']
È anche possibile creare un nuovo oggetto se abbiamo bisogno di più valori:
let carsProperties = cars.map(car => {
let properties = {
"capacity": car.capacity,
"size": "large"
};
if (car.capacity <= 5){
properties['size'] = "medium";
}
if (car.capacity <= 3){
properties['size'] = "small";
}
return properties;
});
console.log(carsProperties);
// output:
// [
// { capacity: 7, size: 'large' },
// { capacity: 5, size: 'medium' },
// { capacity: 5, size: 'medium' },
// { capacity: 2, size: 'small' },
// ...
// ]
Aggiungere una proprietà a ogni oggetto di un array - Array.forEach
Ma cosa succede se vogliamo anche le dimensioni dell'auto? In tal caso possiamo inserire nell'oggetto una nuova proprietà size. Questo è un buon esempio per la funzione Array.forEach.
cars.forEach(car => {
car['size'] = "large";
if (car.capacity <= 5){
car['size'] = "medium";
}
if (car.capacity <= 3){
car['size'] = "small";
}
});
Ordinare un array in base a una proprietà - Array.sort
Quando abbiamo finito di trasformare gli oggetti, di solito abbiamo bisogno di ordinarli in qualche maniera.
In genere, l'ordinamento si basa sul valore di una proprietà dell'oggetto stesso. Possiamo usare la funzione Array.sort, ma dobbiamo fornire una funzione che definisca il meccanismo di ordinamento.
Supponiamo di voler ordinare le auto in base alla loro capacità in ordine decrescente.
let sortedCars = cars.sort((c1, c2) => (c1.capacity < c2.capacity) ? 1 : (c1.capacity > c2.capacity) ? -1 : 0);
console.log(sortedCars);
// output:
// [
// {
// color: 'purple',
// type: 'minivan',
// registration: 'Wed Feb 01 2017 00:00:00 GMT+0100 (GMT+01:00)',
// capacity: 7
// },
// {
// color: 'red',
// type: 'station wagon',
// registration: 'Sat Mar 03 2018 01:00:00 GMT+0100 (GMT+01:00)',
// capacity: 5
// },
// ...
// ]
La funzione Array.sort confronta due oggetti e mette il primo oggetto al secondo posto se il risultato della funzione di ordinamento è positivo. Quindi puoi considerare la funzione di ordinamento come se fosse una domanda: il primo oggetto dovrebbe essere posizionato al secondo posto?
Assicurati di aggiungere sempre il caso per zero quando il valore confrontato di entrambi gli oggetti è lo stesso per evitare scambi inutili.
Verificare se gli oggetti nell'array soddisfano una condizione - Array.every, Array.includes
Array.every e Array.some tornano utili quando dobbiamo solo controllare ogni oggetto per una condizione specifica.
Abbiamo una cabrio rossa nell'elenco delle auto? Tutte le auto sono in grado di trasportare almeno 4 persone? O più incentrato sul web: c'è un prodotto specifico nel carrello?
cars.some(car => car.color === "red" && car.type === "cabrio");
// output: true
cars.every(car => car.capacity >= 4);
// output: false
Potresti ricordare la funzione Array.includes che è simile a Array.some, ma funzionano solo per i tipi primitivi.
Sommario
In questo articolo, abbiamo esaminato le funzioni di base che ti aiutano a creare, manipolare, trasformare e scorrere gli array di oggetti. Dovrebbero coprire la maggior parte dei casi in cui ti imbatterai.
Se hai un caso d'uso che richiede funzionalità più avanzate, dai un'occhiata a questa dettagliata guida sugli array o visita il riferimento della scuola W3.
O contattami e preparerò un altro articolo :-)