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