JavaScript er blandt de mest brugte programmeringssprog. Udviklere, der har til hensigt at blive JavaScript-ingeniører, skal lære det grundlæggende i loops, deres typer og hvordan de fungerer.
En JavaScript-løkke er et værktøj, der bruges til at udføre gentagne opgaver baseret på en bestemt tilstand. På den anden side er ‘iterate’ et generisk udtryk, der betyder gentagelse i sammenhængen med løkken. En sløjfe vil fortsætte med at iterere, indtil en standsningsbetingelse er opfyldt.
For at forstå det bedre, kan du tænke på det som et computerspil, hvor du bliver bedt om at tage X skridt mod nord og derefter Y skridt til venstre.
Du kan repræsentere tage 7 skridt nordpå som;
for (let step = 0; step < 7; step++) {
// Runs 7 times, with values of steps 0 through 6.
console.log("Walking northwards one step");
}
når ovenstående kodeblok udføres, vil du have dette;
Indholdsfortegnelse
Hvorfor bruges løkker normalt?
- Udfør gentagne opgaver: Du kan bruge loops til at udføre instruktioner, indtil visse betingelser er opfyldt.
- Iterér over objekter eller arrays: Med loops kan du iterere over egenskaber for et objekt eller elementer i et array, så du kan udføre bestemte handlinger for hver egenskab eller element.
- Filtrer data: Du kan bruge en loop til at filtrere data baseret på specifikke forhold.
JavaScript-løkker findes i forskellige former; For, While, Do…While, For…of, og For…in. Lad os udforske dem i detaljer og demonstrere, hvordan hver enkelt fungerer.
Til sløjfe
En for-løkke gentages, indtil en specificeret betingelse evalueres til sand. En for-løkke har tre valgfrie udtryk, efterfulgt af en kodeblok.
for (initialization; condition; finalExpression) {
// code
}
- Initialiseringsudtrykket kommer før den første løkke udføres. Dette udtryk initialiserer normalt en eller flere tællere.
- Et betingelsesudtryk kontrolleres hver gang, før for-løkken kører. Koden i løkken eller sætningen udføres hver gang udtrykket evalueres til sandt. På den anden side stopper løkken, når udtrykket evalueres til falsk. Men hvis udtrykket udelades, vil udtrykket automatisk evalueres til sandt.
- FinalExpression udføres efter hver loop iteration. Udtrykket bruges mest til at øge en tæller.
Du kan bruge {}, blok sætning, til at gruppere og udføre flere sætninger. Hvis du vil afslutte løkken tidligt, før betingelsesudtrykket evalueres til falsk, skal du bruge break-sætningen.
Eksempler på for loops med kode
for (let i = 0; i < 7; i++) {
console.log(i);
}
I denne kodeblok;
- Variablen i initialiseres til nul (lad i=0).
- Betingelsen er, at i skal være mindre end 7 (i=7).
- Sløjfen vil gentagne gange iterere, hvis værdien af i er mindre end 7 (i<7>.
- Iterationen vil tilføje 1 til værdien af i efter hver iteration (++1).
for (let i = 1; i < 11; i += 2) {
if (i === 9) {
break;
}
console.log('Total developers: ' + i);
}
- Kodeblokken itererer fra 1 til 10 (i<11).
- Sløjfen initialiserer en variabel i med en værdi på 1 (lad i = 1).
- Sløjfebetingelsen vil fortsætte med at udføre, hvis værdien af i er mindre end 11 (i < 11).
- Værdien af i øges med 2 efter hver iteration (i += 2).
If-sætningen evaluerer, om værdien af i=9. Hvis betingelsen er sand, udføres break-sætningen, og løkken afsluttes.
(billede)
For … af loop
For…of-løkken itererer over iterable objekter såsom Map, Array, Arguments og Set. Denne løkke påkalder en tilpasset iterationshook med sætninger, der udføres for værdien af hver enkelt egenskab.
Den grundlæggende struktur for en for…løkke er;
for (variable of object) statement
Eksempler på for…of loop in action
const frontendLanguages = [ "HTML", "CSS", "JavaScript" , “React”];
for (let i of frontendLanguages) {
console.log(i);
}
I denne kode;
- Vi definerer et array ved navn frontendLanguages
- Arrayet har tre elementer; “HTML”, “CSS”, “JavaScript” og “React”.
- For…of-løkken itererer over hvert element i frontendLanguages.
- I’et i kodeblokken optager værdien af hvert element under hver iteration og værdierne udskrevet på konsollen.
const s = new Set();
s.add(2);
s.add("grey");
for (let n of s) {
console.log(n);
}
I denne kodeblok;
- Vi erklærer en variabel s, som vi tildeler til et nyt sæt ved hjælp af Set()-konstruktøren.
- To elementer tilføjes til koden ved hjælp af add() metoden
- For….af iterationer over elementobjektet.
- Sløjfen tildeler det aktuelle element til n før udførelse af console.log(n)-sætning.
const m = new Map();
m.set(4, "rabbit");
m.set(6, "monkey");
m.set(8, "elephant");
m.set(10, "lion");
m.set(12, "leopard");
for (let n of m) {
console.log(n);
}
I denne kodeblok;
- Vi bruger Map() constructor til at oprette et nyt kortobjekt.
- En variabel m er deklareret.
- Ved at bruge .set()-metoden tilføjer vi fem nøgleværdi-par.
- A for…of loop itererer over elementer af kortobjekt m.
For … i loop
En for…in loop bruges til at iterere over et objekts egenskaber. Den grundlæggende struktur af en for…in loop er;
for (property in object) {
// code
}
Du kan bruge for…in loop til at iterere over arrays og array-lignende objekter.
const shoppingList = { kales: 4, tomatoes: 2, cabbage: 0, lettuce:6, pumpkin:5 };
for (const vegetable in shoppingList) {
console.log(vegetable);
}
I denne kodeblok;
- Vi introducerer et JavaScript-objekt og kalder det shoppingList.
- Vi bruger for loop til at iterere over hver egenskab på indkøbslisten ved hjælp af in-operatoren.
- I hver iteration tildeler løkken det aktuelle egenskabsnavn i indkøbslisten.
Mens
While-løkken evaluerer en betingelse, hvis den finder, at den er sand, udføres kodeblokken. Men hvis betingelsen er falsk, slutter løkken, og kodeblokken vil ikke blive udført.
Dette er den grundlæggende struktur i en while-løkke;
while (condition) Statement
Testbetingelsen skal forekomme før udførelsen af sætningen i løkken. Du kan udføre flere sætninger ved hjælp af {} eller blok sætninger.
Eksempel på while-løkke i aktion
let n = 0;
while (n < 9) {
console.log(n);
n++;
}
I denne kode;
- En variabel n initialiseres med en nulværdi (lad n=0).
- Sløjfen vil køre, så længe værdien af n er mindre end 9 (n<9)
- Værdien af n vises på konsollen og øges med 1 efter hver iteration (n++)
- Koden stopper med at køre ved 8.
Gør … Mens Loop
En do…while loop itererer, indtil en specifik tilstand evalueres til falsk.
Den generelle struktur af en do…while-erklæring er;
do statement while (condition);
Udtalelsen udføres én gang, men før tilstanden kontrolleres. Udsagnet udføres, hvis betingelsen er sand. Men hvis den evaluerede betingelse er falsk, vil eksekveringen stoppe, og kontrollen overføres til sætningen efter do..while. Kode i en do…while loop er garanteret at køre mindst én gang, selvom betingelsen evalueres til sand.
Eksempel på gør…mens
let n = 0;
do {
n += 1;
console.log(n);
} while (n < 7);
I denne kode;
- Vi introducerer en variabel n og sætter dens begyndelsesværdi til 0 (lad n=0).
- Vores variabel n går ind i en do…while-løkke, hvor dens værdi øges med 1 efter hver iteration (n+=1)
- Værdien af n logges.
- Sløjfen vil fortsætte med at udføre, så længe værdien af n er mindre end 7 (n<7).
Når du kører denne kode, vil konsollen vise værdier på n startende fra 1 til 7, da løkken udføres 7 gange.
Indlejret løkke
En indlejret løkke er en situation, hvor vi har en løkke inde i en løkke. For eksempel kan vi have en for-løkke indlejret i en anden for-løkke.
for (let outer = 0; outer < 5; outer += 2) {
for (let inner = 0; inner < 6; inner += 2) {
console.log(`${outer}-${inner}`);
}
}
- Der er to variable; ydre og indre og begge initialiseres med værdien nul.
- Begge variabler øges med 2 efter hver iteration
- De ydre og indre løkker gentages tre gange hver.
Sløjfekontrolerklæringer
Loop control statements, nogle gange kendt som “jump statements”, afbryder det normale flow af et program. Break and continue er eksempler på sløjfekontroludsagn.
Bryd udtalelser
Break-udsagn afslutter en løkke med det samme, selvom betingelsen ikke er opfyldt.
for (let n = 1; n <= 26; n++) {
if (n === 13) {
console.log("Loop stops here. We have reached the break statement");
break;
}
console.log(n);
}
Den gengivne kode vil fremstå som;
Fortsæt udsagn
Continue-sætninger bruges til at springe en bestemt kodeblok over og udføre iteration for den nye løkke.
for (let n = 0; n <= 10; n++) {
if (n === 5) {
continue;
}
console.log(n);
}
Den gengivne kode vil fremstå som;
Konklusion
Ovenfor er de almindelige loops, du vil støde på i vanilla JavaScript og dets rammer/biblioteker. Som fremhævet har hver sløjfetype sit brugstilfælde og forskellige adfærd. Hvis du vælger den forkerte sløjfetype, vil du sandsynligvis have fejl, og din kode vil sandsynligvis vise uventet adfærd.
Hvis du har at gøre med en JavaScript-ramme eller et bibliotek, skal du altid tjekke dokumentationen og bruge de indbyggede sløjfer.