‘ For ‘ cilpas un objekti / JavaScrpt

 

Šajā rakstā jūs uzzināsiet, kā for  cilpa darbojas konceptuāli.

Lai sāktu, ir svarīgi zināt, ka for  cilpa nevar darboties tieši objektā, jo objekts nav atkārtojams. Piemēram:

const automašīna = {
    ātrums: 100,
    krāsa: "blue"
}


for(prop of automašīna) {
    console.log(prop)
}
Sagaidāmais iznākums šim kodam ir kļūdas paziņojums:

Error on line 6:
for(prop of automašīna) {
            ^


TypeError: automašīna is not iterable

Pretēji objektiem masīvi ir atkārtojami un tos šajā gadījumā var izmantot. Piemēram:

const krāsām = ['sarkans','oranžs','dzeltens']
for (var krāsa of krāsām) {
    console.log(krāsa);
}
Sagaidāmais iznākums:
sarkans
oranžs
dzeltens

Par laimi, varat izmantot to, ka ar for cilpu var palaist masīvus, cilpu pār objektiem.

Bet kā?

Lai varētu pareizi atbildēt uz šo jautājumu, vispirms ir jāpārskata trīs iebūvētās metodes: Object.keys(), Object.values() un Object.entries().

Iebūvētās metodes:

Metode Object.keys() saņem objektu kā savu parametru. Atcerieties, ka šis objekts ir objekts, kuram vēlaties pāriet. Vēl ir pāragri paskaidrot, kā jūs cilpā operēsiet pār pašu objektu; pagaidām koncentrējieties uz atgriezto rekvizītu masīvu, kad izsaucat metodi Object.keys().

Šeit ir piemērs metodes Object.keys() palaišanai pavisam jaunā automašīna2 objektā:

const automašīna2 = {
    ātrums: 200,
    krāsa: "sarkana"
}
console.log(Object.keys(automašīna2)); // [ 'ātrums', 'krāsa' ]
Tātad, palaižot Object.keys() un nododot tam savu automašīna2 objektu, atgrieztā vērtība ir virkņu masīvs, kur katra virkne ir manā automašīna2 objektā ietverto īpašību atslēga.

Object.values() metode

Vēl kāda noderīga metode ir Object.values():

const automašīna3 = {
    ātrums: 300,
    krāsa: "dzeltena"
}
console.log(Object.values(automašīna3)); // [300, 'dzeltena']

Metode Object.entries()

Visbeidzot, ir vēl viena noderīga metode — Object.entries(), kas atgriež masīvu, kurā uzskaitītas gan atslēgas, gan vērtības.
const automašīna4 = {
    ātrums: 400,
    krāsa: 'pelēka'
}
console.log(Object.entries(automašīna4));

PIEMĒRI:

Tagad jums ir visas sastāvdaļas, kas nepieciešamas, lai pārietu uz jebkura objekta rekvizītu atslēgām un vērtībām.

Šeit ir ļoti vienkāršs piemērs, kā to izdarīt:

var apģērbaGabals = {
    cena: 50,
    krāsa: 'bēša',
    materiāls: 'kokvilna',
    sezona: 'rudens'
}


for( key of Object.keys(apģērbaGabals) ) {
    console.log(keys, ":", apģērbaGabals[key])
}

Sarežģītākā daļa, kas jāsaprot šajā sintaksē, iespējams, ir apģērba vienums [key].

Par laimi, to nav pārāk grūti saprast, jo īpaši tāpēc, ka jūs jau esat aprakstījis šo jēdzienu iepriekš, kad mācījāties, kā piekļūt objekta elementam, izmantojot apzīmējumu iekavās.

Atcerieties, ka jūs arī uzzinājāt, kā dinamiski piekļūt īpašuma nosaukumam.

Lai pārskatītu šo koncepciju un parādītu praktisku demonstrāciju, kā tas darbojas, iekodēsim funkcijas deklarāciju, kas nejauši piešķir vai nu virknes ātrumu, vai virknes krāsu mainīgā nosaukumam, un pēc tam izveidosim objektu, kuram ir tikai divi ‘key’: ātruma-key un krāsu-key.

Pēc šīs iestatīšanas varēsit dinamiski piekļūt jebkuram no šiem rekvizītiem pavisam jaunā objektā, izmantojot iekavas.

Šeit ir piemēra kods:

function testējamIekavuDinamiskoPiekļuvi() {
    var dinamiskāAtslēga;
    if(Math.random() > 0.5) {
      dinamiskāAtslēga = "ātrums";
     }else{
       dinamiskāAtslēga = "krāsa";
     }
 
      var drone = {
        ātrums: 15,
        krāsa: "oranža"
      }
 
      console.log(drone[dinamiskāAtslēga]);
  }
  testējamIekavuDinamiskoPiekļuvi();

Šis piemērs varētu šķist nedaudz sarežģīts, taču tā mērķis ir demonstrēt faktu, ka jūs iegūstat vienu vai otru vērtību no objekta atslēgas, pamatojoties uz virkni, kas tika piešķirta mainīgajam dynamiskāAtslēga un kurai bez problēmām piekļūt, izmantojot iekavas.

Varat vairākas reizes palaist funkciju testējamIekavuDinamiskoPiekļuvi, un pamanīsiet, ka dažreiz izvadītā vērtība ir 15, bet dažreiz tā ir oranža, lai gan es vienmēr piekļūstu drone [diznamiskāAtslēga] atslēgai (key). Tā kā dinamiskās atslēgas vērtība tiek aizpildīta Math.random() izsaukumā, dažreiz šī izteiksme tiek novērtēta kā drone[“ātrums”], bet citreiz šī izteiksme tiek novērtēta kā drone[“krāsa”].

Tagad esat uzzinājis par veidošanas blokiem, kas padara for  cilpu noderīgu objektu atkārtošanai, lai gan objekti nav iterējami.

 

Loading

Noderīgs raksts? Dalies ar citiem:
Dalīties: