JavaScript Array of Objects Tutorial - Sådan oprettes, opdateres og gennemløbes objekter ved hjælp af JS Array Methods
I gennemsnit arbejder jeg med JSON-data 18 gange om ugen. Og jeg har stadig brug for at google efter specifikke måder at manipulere dem næsten hver gang. Hvad hvis der var en ultimativ guide, der altid kunne give dig svaret?
I denne artikel viser jeg dig det grundlæggende ved at arbejde med objektarrays i JavaScript.
Hvis du nogensinde har arbejdet med en JSON-struktur, har du arbejdet med JavaScript-objekter. Helt bogstaveligt. JSON står for JavaScript Object Notation.
Oprettelse af et objekt er så simpelt som dette:
{ "color": "purple", "type": "minivan", "registration": new Date('2012-02-03'), "capacity": 7 } Dette objekt repræsenterer en bil. Der kan være mange typer og farver af biler, hvert objekt repræsenterer derefter en bestemt bil.
Nu får du oftest data som denne fra en ekstern tjeneste. Men nogle gange er du nødt til at oprette objekter og deres arrays manuelt. Som jeg gjorde, da jeg oprettede denne e-shop:
I betragtning af hvert kategorilisteelement ser sådan ud i HTML:
Jeg ville ikke have gentaget denne kode 12 gange, hvilket ville gøre den uvedligeholdelig.
Oprettelse af en række objekter
Men lad os vende tilbage til biler. Lad os se på dette sæt biler:
Vi kan repræsentere det som en matrix på denne måde:
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 af objekter forbliver ikke de samme hele tiden. Vi har næsten altid brug for at manipulere dem. Så lad os se på, hvordan vi kan føje objekter til et allerede eksisterende array.
Tilføj et nyt objekt i starten - Array.unshift
Brug for at tilføje et objekt ved første position Array.unshift.
let car = { "color": "red", "type": "cabrio", "registration": new Date('2016-05-02'), "capacity": 2 } cars.unshift(car); Tilføj et nyt objekt i slutningen - Array.push
Brug for at tilføje et objekt på den sidste position Array.push.
let car = { "color": "red", "type": "cabrio", "registration": new Date('2016-05-02'), "capacity": 2 } cars.push(car); Tilføj et nyt objekt i midten - Array.splice
For at tilføje et objekt i midten skal du bruge Array.splice. Denne funktion er meget praktisk, da den også kan fjerne genstande. Pas på dens parametre:
Array.splice( {index where to start}, {how many items to remove}, {items to add} ); Så hvis vi vil tilføje den røde Volkswagen Cabrio på den femte position, vil vi bruge:
let car = { "color": "red", "type": "cabrio", "registration": new Date('2016-05-02'), "capacity": 2 } cars.splice(4, 0, car); Loop gennem en række objekter
Lad mig stille dig et spørgsmål her: Hvorfor vil du løbe gennem en række objekter? Grunden til, at jeg spørger, er at loopingen næsten aldrig er den primære årsag til det, vi ønsker at opnå.
JavaScript indeholder mange funktioner, der kan løse dit problem uden faktisk at implementere logikken i en generel cyklus. Lad os se.
Find et objekt i et array efter dets værdier - Array.find
Lad os sige, at vi vil finde en bil, der er rød. Vi kan bruge funktionen Array.find.
let car = cars.find(car => car.color === "red"); Denne funktion returnerer det første matchende element:
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å muligt at søge efter flere værdier:
let car = cars.find(car => car.color === "red" && car.type === "cabrio");
I så fald får vi den sidste bil på listen.
Få flere elementer fra en matrix, der matcher en betingelse - Array.filter
Den Array.findfunktion returnerer kun ét objekt. Hvis vi ønsker at få alle røde biler, skal vi bruge 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 matrix - Array.map
Dette er noget, vi har brug for meget ofte. Transformer en række objekter til en række forskellige objekter. Det er et job til Array.map. Lad os sige, at vi vil klassificere vores biler i tre grupper baseret på deres størrelse.
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å muligt at oprette et nyt objekt, hvis vi har brug for flere værdier:
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' }, // ... // ] Føj en egenskab til hvert objekt i en matrix - 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 brugssag, der kræver mere avanceret funktionalitet, skal du kigge på denne detaljerede guide til arrays eller besøge W3-skolereferencen.
Eller kontakt mig, så forbereder jeg endnu en artikel :-)
