JS ciklo pamoka - kaip kartoti „JavaScript“ masyvą

Šis straipsnis padės jums tiksliai suprasti, kaip tiksliai kartoti masyvo duomenų struktūrą „JavaScript“.

Nesvarbu, ar jūs tik pradedate mokytis „JavaScript“, ar esate čia, norėdami atsigaivinti, jums bus naudinga bet kuriuo atveju. Šiame straipsnyje aprašoma viena iš plačiausiai naudojamų „JavaScript“ sąvokų.

Kas yra masyvas?

let cars = ["Tesla", "Ferrari", "Lamborghini", "Audi"];

Aukščiau yra „JavaScript“ masyvas, naudojamas kelioms vertėms saugoti. Tai yra viena iš paprasčiausių masyvo formų. Jame yra 4 „elementai“ masyvo viduje, visos eilutės. Kaip matote, kiekvienas elementas yra atskirtas kableliu.

Šis masyvo pavyzdys talpina skirtingų markių automobilius ir gali būti nurodomas su carskintamuoju.

Yra keletas būdų, kaip galime kartoti šį masyvą. „JavaScript“ yra nepaprastai turtingas funkcijų, todėl turime prabangos pasirinkti geriausią būdą išspręsti problemą.

Štai kaip išspręsime „JavaScript“ masyvų kartojimą:

  1. Pažymėkite 5 įprastus matricos kartojimo metodus
  2. Parodykite keletą įžvalgų apie kiekvieną pasikartojantį metodą
  3. Pateikite ir kodą, kurį galėsite naudoti, kad jį išbandytumėte!

Tradicinis kilpui

Kas yra „Loop“?

Vikipedija apibrėžia „For Loop“:

"Kompiuterių moksle" for-loop " (arba tiesiog " loop " ) yra valdymo srauto teiginys, nurodantis iteraciją, kuri leidžia kodą vykdyti pakartotinai."

A for loop yra būdas pakartotinai vykdyti kodą. Užuot rašę console.log(“hi”)penkis kartus, galite jį suvynioti į „for loop“.

Šiame pirmame pavyzdyje sužinosime, kaip kartoti aukščiau matytą automobilių masyvą ir atsispausdinti kiekvieną elementą. Kartotuvas arba skaitiklis prasidės nuo pirmojo indekso „Tesla“ ir baigsis paskutiniuoju „Audi“. Jis juda per masyvą ir spausdina po vieną elementą.

let cars = ["Tesla", "Ferrari", "Lamborghini", "Audi"]; for(let i = 0; i < cars.length; i++) { console.log(cars[i]); }

Išvestis:

Tesla Ferrari Lamborghini Audi

Pasinėrę į kodą, mes perduodame tris parinktis for loop

  • iteratoriaus kintamasis - let i = 0;
  • kur iteratorius turėtų sustoti - i < card.length
  • kiek padidinti kiekvienos kartos iteratorių - i++

Ši kilpa prasideda nuo mūsų 0, padidina kintamąjį po vieną kiekviena kilpa ir sustoja, kai pataikome į paskutinį masyvo elementą.

Pagrindinis tradicinio ciklo pranašumas yra tas, kad jūs turite didesnę kontrolę.

Norėdami išspręsti sudėtingą problemą, galite pasiekti įvairius masyvo elementus arba sudėtingai pasikartoti per masyvą. Pvz., Praleisti kiekvieną kitą masyvo elementą galima gana paprastai naudojant tradicinį ciklui.

Kiekvienas metodas

Kas yra „forEach“ metodas?

forEachMetodas yra naudojamas vykdyti funkciją kiekvienam savo masyvo elementą. Šis metodas yra puikus pasirinkimas, jei masyvo ilgis yra „nežinomas“ arba jis gali pasikeisti. Šis metodas gali būti naudojamas tik su masyvais, rinkiniais ir žemėlapiais.

const amounts = [65, 44, 12, 4]; let doubledAmounts = []; amounts.forEach(item => { doubledAmounts.push(item * 2); }) console.log(doubledAmounts);

Didžiausia forEachciklo nauda yra galimybė pasiekti kiekvieną elementą, net jei tikėtina, kad jūsų masyvas padidės. Tai yra keičiamo dydžio sprendimas daugeliui naudojimo atvejų ir yra lengviau skaitomas bei suprantamas nei tradicinis ciklo, nes žinome, kad kartosime kiekvieną elementą tiksliai vieną kartą.

Nors kilpa

Kas yra „loop“?

„Wikipedia“ apibrėžia „While Loop“ kaip:

„A while loop“ yra valdymo srauto sakinys, leidžiantis pakartotinai vykdyti kodą, atsižvelgiant į tam tikrą Bulio sąlygą. „ While“ kilpa gali būti laikoma besikartojančiu if teiginiu.

whileKilpa yra būdas vykdyti kodą pakartotinai patikrinti, ar sąlyga yra true arba false. Taigi, užuot naudoję „for loop“, naudodami įdėtą „if“ sakinį, galime naudoti „loop“. Arba, jei mes negalime rasti masyvo ilgio, o kilpos yra puikus pasirinkimas.

