JavaScript Array of Objects Tutorial - Hvordan lage, oppdatere og løpe gjennom objekter ved hjelp av JS Array Methods

I gjennomsnitt jobber jeg med JSON-data 18 ganger i uken. Og jeg trenger fortsatt å google etter bestemte måter å manipulere dem på nesten hver gang. Hva om det var en ultimate guide som alltid kunne gi deg svaret?

I denne artikkelen vil jeg vise deg det grunnleggende om å jobbe med objektmatriser i JavaScript.

Hvis du noen gang har jobbet med en JSON-struktur, har du jobbet med JavaScript-objekter. Ganske bokstavelig. JSON står for JavaScript Object Notation.

Å lage et objekt er så enkelt som dette:

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

Dette objektet representerer en bil. Det kan være mange biltyper og farger, hvert objekt representerer da en bestemt bil.

Nå, mesteparten av tiden får du data som dette fra en ekstern tjeneste. Men noen ganger må du lage objekter og deres matriser manuelt. Som jeg gjorde da jeg opprettet denne e-butikken:

Tatt i betraktning hvert kategorilisteelement ser slik ut i HTML:

Jeg ønsket ikke å få denne koden gjentatt 12 ganger, noe som ville gjøre den uvedlikeholdelig.

Opprette en rekke objekter

Men la oss komme tilbake til biler. La oss ta en titt på dette settet med biler:

Vi kan representere det som en matrise på denne måten:

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 }, { ... }, ... ] 

Arrays av objekter forblir ikke de samme hele tiden. Vi trenger nesten alltid å manipulere dem. Så la oss ta en titt på hvordan vi kan legge til objekter i en allerede eksisterende matrise.

Legg til et nytt objekt i starten - Array.unshift

Bruk for å legge til et objekt i første posisjon Array.unshift.

let car = { "color": "red", "type": "cabrio", "registration": new Date('2016-05-02'), "capacity": 2 } cars.unshift(car); 

Legg til et nytt objekt på slutten - Array.push

Bruk for å legge til et objekt i siste posisjon Array.push.

let car = {  "color": "red",  "type": "cabrio",  "registration": new Date('2016-05-02'),  "capacity": 2 } cars.push(car); 

Legg til et nytt objekt i midten - Array.splice

For å legge til et objekt i midten, bruk Array.splice. Denne funksjonen er veldig praktisk, da den også kan fjerne gjenstander. Se opp for parametrene:

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

Så hvis vi vil legge til den røde Volkswagen Cabrio på femte plassering, vil vi bruke:

let car = {  "color": "red",  "type": "cabrio",  "registration": new Date('2016-05-02'),  "capacity": 2 } cars.splice(4, 0, car); 

Looping gjennom en rekke objekter

La meg stille deg et spørsmål her: Hvorfor vil du gå gjennom en rekke objekter? Grunnen til at jeg spør er at loopingen nesten aldri er den viktigste årsaken til det vi ønsker å oppnå.

JavaScript har mange funksjoner som kan løse problemet ditt uten å faktisk implementere logikken i en generell syklus. La oss ta en titt.

Finn et objekt i en matrise etter verdiene - Array.find

La oss si at vi vil finne en bil som er rød. Vi kan bruke funksjonen Array.find.

let car = cars.find(car => car.color === "red"); 

Denne funksjonen returnerer det første matchende elementet:

console.log(car); // output: // { //   color: 'red', //   type: 'station wagon', //   registration: 'Sat Mar 03 2018 01:00:00 GMT+0100 (GMT+01:00)', //   capacity: 5 // } 

Det er også mulig å søke etter flere verdier:

let car = cars.find(car => car.color === "red" && car.type === "cabrio");

I så fall får vi den siste bilen i listen.

Få flere elementer fra en matrise som samsvarer med en betingelse - Array.filter

Den Array.findfunksjonen returnerer bare ett objekt. Hvis vi ønsker å få alle røde biler, må vi bruke dem 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 //  } // ] 

Transformer objekter i en matrise - Array.map

Dette er noe vi trenger veldig ofte. Forvandle en rekke objekter til en rekke forskjellige objekter. Det er en jobb for Array.map. La oss si at vi vil klassifisere bilene våre i tre grupper basert på størrelsen.

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'] 

Det er også mulig å lage et nytt objekt hvis vi trenger flere verdier:

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' }, // ... // ] 

Legg til en eiendom til hvert objekt i en matrise - 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.

Hvis du har en brukstilfelle som krever mer avansert funksjonalitet, kan du ta en titt på denne detaljerte guiden til matriser eller besøke W3-skolereferansen.

Eller ta kontakt med meg så skal jeg forberede en annen artikkel :-)