Sådan bruges Loops i JavaScript

Looping giver dig mulighed for at iterere gennem hvert element i en matrix, så du kan tilpasse og output hver af dem, som du vil. Som med alle programmeringssprog er sløjfer også et afgørende værktøj til gengivelse af arrays i JavaScript.

Ved hjælp af nogle praktiske eksempler, lad os dykke dybere ned i de forskellige måder, du kan bruge loops i JavaScript.

The Incremental and Decremental for Loop i JavaScript

Det inkrementelle til loop er grundlaget for iteration i JavaScript.

Den antager en startværdi, der er tildelt en variabel, og kører en enkel betinget længdecheck. Derefter øges eller formindskes værdien ved hjælp af ++ eller -- operatører.

Sådan ser dens generelle syntaks ud:

for (var i = startværdi; i array [i]}

Lad os nu itereere gennem et array ved hjælp af ovenstående basissyntaks:

anArray = [1, 3, 5, 6];
for (lad i = 0; i console.log (anArray [i])
}
Produktion:
1
3
5
6 

Nu opererer vi hvert element i ovenstående array ved hjælp af JavaScript til loop:

anArray = [1, 3, 5, 6];
for (lad i = 0; i 





instagram viewer

console.log ("5", "x", anArray [i], "=", anArray [i] * 5)
}
Produktion:
5 x 1 = 5
5 x 3 = 15
5 x 5 = 25
5 x 6 = 30 

Sløjfen gentager gennem arrayet trinvist med ++ operatør, der producerer et bestilt output.

Men ved at bruge det negative (--) operatør, kan du vende output.

Syntakser er de samme, men logikken er en smule anderledes end den ovenstående stigningsløjfe.

Sådan fungerer den dekrementelle metode:

anArray = [1, 3, 5, 6];
for (lad i = anArray.length-1; i> = 0; i--) {
console.log ("5", "x", anArray [i], "=", anArray [i]*5)
}
Produktion:
5 x 6 = 30
5 x 5 = 25
5 x 3 = 15
5 x 1 = 5

Logikken bag koden ovenfor er ikke langt ude. Arrayindeksering starter fra nul. Så ringer anArray [i] normalt gentages fra indeks nul til tre, da ovenstående array indeholder fire elementer.

Således er det ret praktisk at fjerne en fra arraylængden og indstille betingelsen til større eller lig nul, som vi gjorde - især når du bruger arrayet som grundlag for din iteration.

Det holder arrayindekset på et mindre end dets længde. Betingelsen i> = 0 tvinger derefter tællingen til at stoppe på det sidste element i arrayet.

Relaterede: JavaScript Array -metoder, du bør mestre i dag

JavaScript til hver

Selvom du ikke kan reducere ved hjælp af JavaScript for hver, det er ofte mindre omfattende end det rå til sløjfe. Det fungerer ved at vælge det ene element efter det andet uden at huske det forrige.

Her er den generelle syntaks for JavaScript for hver:

array.forEach (element => {
handling
})

Se hvordan det fungerer i praksis:

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

Brug nu dette til at køre en simpel matematisk operation på hvert element, som du gjorde i det foregående afsnit:

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

Sådan bruges for... i Loop af JavaScript

Det for... i loop i JavaScript iterates gennem et array og returnerer dets indeks.

Du finder det let at bruge for... i hvis du kender til Python er til loop da de ligner hinanden med hensyn til enkelhed og logik.

Tag et kig på dens generelle syntaks:

for (lad element i array) {
handling 
}

Så for... i loop tildeler hvert element i en matrix variablen (element), der er angivet inden for parentes.

Således returnerer elementet direkte i sløjfen et matrixindeks og ikke elementerne selv:

lad anArray = [1, 3, 5, 6];
for (lad mig i et anray) {
console.log (i)
}
Produktion:
0
1
2
3 

Sådan udsendes hvert element i stedet:

lad anArray = [1, 3, 5, 6];
for (lad mig i et anray) {
console.log (anArray [i])
}
Produktion:
1
3
5
6 

Som du gjorde, da du brugte den trinvise sløjfe, er det også let at vende output ved hjælp af for... i:

lad anArray = [1, 3, 5, 6];
// Fjern en fra arrayets længde, og tildel denne til en variabel:
lad v = anArray.length - 1; 
// Brug ovenstående variabel som et indeksgrundlag, mens du gentager arrayet:
for (lad mig i et anray) {
console.log (anArray [v])
v -= 1;
}
Produktion:
6
5
3
1 

Ovenstående kode ligner logisk set det, du gjorde, mens du brugte den trinvise sløjfe. Det er dog mere læsbart og eksplicit skitseret.

JavaScript til... af Loop

Det for... af loop ligner for... i sløjfe.

Men i modsætning til for... i, det gentages ikke gennem array -indekset, men selve elementerne.

Dens generelle syntaks ser sådan ud:

for (lad mig i array) {
handling 
}

Lad os bruge denne looping -metode til at gentage et array trinvist for at se, hvordan det fungerer:

lad anArray = [1, 3, 5, 6];
for (lad i af enArray) {
console.log (i)
}
Produktion:
1
3
5
6 

Du kan også bruge denne metode til at gentage arrayet og vende output. Det ligner, hvordan du gør det ved hjælp af for... i:

lad anArray = [1, 3, 5, 6];
lad v = anArray.length - 1;
for (lad x af enArray) {
console.log (anArray [v])
v -= 1;
}
Produktion:
6
5
3
1

Sådan fungerer du inden for løkken:

lad anArray = [1, 3, 5, 6];
lad v = anArray.length - 1;
for (lad x af enArray) {
console.log ("5", "x", anArray [v], "=", anArray [v] * 5)
v -= 1;
}
Produktion:
5 x 6 = 30
5 x 5 = 25
5 x 3 = 15
5 x 1 = 5 

The While Loop

Det mens loop løber kontinuerligt, så længe en specificeret betingelse forbliver sand. Det bruges ofte som en uendelig loop.

Da nul f.eks. Altid er mindre end ti, kører nedenstående kode kontinuerligt:

lad i = 0;
mens (i <10) {
console.log (4)
}

Ovenstående kode logger "4" uendeligt.

Lad os itereere gennem en matrix ved hjælp af mens loop:

lad i = 0;
mens (i console.log (anArray [i])
i += 1
}
Produktion:
1
3
5
6 

JavaScript gør... mens Loop

Det gøre imens loop accepterer og udfører et sæt handlinger eksplicit inde i en gøre syntaks. Det angiver derefter betingelsen for denne handling inde i mens sløjfe.

Sådan ser det ud:

gør {
handlinger
}
mens (
konsition
)

Lad os nu itereere gennem et array ved hjælp af denne looping -metode:

gør {
console.log (anArray [i])
i += 1
}
mens (
i )
Produktion:
1
3
5
6 

Gør dig bekendt med JavaScript Loops

Selvom vi har fremhævet de forskellige JavaScript -looping -metoder her, kan du ved hjælp af det grundlæggende i iteration i programmering bruge dem fleksibelt og sikkert i dine programmer. Når det er sagt, fungerer de fleste af disse JavaScript -loops på samme måde, med kun et par forskelle i deres generelle omrids og syntakser.

Loops er imidlertid grundlaget for de fleste array-gengivelser på klientsiden. Så du er velkommen til at finjustere disse looping -metoder, som du vil. Brug af dem med mere komplekse arrays giver dig for eksempel en bedre forståelse af JavaScript -loops.

Sådan bruges JavaScript if-else-erklæringen

If-else-sætningen er dit første skridt i retning af at programmere logik i dine applikationer.

Læs Næste

Om forfatteren