Esercitazione su array di oggetti JavaScript - Come creare, aggiornare e scorrere gli oggetti utilizzando i metodi di array JS

In media lavoro con i dati 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 che potrebbe sempre darti la risposta?

In questo articolo, ti mostrerò le basi per lavorare con gli array di oggetti in JavaScript.

Se hai mai lavorato con una struttura JSON, hai lavorato con oggetti JavaScript. Letteralmente. JSON sta per JavaScript Object Notation.

Creare un oggetto è semplice come questo:

{ "color": "purple", "type": "minivan", "registration": new Date('2012-02-03'), "capacity": 7 } 

Questo oggetto rappresenta un'auto. Possono esserci molti tipi e colori di auto, 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 relativi array. Come ho fatto quando stavo creando questo e-shop:

Considerando che ogni elemento dell'elenco di categorie ha questo aspetto in HTML:

Non volevo che questo codice venisse ripetuto 12 volte, il che lo avrebbe reso impossibile da mantenere.

Creazione di una serie di oggetti

Ma torniamo alle macchine. Diamo un'occhiata a questo set 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 }, { ... }, ... ] 

Le matrici di oggetti non rimangono sempre le stesse. Abbiamo quasi sempre bisogno di manipolarli. Quindi diamo 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, utilizzare 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, utilizzare 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 al centro, usa Array.splice. Questa funzione è molto utile in quanto può anche rimuovere elementi. Attenzione ai suoi parametri:

Array.splice( {index where to start}, {how many items to remove}, {items to add} ); 

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

Loop attraverso una serie di oggetti

Permettimi di farti una domanda qui: perché vuoi scorrere un array di oggetti? La ragione per cui 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 generale. Diamo un'occhiata.

Trova 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 tal caso avremo l'ultima macchina nell'elenco.

Ottieni più elementi da un array che corrispondono a una condizione: Array.filter

La Array.findfunzione restituisce un solo oggetto. Se vogliamo ottenere tutte le auto rosse, dobbiamo usarle 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 //  } // ] 

Trasforma gli oggetti di un array: Array.map

Questo è qualcosa di cui abbiamo bisogno molto spesso. Trasforma un array di oggetti in un array di oggetti diversi. Questo è un lavoro per 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' }, // ... // ] 

Aggiungi una proprietà a ogni oggetto di un array: Array.forEach

But what if we want the car object too? In that case we can enhance the object for a new property size. This is a good use-case for the Array.forEach function.

cars.forEach(car => { car['size'] = "large";  if (car.capacity <= 5){    car['size'] = "medium";  }  if (car.capacity <= 3){    car['size'] = "small";  } }); 

Sort an array by a property - Array.sort

When we're done with transforming the objects, we usually need to sort them one way or another.

Typically, the sorting is based on a value of a property every object has. We can use the Array.sort function, but we need to provide a function that defines the sorting mechanism.

Let's say we want to sort the cars based on their capacity in descending order.

let sortedCars = cars.sort((c1, c2) => (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 // }, // ... // ] 

The Array.sort compares two objects and puts the first object in the second place if the result of the sorting function is positive. So you can look at the sorting function as if it was a question: Should the first object be placed in second place?

Make sure to always add the case for zero when the compared value of both objects is the same to avoid unnecessary swaps.

Checking if objects in array fulfill a condition - Array.every, Array.includes

Array.every and Array.some come handy when we just need to check each object for a specific condition.

Do we have a red cabrio in the list of cars? Are all cars capable of transporting at least 4 people? Or more web-centric: Is there a specific product in the shopping cart?

cars.some(car => car.color === "red" && car.type === "cabrio"); // output: true cars.every(car => car.capacity >= 4); // output: false 

You may remember the function Array.includes which is similar to Array.some, but works only for primitive types.

Summary

In this article, we went through the basic functions that help you create, manipulate, transform, and loop through arrays of objects. They should cover most cases you will stumble upon.

If you have a use-case that requires more advanced functionality, take a look at this detailed guide to arrays or visit the W3 schools reference.

Or get in touch with me and I will prepare another article :-)