Looping låter dig iterera genom varje objekt i en array så att du kan anpassa och mata ut var och en av dem som du vill. Som med alla programmeringsspråk är loopar också ett avgörande verktyg för att rendera arrays i JavaScript.
Med hjälp av några praktiska exempel, låt oss dyka djupare in i de olika sätten du kan använda loopar i JavaScript.
Den inkrementella och dekrementella för loop i JavaScript
Den inkrementella för loop är grunden för iteration i JavaScript.
Den antar ett initialt värde tilldelat en variabel och kör en enkel villkorlig längdkontroll. Sedan ökar eller minskar det värdet med hjälp av ++ eller — operatörer.
Så här ser den allmänna syntaxen ut:
for(var i = initial value; i < array.length; i++) {
array[i]}
Låt oss nu iterera genom en array med ovanstående bassyntax:
anArray = [1, 3, 5, 6];
for(let i = 0; i < anArray.length; i++) {
console.log(anArray[i])
}
Output:
1
3
5
6
Nu kommer vi att arbeta med varje objekt i ovanstående array med hjälp av JavaScript för slinga:
anArray = [1, 3, 5, 6];
for(let i = 0; i < anArray.length; i++) {
console.log("5", "x", anArray[i], "=", anArray[i] * 5)
}
Output:
5 x 1 = 5
5 x 3 = 15
5 x 5 = 25
5 x 6 = 30
Slingan itererar genom arrayen stegvis med ++ operatör, som producerar en beställd produktion.
Men att använda det negativa (—)-operatör kan du vända utmatningen.
Syntaxerna är desamma, men logiken skiljer sig lite från ovanstående inkrementerande loop.
Så här fungerar den dekrementella metoden:
anArray = [1, 3, 5, 6];
for(let i = anArray.length-1; i > = 0; i--) {
console.log("5", "x", anArray[i], "=", anArray[i]*5)
}
Output:
5 x 6 = 30
5 x 5 = 25
5 x 3 = 15
5 x 1 = 5
Logiken bakom koden ovan är inte långsökt. Arrayindexering börjar från noll. Så ringer anArray[i] itererar normalt från index noll till tre eftersom arrayen ovan innehåller fyra poster.
Att ta bort en från arraylängden och ställa in villkoret till större eller lika med noll som vi gjorde är därför ganska praktiskt – speciellt när du använder arrayen som grund för din iteration.
Det håller arrayindexet på ett mindre än dess längd. Skicket i >= 0 tvingar sedan räkningen att stanna vid det sista objektet i arrayen.
JavaScript för varje
Även om du inte kan minska med JavaScript för varje, det är ofta mindre utförligt än det råa för slinga. Det fungerar genom att välja ett objekt efter det andra utan att memorera det föregående.
Här är den allmänna syntaxen för JavaScript för varje:
array.forEach(element => {
action
})
Ta en titt på hur det fungerar i praktiken:
let anArray = [1, 3, 5, 6];
anArray.forEach(x => {
console.log(x)
});
Output:
1
3
5
6
Använd nu detta för att köra en enkel matematisk operation på varje objekt som du gjorde i föregående avsnitt:
let anArray = [1, 3, 5, 6];
anArray.forEach(x => {
console.log("5", "x", x, "=", x * 5)
});
Output:
5 x 1 = 5
5 x 3 = 15
5 x 5 = 25
5 x 6 = 30
Så här använder du for…in Loop of JavaScript
De för…in loop i JavaScript itererar genom en array och returnerar dess index.
Du kommer att tycka att det är lätt att använda för…in om du är bekant med Pythons for loop eftersom de är lika när det gäller enkelhet och logik.
Ta en titt på dess allmänna syntax:
for (let element in array){
action
}
Så den för…in loop tilldelar varje objekt i en array till variabeln (elementet) som deklareras inom parentes.
Att logga elementet direkt i slingan returnerar alltså ett arrayindex och inte själva objekten:
let anArray = [1, 3, 5, 6];
for (let i in anArray){
console.log(i)
}
Output:
1
2
3
För att mata ut varje objekt istället:
let anArray = [1, 3, 5, 6];
for (let i in anArray){
console.log(anArray[i])
}
Output:
1
3
5
6
Som du gjorde när du använde den dekrementella slingan, är det också lätt att vända utmatningen med för…in:
let anArray = [1, 3, 5, 6];
// Remove one from the length of the array and assign this to a variable:
let v = anArray.length - 1;
// Use the above variable as an index basis while iterating down the array:
for (let i in anArray){
console.log(anArray[v])
v -=1;
}
Output:
6
5
3
1
Ovanstående kod är logiskt lik vad du gjorde när du använde den dekrementella slingan. Den är dock mer läsbar och tydligare.
JavaScript för…of Loop
De för av loop liknar för…in slinga.
Dock till skillnad från för…in, det itererar inte genom arrayindexet utan själva objekten.
Dess allmänna syntax ser ut så här:
for (let i of array) {
action
}
Låt oss använda den här loopingmetoden för att iterera genom en array stegvis för att se hur det fungerar:
let anArray = [1, 3, 5, 6];
for (let i of anArray) {
console.log(i)
}
Output:
1
3
5
6
Du kan också använda den här metoden för att iterera ner arrayen och vända utdata. Det liknar hur du gör det med hjälp av för…in:
let anArray = [1, 3, 5, 6];
let v = anArray.length - 1;
for (let x of anArray) {
console.log(anArray[v])
v -=1;
}
Output:
6
5
3
1
För att arbeta inom slingan:
let anArray = [1, 3, 5, 6];
let v = anArray.length - 1;
for (let x of anArray) {
console.log("5", "x", anArray[v], "=", anArray[v] * 5)
v -=1;
}
Output:
5 x 6 = 30
5 x 5 = 25
5 x 3 = 15
5 x 1 = 5
The While Loop
De medan loop körs kontinuerligt så länge som ett specificerat villkor förblir sant. Det används ofta som en oändlig loop.
Till exempel, eftersom noll alltid är mindre än tio, körs koden nedan kontinuerligt:
let i = 0;
while (i < 10) {
console.log(4)
}
Ovanstående kod loggar “4” oändligt.
Låt oss iterera genom en array med hjälp av medan slinga:
let i = 0;
while (i < anArray.length) {
console.log(anArray[i])
i +=1
}
Output:
1
3
5
6
JavaScript gör … medan Loop
De göra medan loop accepterar och utför en uppsättning åtgärder explicit inuti en do syntax. Den anger sedan villkoret för denna åtgärd inuti medan slinga.
Så här ser det ut:
do{
actions
}
while (
consition
)
Låt oss nu iterera genom en array med denna loopingmetod:
do{
console.log(anArray[i])
i +=1
}
while (
i < anArray.length
)
Output:
1
3
5
6
Bekanta dig med JavaScript-loopar
Även om vi har lyft fram de olika JavaScript-loopingmetoderna här, kan du genom att behärska grunderna för iteration i programmering använda dem flexibelt och säkert i dina program. Som sagt, de flesta av dessa JavaScript-loopar fungerar på samma sätt, med bara några få skillnader i deras allmänna konturer och syntaxer.
Slingor är dock grunden för de flesta arrayrenderingar på klientsidan. Så känn free för att justera dessa loopingmetoder som du vill. Att använda dem med mer komplexa arrayer, till exempel, ger dig en bättre förståelse för JavaScript-loopar.
Om författaren
Idowu Omisola (124 artiklar publicerade)
Idowu brinner för allt smart teknik och produktivitet. I hans free tid, han leker med kodning och byter till schackbrädet när han har tråkigt, men han älskar också att bryta sig loss från rutinen då och då. Hans passion för att visa människor vägen runt modern teknik motiverar honom att skriva mer.
Mer från Idowu Omisola
Prenumerera på vårt nyhetsbrev
Gå med i vårt nyhetsbrev för tekniska tips, recensioner, free e-böcker och exklusiva erbjudanden!
Klicka här för att prenumerera
