JavaScript Array of Objects Tutorial - Kuinka luoda, päivittää ja selata objekteja JS Array -menetelmillä

Työskentelen keskimäärin JSON-tietojen kanssa 18 kertaa viikossa. Ja minun täytyy silti googlata tiettyjä tapoja käsitellä niitä melkein joka kerta. Entä jos olisi olemassa lopullinen opas, joka voisi aina antaa sinulle vastauksen?

Tässä artikkelissa näytän sinulle perusasiat Java-objektijoukkojen kanssa työskentelystä.

Jos olet koskaan työskennellyt JSON-rakenteen kanssa, olet työskennellyt JavaScript-objektien kanssa. Melko kirjaimellisesti. JSON on lyhenne sanoista JavaScript Object Notation.

Objektin luominen on näin yksinkertaista:

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

Tämä esine edustaa autoa. Autoja voi olla useita tyyppejä ja värejä, kukin esine edustaa sitten tiettyä autoa.

Nyt saat suurimman osan ajasta tällaista tietoa ulkoiselta palvelulta. Mutta joskus sinun on luotava esineitä ja niiden taulukoita manuaalisesti. Kuten tein tätä verkkokauppaa luodessani:

Jokainen luokaluettelokohde otetaan huomioon HTML-muodossa:

En halunnut tämän koodin toistuvan 12 kertaa, mikä tekisi siitä ylläpitämättömän.

Objektiryhmän luominen

Mutta palataan takaisin autoihin. Katsotaanpa tätä autosarjaa:

Voimme edustaa sitä matriisina tällä tavalla:

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

Objektiryhmät eivät pysy samana koko ajan. Meidän on melkein aina käsiteltävä niitä. Joten katsotaanpa, kuinka voimme lisätä objekteja jo olemassa olevaan ryhmään.

Lisää uusi objekti alkuun - Array.unshift

Lisää objekti ensimmäiseen kohtaan käyttämällä Array.unshift.

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

Lisää uusi objekti loppuun - Array.push

Lisää objekti viimeiseen kohtaan käyttämällä Array.push.

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

Lisää uusi objekti keskelle - Array.splice

Lisää objekti keskelle käyttämällä Array.splice. Tämä toiminto on erittäin kätevä, koska se voi myös poistaa kohteita. Varo sen parametreja:

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

Joten jos haluamme lisätä punaisen Volkswagen Cabrion viidennelle sijalle, käytämme:

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

Silmukka läpi joukko esineitä

Sallikaa minun kysyä teiltä tässä kysymys: Miksi haluat selata joukkoa esineitä? Syy, miksi kysyn, on, että silmukointi ei ole melkein koskaan ensisijainen syy siihen, mitä haluamme saavuttaa.

JavaScript tarjoaa monia toimintoja, jotka voivat ratkaista ongelmasi toteuttamatta logiikkaa yleisessä jaksossa. Katsotaanpa.

Etsi objekti taulukosta sen arvojen perusteella - Array.find

Oletetaan, että haluamme löytää auton, joka on punainen. Voimme käyttää toimintoa Array.find.

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

Tämä funktio palauttaa ensimmäisen vastaavan elementin:

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

On myös mahdollista etsiä useita arvoja:

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

Siinä tapauksessa saamme luettelon viimeisen auton.

Hanki useita kohteita ryhmästä, joka vastaa ehtoa - Array.filter

Array.findFunktio palauttaa vain yksi esine. Jos haluamme saada kaikki punaiset autot, meidän on käytettävä 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 //  } // ] 

Muunna taulukon objektit - Array.map

Tätä tarvitsemme hyvin usein. Muunna joukko esineitä joukoksi erilaisia ​​esineitä. Se on työ Array.map. Oletetaan, että haluamme luokitella automme kolmeen ryhmään niiden koon perusteella.

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

On myös mahdollista luoda uusi objekti, jos tarvitsemme lisää arvoja:

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

Lisää ominaisuus matriisin jokaiseen objektiin - 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.

Jos sinulla on käyttötapa, joka vaatii edistyneempiä toimintoja, tutustu tähän yksityiskohtaiseen taulukko-oppaaseen tai käy W3-koulujen viitteessä.

Tai ota yhteyttä minuun ja minä valmistelen toisen artikkelin :-)