„While“ kilpą dažnai valdo skaitiklis. Žemiau pateiktame pavyzdyje parodome pagrindinį kartotinį kartojimą per masyvą. Svarbiausia yra kontroliuoti jūsų kuriamą „loop“.

Nors ciklo pavyzdys (geras):

let i = 0 while (i < 5) { console.log(i); i++; }

Išvestis :

0 1 2 3 4

„While loop“ sakinys i < 5, jei teiginys yra arba kalbamas garsiai, „i yra mažesnis nei 5“. Kintamasis ididinamas kiekvieną kartą, kai paleidžiama kilpa.

Paprasčiau tariant, tai reiškia, kad 1 prie kintamojo pridedama ikiekvieną kartą, kai ciklas atlieka visą iteraciją. Pirmojo kartojimo metu ilygi 0, o mes konsolėje atspausdiname „0“.

Didžiausia rizika naudoti „while loop“ yra parašyti sąlygą, kuri niekada nėra įvykdyta.

Tai dažnai įvyksta realaus pasaulio scenarijuose, kai kas nors parašo tam tikrą laiką, bet pamiršta išbandyti savo kilpą, o tai įveda begalinę kilpą į kodo bazę.

Begalinė kilpa įvyksta, kai sąlyga niekada neįvykdoma, ir kilpa tęsiasi amžinai. Tai dažnai lemia pralaužtus pokyčius, dėl kurių visa programinė įranga sugenda ir nebeveikia.

Įspėjimas: Nepaleiskite šio kodo.

Begalinės ciklo pavyzdys (blogas):

let i = 0 while (i < 5) { console.log(i); }

Išvestis:

Rezultatai gali skirtis.

„Daryk, kol kilpa“

Kas yra „do do loop“?

Vikipedija „Do-while“ ciklą apibrėžia kaip:

Do while loop“ yra valdymo srauto sakinys, kuris bent kartą vykdo kodo bloką, o po to pakartotinai vykdo bloką arba ne, atsižvelgiant į nurodytą loginę sąlygą bloko pabaigoje. “

„Do-while“ kilpa yra beveik identiška „while“ kilpai, tačiau yra vienas esminis skirtumas. „Do-while“ kilpa garantuos, kad visada įvykdys kodo bloką bent kartą prieš patikrinant „if“ teiginį.

Aš dažnai apie tai galvoju kaip apie atvirkštinį, o ciklas, ir beveik niekada jų nenaudoju. Tačiau jie praverčia kai kuriais labai specifiniais atvejais.

„Do-Loop“ pavyzdys (gerai):

let i = 0; do { console.log(i); i++; } while (i < 5);

Išvestis :

0 1 2 3 4

Didžiausia „do-loop“ naudojimo rizika yra sąlygos, kuri niekada neįvykdoma, rašymas. (Tas pats kaip su „Nors kilpa“.)

Įspėjimas: Nepaleiskite šio kodo.

Begalinės ciklo pavyzdys (blogas):

let i = 0; do { console.log(i); } while (i < 5);

Išvestis :

Rezultatai gali skirtis.

Norite pakelti „JavaScript“ žinias į kitą lygį? Sužinokite apie tai map, kas yra tas pats forEach, kas su premija !! ?

BONUS pavyzdys (kartojimas su žemėlapiu)

Kas yra žemėlapis?

Vikipedija žemėlapį apibrėžia kaip:

„Daugelyje programavimo kalbų žemėlapis yra aukštesnės eilės funkcijos pavadinimas, kuri taiko tam tikrą funkciją kiekvienam funkcijos elementui, pvz., Sąrašui, grąžindama rezultatų sąrašą ta pačia tvarka. Kai tai vertinama funkcine forma, ji dažnai vadinama „ taikoma visiems “.

How does it work? The map function in JavaScript applies a function to every element inside the array. Please take a moment to re-read that sentence.

Afterwards, the map function returns a new array with the results of applying a function to every element in the array.

Map example:

const array = [1, 1, 1, 1]; // pass a function to map const results = array.map(x => x * 2); console.log(results);

Output:

[2,2,2,2]

We have applied the map function to the array containing four 1's. The map function then multiplied each element by 2, i.e., x * 2, and returned a new array. The new array was then stored in the results variable.

By viewing our output, we can see this worked successfully. Every element in the array has been multiplied by 2. This method can be used as a replacement to a loop in some cases, and is incredibly powerful.

Išvada

Šauniai padirbėta! Sužinojote penkis skirtingus „Java“ masyvo kartojimo būdus. Tai yra pagrindiniai elementai, kurie padės jums sėkmingai atlikti „JavaScript“ programavimo kelionę.

Jūs taip pat susidūrėte su išplėstine koncepcija map, kuri dažnai naudojama didelio masto programinės įrangos programose.

Taigi, paliksiu jums tai: kaip jūs ketinate naudoti masyvus savo projektuose? Kuris iteracijos metodas jums pasirodė įdomiausias?  

Ačiū, kad skaitėte!

Jei jums patiko mano straipsnis, sekite mane ir (arba) atsiųskite man žinutę!  

„Twitter“ • Vidutinis • „Github“