Vadnica za JavaScript po vrstah predmetov - Kako ustvariti, posodobiti in zaokrožiti predmete z uporabo metod JS Array

V povprečju delam s podatki JSON 18-krat na teden. In še vedno moram skoraj vedno iskati posebne načine, kako z njimi manipulirati. Kaj če bi obstajal končni vodnik, ki bi vam vedno lahko odgovoril?

V tem članku vam bom pokazal osnove dela z objektnimi nizi v JavaScript.

Če ste kdaj delali s strukturo JSON, ste delali z objekti JavaScript. Čisto dobesedno. JSON je kratica za JavaScript Object Notation.

Ustvarjanje predmeta je tako preprosto:

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

Ta predmet predstavlja avto. Avtomobilov je lahko veliko vrst in barv, vsak predmet nato predstavlja določen avto.

Zdaj večino časa dobite takšne podatke od zunanje storitve. Toda včasih morate predmete in njihove nize ustvariti ročno. Tako kot pri ustvarjanju te e-trgovine:

Vsak element seznama kategorij je v HTML-ju videti tako:

Nisem hotel, da se ta koda ponovi 12-krat, zaradi česar je ne bo mogoče vzdrževati.

Ustvarjanje niza predmetov

Pa se vrnimo k avtomobilom. Oglejmo si ta nabor avtomobilov:

Kot matriko jo lahko predstavimo na ta način:

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

Nizi predmetov ne ostanejo ves čas enaki. Skoraj vedno moramo z njimi manipulirati. Poglejmo si torej, kako lahko dodamo predmete v že obstoječo matriko.

Na začetku dodajte nov objekt - Array.unshift

Če želite dodati predmet na prvem mestu, uporabite Array.unshift.

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

Na koncu dodajte nov predmet - Array.push

Če želite dodati predmet na zadnjem mestu, uporabite Array.push.

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

V sredino dodajte nov predmet - Array.splice

Če želite dodati predmet na sredini, uporabite Array.splice. Ta funkcija je zelo priročna, saj lahko tudi odstranjuje predmete. Pazite na njegove parametre:

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

Torej, če želimo dodati rdečega Volkswagna Cabrio na peto mesto, bi uporabili:

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

Looping skozi vrsto predmetov

Tukaj naj vas vprašam: Zakaj se želite vrteti skozi vrsto predmetov? Razlog, ki ga sprašujem, je, da zanka skoraj nikoli ni glavni vzrok tega, kar želimo doseči.

JavaScript ponuja veliko funkcij, ki lahko rešijo vaš problem, ne da bi dejansko implementirali logiko v splošnem ciklu. Oglejmo si.

Poiščite predmet v polju po njegovih vrednostih - Array.find

Recimo, da želimo najti avto, ki je rdeče barve. Funkcijo lahko uporabimo Array.find.

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

Ta funkcija vrne prvi ujemajoči se 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 // } 

Možno je tudi iskanje več vrednosti:

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

V tem primeru bomo dobili zadnji avto na seznamu.

Pridobite več elementov iz polja, ki ustrezajo pogoju - Array.filter

Array.findVrne samo en predmet. Če želimo dobiti vse rdeče avtomobile, jih moramo uporabiti 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 //  } // ] 

Pretvori predmete polja - Array.map

To je nekaj, kar zelo pogosto potrebujemo. Pretvorite niz predmetov v niz različnih predmetov. To je služba za Array.map. Recimo, da želimo svoje avtomobile razvrstiti v tri skupine glede na njihovo velikost.

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

Prav tako je mogoče ustvariti nov objekt, če potrebujemo več vrednosti:

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

Vsakemu objektu polja dodajte lastnost - 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.

Če imate primer uporabe, ki zahteva naprednejše funkcije, si oglejte ta podroben vodnik po nizih ali obiščite referenco šol W3.

Ali pa stopite v stik z mano in pripravil bom nov članek :-)