JavaScript Objektu masīva apmācība - kā izveidot, atjaunināt un lokalizēt objektus, izmantojot JS masīva metodes

Vidēji ar JSON datiem strādāju 18 reizes nedēļā. Un man joprojām gandrīz katru reizi ir jāgooglē konkrēti veidi, kā ar tiem manipulēt. Ko darīt, ja būtu kāds galīgs ceļvedis, kas vienmēr varētu sniegt jums atbildi?

Šajā rakstā es parādīšu pamatus darbam ar objektu masīviem JavaScript.

Ja kādreiz esat strādājis ar JSON struktūru, esat strādājis ar JavaScript objektiem. Gluži burtiski. JSON nozīmē JavaScript Object Notation.

Objekta izveide ir tik vienkārša kā šis:

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

Šis objekts attēlo automašīnu. Automašīnām var būt daudz veidu un krāsu, katrs objekts pēc tam attēlo konkrētu automašīnu.

Tagad lielākoties šādi dati tiek iegūti no ārēja pakalpojuma. Bet dažreiz objekti un to masīvi ir jāizveido manuāli. Tāpat kā es to darīju, veidojot šo e-veikalu:

Ņemot vērā katru kategoriju saraksta elementu, HTML formātā izskatās šādi:

Es negribēju, lai šis kods tiktu atkārtots 12 reizes, kas padarītu to neuzturamu.

Objektu masīva izveide

Bet atgriezīsimies pie automašīnām. Apskatīsim šo automašīnu komplektu:

Mēs to varam attēlot kā masīvu šādā veidā:

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

Objektu masīvi visu laiku nemainās. Mums gandrīz vienmēr ir jārīkojas ar viņiem. Tāpēc apskatīsim, kā mēs varam pievienot objektus jau esošam masīvam.

Sākumā pievienojiet jaunu objektu - Array.unshift

Lai pievienotu objektu pirmajā pozīcijā, izmantojiet Array.unshift.

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

Pievienojiet beigās jaunu objektu - Array.push

Lai pievienotu objektu pēdējā pozīcijā, izmantojiet Array.push.

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

Vidū pievienojiet jaunu objektu - Array.splice

Lai pievienotu objektu vidū, izmantojiet Array.splice. Šī funkcija ir ļoti ērta, jo tā var arī noņemt priekšmetus. Uzmanieties no tā parametriem:

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

Tātad, ja mēs vēlamies piekto pozīciju pievienot sarkanajam Volkswagen Cabrio, mēs izmantotu:

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

Cilpa caur objektu masīvu

Ļaujiet man uzdot jums jautājumu šeit: Kāpēc jūs vēlaties iepazīties ar objektu masīvu? Iemesls, kāpēc es jautāju, ir tāds, ka looping gandrīz nekad nav galvenais iemesls tam, ko mēs vēlamies sasniegt.

JavaScript nodrošina daudzas funkcijas, kas var atrisināt jūsu problēmu, faktiski neieviešot loģiku vispārējā ciklā. Apskatīsim.

Masīvā atrodiet objektu pēc tā vērtībām - Array.find

Pieņemsim, ka mēs vēlamies atrast automašīnu, kas ir sarkana. Mēs varam izmantot funkciju Array.find.

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

Šī funkcija atgriež pirmo atbilstošo elementu:

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

Ir iespējams arī meklēt vairākas vērtības:

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

Tādā gadījumā mēs iegūsim pēdējo automašīnu sarakstā.

Iegūstiet vairākus vienumus no masīva, kas atbilst nosacījumam - Array.filter

Array.findFunkcija atgriež tikai vienu objektu. Ja mēs vēlamies iegūt visas sarkanās automašīnas, mums tas jāizmanto 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 //  } // ] 

Transformēt masīva objektus - Array.map

Tas mums ir vajadzīgs ļoti bieži. Pārveidojiet objektu masīvu dažādu objektu masīvā. Tas ir darbs Array.map. Pieņemsim, ka mēs vēlamies klasificēt savas automašīnas trīs grupās, ņemot vērā to lielumu.

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

Ja ir nepieciešamas vairāk vērtību, ir iespējams arī izveidot jaunu objektu:

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

Pievienojiet īpašumu katram masīva objektam - 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.

Ja jums ir izmantošanas gadījums, kam nepieciešama sarežģītāka funkcionalitāte, apskatiet šo detalizēto masīvu rokasgrāmatu vai apmeklējiet W3 skolu atsauci.

Vai arī sazinieties ar mani, un es sagatavošu citu rakstu :-)