În medie, lucrez cu datele JSON de 18 ori pe săptămână. Și încă mai am nevoie de Google pentru modalități specifice de a le manipula aproape de fiecare dată. Ce se întâmplă dacă ar exista un ghid final care să vă poată oferi întotdeauna răspunsul?

În acest articol, vă voi arăta noțiunile de bază despre lucrul cu matrici de obiecte în JavaScript.

Dacă ați lucrat vreodată cu o structură JSON, ați lucrat cu obiecte JavaScript. Literalmente. JSON înseamnă JavaScript Object Notation.

Crearea unui obiect este la fel de simplă ca aceasta:

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

Acest obiect reprezintă o mașină. Pot exista mai multe tipuri și culori de mașini, fiecare obiect reprezintă apoi o mașină specifică.

Tutorial JavaScript Array of Objects Cum sa creati actualizati

Acum, de cele mai multe ori primiți date de genul acesta de la un serviciu extern. Dar uneori trebuie să creați manual obiecte și matricele lor. Așa cum am făcut când am creat acest magazin electronic:

Tutorial JavaScript Array of Objects Cum sa creati actualizati

Luând în considerare fiecare element de listă de categorii, arată în HTML:

1611734645 535 Tutorial JavaScript Array of Objects Cum sa creati actualizati

Nu am vrut să am acest cod repetat de 12 ori, ceea ce l-ar face de neîntreținut.

Crearea unei matrice de obiecte

Dar să revenim la mașini. Să aruncăm o privire la acest set de mașini:

1611734645 582 Tutorial JavaScript Array of Objects Cum sa creati actualizati

Îl putem reprezenta ca o matrice în acest fel:

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

Tablourile de obiecte nu rămân la fel tot timpul. Aproape întotdeauna trebuie să le manipulăm. Deci, să aruncăm o privire la modul în care putem adăuga obiecte la o matrice deja existentă.

Adăugați un obiect nou la început – Array.unshift

1611734645 137 Tutorial JavaScript Array of Objects Cum sa creati actualizati

Pentru a adăuga un obiect în prima poziție, utilizați Array.unshift.

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

Adăugați un obiect nou la sfârșit – Array.push

1611734645 431 Tutorial JavaScript Array of Objects Cum sa creati actualizati

Pentru a adăuga un obiect în ultima poziție, utilizați Array.push.

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

Adăugați un obiect nou în mijloc – Array.splice

1611734645 702 Tutorial JavaScript Array of Objects Cum sa creati actualizati

Pentru a adăuga un obiect în mijloc, utilizați Array.splice. Această funcție este foarte utilă, deoarece poate elimina și elemente. Atenție la parametrii săi:

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

Deci, dacă dorim să adăugăm Volkswagen Cabrio roșu pe poziția a cincea, am folosi:

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

În buclă printr-o serie de obiecte

Permiteți-mi să vă pun o întrebare aici: De ce doriți să parcurgeți o serie de obiecte? Motivul pentru care îl întreb este că buclarea nu este aproape niciodată cauza principală a ceea ce vrem să realizăm.

JavaScript oferă multe funcții care vă pot rezolva problema fără a implementa logica într-un ciclu general. Hai să aruncăm o privire.

Găsiți un obiect dintr-o matrice după valorile sale – Array.find

Să presupunem că vrem să găsim o mașină roșie. Putem folosi funcția Array.find.

1611734645 256 Tutorial JavaScript Array of Objects Cum sa creati actualizati

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

Această funcție returnează primul element de potrivire:

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

De asemenea, este posibil să căutați mai multe valori:

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

În acest caz, vom lua ultima mașină din listă.

Obțineți mai multe articole dintr-o matrice care corespund unei condiții – Array.filter

Array.find funcția returnează un singur obiect. Dacă vrem să obținem toate mașinile roșii, trebuie să folosim Array.filter.

1611734646 173 Tutorial JavaScript Array of Objects Cum sa creati actualizati

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
//   }
// ]

Transformă obiecte ale unei matrice – Array.map

De asta avem nevoie foarte des. Transformați o serie de obiecte într-o serie de obiecte diferite. Pentru asta e o treabă Array.map. Să presupunem că vrem să ne clasificăm mașinile în trei grupuri în funcție de mărimea lor.

1611734646 802 Tutorial JavaScript Array of Objects Cum sa creati actualizati

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

De asemenea, este posibil să creăm un obiect nou dacă avem nevoie de mai multe valori:

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

Adăugați o proprietate la fiecare obiect al unui tablou – Array.forEach

Dar dacă vrem și obiectul mașinii? În acest caz, putem îmbunătăți obiectul pentru o nouă proprietate size. Acesta este un bun caz de utilizare pentru Array.forEach funcţie.

cars.forEach(car => {
 car['size'] = "large";
 if (car.capacity <= 5){
   car['size'] = "medium";
 }
 if (car.capacity <= 3){
   car['size'] = "small";
 }
});

Sortați o matrice după o proprietate – Array.sort

Când am terminat cu transformarea obiectelor, de obicei trebuie să le sortăm într-un fel sau altul.

De obicei, sortarea se bazează pe valoarea unei proprietăți pe care o are fiecare obiect. Putem folosi Array.sort funcție, dar trebuie să oferim o funcție care definește mecanismul de sortare.

Să presupunem că vrem să sortăm mașinile în funcție de capacitatea lor în ordine descrescătoare.

1611734646 771 Tutorial JavaScript Array of Objects Cum sa creati actualizati

let sortedCars = cars.sort((c1, c2) => (c1.capacity < c2.capacity) ? 1 : (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
//   },
//   ...
// ]

Array.sort compară două obiecte și pune primul obiect pe locul al doilea dacă rezultatul funcției de sortare este pozitiv. Deci, puteți privi funcția de sortare ca și cum ar fi fost o întrebare: Ar trebui ca primul obiect să fie plasat pe locul doi?

1611734646 119 Tutorial JavaScript Array of Objects Cum sa creati actualizati

Asigurați-vă că adăugați întotdeauna majuscula la zero atunci când valoarea comparată a ambelor obiecte este aceeași pentru a evita swap-uri inutile.

Verificarea dacă obiectele din matrice îndeplinesc o condiție – Array.every, Array.include

Array.every și Array.some fii la îndemână când trebuie doar să verificăm fiecare obiect pentru o anumită stare.

Avem un cabrio roșu în lista mașinilor? Sunt toate mașinile capabile să transporte cel puțin 4 persoane? Sau mai mult centrat pe web: Există un anumit produs în coșul de cumpărături?

cars.some(car => car.color === "red" && car.type === "cabrio");
// output: true

cars.every(car => car.capacity >= 4);
// output: false

Poate vă amintiți funcția Array.includes care este similar cu Array.some, dar funcționează numai pentru tipurile primitive.

rezumat

În acest articol, am parcurs funcțiile de bază care vă ajută să creați, să manipulați, să transformați și să parcurgeți matrici de obiecte. Acestea ar trebui să acopere majoritatea cazurilor în care te vei împiedica.

Dacă aveți un caz de utilizare care necesită funcționalități mai avansate, aruncați o privire la acest ghid detaliat pentru tablouri sau vizitați Referința școlilor W3.

Sau ia legătura cu mine și voi pregăti un alt articol 🙂