Výukový program pre pole objektov JavaScript - Ako vytvárať, aktualizovať a vytvárať slučky cez objekty pomocou metód poľa JS

V priemere pracujem s údajmi JSON 18-krát týždenne. A stále musím googliť konkrétne spôsoby, ako s nimi manipulovať takmer vždy. Čo keby existoval konečný sprievodca, ktorý by vám vždy mohol dať odpoveď?

V tomto článku vám ukážem základy práce s poliami objektov v JavaScripte.

Ak ste niekedy pracovali so štruktúrou JSON, pracovali ste s objektmi JavaScript. Celkom doslovne. JSON znamená JavaScript Object Notation.

Vytvorenie objektu je také jednoduché ako toto:

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

Tento objekt predstavuje auto. Môže existovať veľa druhov a farieb automobilov, každý objekt potom predstavuje konkrétne auto.

Teraz väčšinou takéto údaje získavate z externej služby. Ale niekedy musíte objekty a ich polia vytvárať ručne. Rovnako ako pri vytváraní tohto elektronického obchodu:

Vzhľadom na to, že každá položka zoznamu kategórií vyzerá v HTML takto:

Nechcel som mať tento kód opakovaný 12 krát, čo by ho urobilo neudržateľným.

Vytváranie poľa objektov

Vráťme sa však k autám. Poďme sa pozrieť na túto sadu automobilov:

Môžeme to predstaviť ako pole takto:

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

Polia objektov nezostávajú stále rovnaké. Takmer vždy s nimi musíme manipulovať. Poďme sa teda pozrieť na to, ako môžeme pridať objekty do už existujúceho poľa.

Na začiatku pridajte nový objekt - Array.unshift

Ak chcete pridať objekt na prvú pozíciu, použite Array.unshift.

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

Na koniec pridajte nový objekt - Array.push

Ak chcete pridať objekt na poslednú pozíciu, použite Array.push.

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

V strede pridajte nový objekt - Array.splice

Ak chcete pridať objekt do stredu, použite Array.splice. Táto funkcia je veľmi praktická, pretože umožňuje aj odstránenie položiek. Pozor na jeho parametre:

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

Ak teda chceme pridať červený Volkswagen Cabrio na piatu pozíciu, použili by sme:

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

Prechádzanie po rade objektov

Tu vám položím otázku: Prečo chcete prechádzať radom objektov? Dôvod, prečo sa pýtam, je, že vytváranie slučiek nie je takmer nikdy primárnou príčinou toho, čo chceme dosiahnuť.

JavaScript poskytuje mnoho funkcií, ktoré môžu vyriešiť váš problém bez skutočnej implementácie logiky vo všeobecnom cykle. Pozrime sa.

Vyhľadajte objekt v poli podľa jeho hodnôt - Array.find

Povedzme, že chceme nájsť auto, ktoré je červené. Môžeme použiť funkciu Array.find.

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

Táto funkcia vráti prvý zodpovedajúci prvok:

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

Je tiež možné vyhľadať viac hodnôt:

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

V takom prípade dostaneme posledné auto zo zoznamu.

Získajte viac položiek z poľa, ktoré zodpovedajú podmienke - Array.filter

Array.findVracia iba jeden objekt. Ak chceme dostať všetky červené autá, musíme použiť 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 //  } // ] 

Transformujte objekty poľa - Array.map

To je vec, ktorú veľmi často potrebujeme. Transformujte pole objektov na pole rôznych objektov. To je práca pre Array.map. Povedzme, že chceme naše autá rozdeliť do troch skupín na základe ich veľkosti.

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

Je tiež možné vytvoriť nový objekt, ak potrebujeme viac hodnôt:

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

Pridajte vlastnosť ku každému objektu poľa - 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.

Ak máte prípad použitia, ktorý vyžaduje pokročilejšie funkcie, pozrite si tohto podrobného sprievodcu poľami alebo navštívte referenčný materiál pre školy W3.

Alebo sa ozvite a pripravím ďalší článok :-)