Kā lietot cilpas JavaScript

Looping ļauj atkārtot katru masīva vienumu, lai jūs varētu pielāgot un izvadīt katru no tiem, kā vēlaties. Tāpat kā jebkura programmēšanas valoda, cilpas ir būtisks rīks masīvu atveidošanai arī JavaScript.

Izmantojot dažus praktiskus piemērus, iedziļināsimies dažādos veidos, kā varat izmantot cilpas JavaScript.

Cikla pieaugums un samazinājums JavaScript

Pieaugums priekš cilpa ir JavaScript atkārtojuma pamats.

Tā pieņem sākotnējo vērtību, kas piešķirta mainīgajam, un veic vienkāršu nosacītā garuma pārbaudi. Tad tas palielina vai samazina šo vērtību, izmantojot ++ vai -- operatoriem.

Tā vispārējā sintakse izskatās šādi:

par (var i = sākotnējā vērtība; i masīvs [i]}

Tagad atkārtosim masīvu, izmantojot iepriekš minēto bāzes sintaksi:

masīvs = [1, 3, 5, 6];
par (lai i = 0; i console.log (anArray [i])
}
Izeja:
1
3
5
6 

Tagad mēs strādāsim ar katru vienumu iepriekš minētajā masīvā, izmantojot JavaScript priekš cilpa:

masīvs = [1, 3, 5, 6];
par (lai i = 0; i console.log ("5", "x", anArray [i], "=", anArray [i] * 5)
}
Izeja:
5 x 1 = 5
5 x 3 = 15
5 x 5 = 25
5 x 6 = 30 

Cilpa pakāpeniski atkārto masīvu ar ++ operators, kas ražo pasūtītu produkciju.

Bet izmantojot negatīvo (--) operators, jūs varat mainīt izvadi.

Sintakse ir tāda pati, taču loģika nedaudz atšķiras no iepriekš minētās pieaugošās cilpas.

Lūk, kā darbojas samazināšanas metode:

masīvs = [1, 3, 5, 6];
par (lai i = anArray.length-1; i> = 0; es-) {
console.log ("5", "x", anArray [i], "=", anArray [i]*5)
}
Izeja:
5 x 6 = 30
5 x 5 = 25
5 x 3 = 15
5 x 1 = 5

Iepriekš minētā koda loģika nav tālejoša. Masīvu indeksēšana sākas no nulles. Tātad zvanot anArray [i] parasti atkārtojas no indeksa nulles līdz trim, jo ​​iepriekšminētais masīvs satur četrus vienumus.

Tādējādi noņemt vienu no masīva garuma un nosacījuma iestatīšanu uz lielāku vai vienādu nulli, kā mēs to darījām, ir diezgan ērti - it īpaši, ja masīvu izmantojat kā atkārtojuma pamatu.

Tas saglabā masīva indeksu par vienu mazāk nekā tā garums. Nosacījums i> = 0 tad liek skaitītājam apstāties pie pēdējā masīva vienuma.

Saistīts: JavaScript masīva metodes, kuras jums vajadzētu apgūt jau šodien

JavaScript katram

Lai gan jūs nevarat samazināt, izmantojot JavaScript katram, tas bieži vien ir mazāk izsmeļošs nekā neapstrādāts priekš cilpa. Tas darbojas, izvēloties vienu vienumu pēc otra, neiegaumējot iepriekšējo.

Šeit ir JavaScript vispārējā sintakse katram:

array.forEach (elements => {
darbība
})

Apskatiet, kā tas darbojas praksē:

lai anArray = [1, 3, 5, 6];
anArray.forEach (x => {
console.log (x)
});
Izeja:
1
3
5
6 

Tagad izmantojiet to, lai katram vienumam veiktu vienkāršu matemātisku darbību, kā to darījāt iepriekšējā sadaļā:

lai anArray = [1, 3, 5, 6];
anArray.forEach (x => {
console.log ("5", "x", x, "=", x * 5)
});
Izeja:
5 x 1 = 5
5 x 3 = 15
5 x 5 = 25
5 x 6 = 30 

Kā lietot... ... JavaScript cilpā

The par... in cilpa JavaScript atkārto masīvu un atgriež tā indeksu.

Jūs to atradīsit viegli lietojams par... in ja esat pazīstams ar Python ir paredzēts cilpai jo tie ir līdzīgi pēc vienkāršības un loģikas.

Apskatiet tā vispārējo sintaksi:

par (let elements masīvā) {
darbība 
}

Tātad par... in cilpa piešķir katram masīva vienumam iekavās deklarēto mainīgo (elementu).

Tādējādi, reģistrējot elementu tieši cilpā, tiek atgriezts masīva indekss, nevis paši vienumi:

