Hvordan bruke Loops i JavaScript

Looping lar deg gjennomgå hvert element i en matrise, slik at du kan tilpasse og sende ut hvert av dem som du vil. Som med alle programmeringsspråk er sløyfer også et avgjørende verktøy for gjengivelse av matriser i JavaScript.

Ved hjelp av noen praktiske eksempler, la oss dykke dypere inn på de forskjellige måtene du kan bruke sløyfer i JavaScript.

The Incremental and Decremental for Loop i JavaScript

Det inkrementelle til loop er grunnlaget for iterasjon i JavaScript.

Den forutsetter en startverdi som er tilordnet en variabel og kjører en enkel betinget lengdekontroll. Deretter øker eller reduserer den verdien ved å bruke ++ eller -- operatører.

Slik ser den generelle syntaksen ut:

for (var i = startverdi; i matrise [i]}

La oss nå iterere gjennom en matrise ved hjelp av basissyntaksen ovenfor:

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

Nå skal vi operere hvert element i ovenstående matrise ved hjelp av JavaScript til Løkke:

anArray = [1, 3, 5, 6];





instagram viewer


for (la i = 0; i console.log ("5", "x", anArray [i], "=", anArray [i] * 5)
}
Produksjon:
5 x 1 = 5
5 x 3 = 15
5 x 5 = 25
5 x 6 = 30 

Sløyfen itererer gjennom matrisen trinnvis med ++ operatør, som produserer en bestilt utgang.

Men ved å bruke det negative (--) -operatøren, kan du reversere utgangen.

Syntakser er de samme, men logikken er litt annerledes enn den økte sløyfen ovenfor.

Slik fungerer den dekrementelle metoden:

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

Logikken bak koden ovenfor er ikke langt hentet. Arrayindeksering starter fra null. Så ringer anArray [i] normalt går det fra indeks null til tre ettersom matrisen ovenfor inneholder fire elementer.

Dermed er det ganske praktisk å fjerne en fra matriselengden og sette tilstanden til større eller lik null som vi gjorde - spesielt når du bruker matrisen som grunnlag for din iterasjon.

Den holder matrisindeksen på en mindre enn lengden. Tilstanden i> = 0 tvinger deretter tellingen til å stoppe på det siste elementet i matrisen.

I slekt: JavaScript Array -metoder du bør mestre i dag

JavaScript for hver

Selv om du ikke kan redusere ved hjelp av JavaScript for hver, det er ofte mindre omfattende enn det rå til Løkke. Det fungerer ved å velge det ene elementet etter det andre uten å huske det forrige.

Her er den generelle syntaksen til JavaScript for hver:

array.forEach (element => {
handling
})

Ta en titt på hvordan det fungerer i praksis:

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

Bruk dette nå til å kjøre en enkel matematisk operasjon på hvert element som du gjorde i forrige seksjon:

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

Slik bruker du for... i Loop av JavaScript

De for i loop i JavaScript iterates gjennom en matrise og returnerer indeksen.

Du finner det enkelt å bruke for i hvis du er kjent med Python er for loop som de er like når det gjelder enkelhet og logikk.

Ta en titt på den generelle syntaksen:

for (la element i matrise) {
handling 
}

Så for i loop tilordner hvert element i en matrise variabelen (elementet) som er deklarert i parentes.

Dermed returnerer logging av elementet direkte i løkken en matrisindeks og ikke elementene selv:

la anArray = [1, 3, 5, 6];
for (la meg i en matrise) {
console.log (i)
}
Produksjon:
0
1
2
3 

Slik sender du ut hvert element i stedet:

la anArray = [1, 3, 5, 6];
for (la meg i en matrise) {
console.log (anArray [i])
}
Produksjon:
1
3
5
6 

Som du gjorde da du brukte den gradvise sløyfen, er det også enkelt å reversere utdataene ved hjelp av for i:

la anArray = [1, 3, 5, 6];
// Fjern en fra lengden på matrisen og tilordne denne til en variabel:
la v = anArray.length - 1; 
// Bruk variabelen ovenfor som et indeksgrunnlag mens du gjentar matrisen:
for (la meg i en matrise) {
console.log (anArray [v])
v -= 1;
}
Produksjon:
6
5
3
1 

Koden ovenfor ligner logisk sett på det du gjorde mens du brukte dekrementelle løkkene. Det er mer lesbart og eksplisitt skissert, skjønt.

JavaScript for... av Loop

De for... av loop er lik den for i Løkke.

Imidlertid, i motsetning til for i, den gjentar seg ikke gjennom matrisindeksen, men elementene selv.

Den generelle syntaksen ser slik ut:

for (la meg av array) {
handling 
}

La oss bruke denne looping -metoden for å iterere gjennom en matrise trinnvis for å se hvordan det fungerer:

la anArray = [1, 3, 5, 6];
for (la meg av anArray) {
console.log (i)
}
Produksjon:
1
3
5
6 

Du kan også bruke denne metoden til å iterere nedover matrisen og reversere utdataene. Det ligner på hvordan du gjør det ved å bruke for i:

la anArray = [1, 3, 5, 6];
la v = anArray.length - 1;
for (la x av en matrise) {
console.log (anArray [v])
v -= 1;
}
Produksjon:
6
5
3
1

Slik opererer du i løkken:

la anArray = [1, 3, 5, 6];
la v = anArray.length - 1;
for (la x av en matrise) {
console.log ("5", "x", anArray [v], "=", anArray [v] * 5)
v -= 1;
}
Produksjon:
5 x 6 = 30
5 x 5 = 25
5 x 3 = 15
5 x 1 = 5 

Mens løkken

De samtidig som loop løper kontinuerlig så lenge en spesifisert betingelse forblir sann. Den brukes ofte som en uendelig sløyfe.

For eksempel, siden null alltid er mindre enn ti, kjører koden nedenfor kontinuerlig:

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

Koden ovenfor logger "4" uendelig.

La oss iterere gjennom en matrise ved hjelp av samtidig som Løkke:

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

JavaScript gjør... mens Loop

De gjør mens loop godtar og utfører et sett med handlinger eksplisitt inne i en gjøre syntaks. Den angir deretter betingelsen for denne handlingen inne i samtidig som Løkke.

Slik ser det ut:

gjøre{
handlinger
}
samtidig som (
konsisjon
)

La oss nå iterere gjennom en matrise ved hjelp av denne looping -metoden:

gjøre{
console.log (anArray [i])
jeg += 1
}
samtidig som (
i )
Produksjon:
1
3
5
6 

Gjør deg kjent med JavaScript -sløyfer

Selv om vi har fremhevet de forskjellige JavaScript -looping -metodene her, kan du mestre det grunnleggende om iterasjon i programmering og bruke dem fleksibelt og trygt i programmene dine. Når det er sagt, fungerer de fleste av disse JavaScript -løkkene på samme måte, med bare noen få forskjeller i deres generelle disposisjon og syntaks.

Looper er imidlertid grunnlaget for de fleste matrisegjengivelser på klientsiden. Så vær så snill å finjustere disse looping -metodene som du vil. Å bruke dem med mer komplekse matriser, for eksempel, gir deg en bedre forståelse av JavaScript -looper.

Slik bruker du JavaScript if-else-erklæringen

If-else-setningen er ditt første skritt mot programmering av logikk i applikasjonene dine.

Les neste

Om forfatteren