lai anArray = [1, 3, 5, 6];
par (let i inArray) {
console.log (i)
}
Izeja:
0
1
2
3 

Lai izvadītu katru vienumu:

lai anArray = [1, 3, 5, 6];
par (let i inArray) {
console.log (anArray [i])
}
Izeja:
1
3
5
6 

Tāpat kā jūs, lietojot samazinājuma cilpu, arī ir viegli mainīt izvadi, izmantojot par... in:

lai anArray = [1, 3, 5, 6];
// Noņemiet vienu no masīva garuma un piešķiriet to mainīgajam:
lai v = anArray.length - 1; 
// Izmantojiet iepriekš minēto mainīgo kā indeksa pamatu, atkārtojot masīvu:
par (let i inArray) {
console.log (anArray [v])
v -= 1;
}
Izeja:
6
5
3
1 

Iepriekš minētais kods ir loģiski līdzīgs tam, ko jūs darījāt, izmantojot samazinājuma cilpu. Tomēr tas ir vieglāk lasāms un skaidri izklāstīts.

JavaScript for... of Loop

The par... no cilpa ir līdzīga par... in cilpa.

Tomēr atšķirībā no par... in, tas neatkārtojas, izmantojot masīva indeksu, bet gan vienumus.

Tās vispārējā sintakse izskatās šādi:

par (ļaujiet i masīvam) {
darbība 
}

Izmantosim šo cilpas metodi, lai pakāpeniski atkārtotu masīvu, lai redzētu, kā tas darbojas:

lai anArray = [1, 3, 5, 6];
par (let i of anArray) {
console.log (i)
}
Izeja:
1
3
5
6 

Varat arī izmantot šo metodi, lai atkārtotu masīvu un mainītu izvadi. Tas ir līdzīgi tam, kā jūs to darāt, izmantojot par... in:

lai anArray = [1, 3, 5, 6];
lai v = anArray.length - 1;
par (lai x no anArray) {
console.log (anArray [v])
v -= 1;
}
Izeja:
6
5
3
1

Lai darbotos cilpas ietvaros:

lai anArray = [1, 3, 5, 6];
lai v = anArray.length - 1;
par (lai x no anArray) {
console.log ("5", "x", anArray [v], "=", anArray [v] * 5)
v -= 1;
}
Izeja:
5 x 6 = 30
5 x 5 = 25
5 x 3 = 15
5 x 1 = 5 

Kamēr cilpa

The kamēr cilpa darbojas nepārtraukti, kamēr pastāv kāds noteikts nosacījums. To bieži izmanto kā bezgalīgu cilpu.

Piemēram, tā kā nulle vienmēr ir mazāka par desmit, tālāk norādītais kods darbojas nepārtraukti:

ļaujiet i = 0;
kamēr (i <10) {
console.log (4)
}

Iepriekš minētais kods reģistrē "4" bezgalīgi.

Atkārtosim masīvu, izmantojot kamēr cilpa:

ļaujiet i = 0;
kamēr (i console.log (anArray [i])
i += 1
}
Izeja:
1
3
5
6 

JavaScript do... kamēr Loop

The darīt kamēr cilpa akceptē un izpilda darbību kopu tieši a darīt sintakse. Pēc tam tajā ir norādīts šīs darbības nosacījums kamēr cilpa.

Lūk, kā tas izskatās:

darīt {
darbības
}
kamēr (
vienprātība
)

Tagad atkārtosim masīvu, izmantojot šo cilpas metodi:

darīt {
console.log (anArray [i])
i += 1
}
kamēr (
i )
Izeja:
1
3
5
6 

Iepazīstieties ar JavaScript cilpām

Lai gan mēs šeit esam uzsvēruši dažādas JavaScript cilpu veidošanas metodes, apgūstot iterācijas pamatus programmēšanā, varat tās elastīgi un pārliecinoši izmantot savās programmās. Tomēr lielākā daļa no šīm JavaScript cilpām darbojas vienādi, un to vispārējā kontūra un sintakse ir tikai dažas atšķirības.

Cilpas tomēr ir pamatā lielākajai daļai klienta puses masīvu renderēšanas. Tāpēc jūtieties brīvi pielāgot šīs cilpu veidošanas metodes, kā vēlaties. Piemēram, to izmantošana kopā ar sarežģītākiem masīviem ļauj labāk izprast JavaScript cilpas.

Kā izmantot JavaScript paziņojumu, ja citādi

Ja citāds paziņojums ir jūsu pirmais solis ceļā uz programmēšanas loģiku savās lietojumprogrammās.

Lasīt Tālāk

Par autoru