JavaScript-sløjfer forklaret: For Loop, While Loop, Do ... While Loop og mere
Sløjfer bruges i JavaScript til at udføre gentagne opgaver baseret på en betingelse. Betingelser vender typisk tilbage true
eller false
når de analyseres. En loop fortsætter, indtil den definerede tilstand vender tilbage false
.
De tre mest almindelige typer af sløjfer er
- til
- mens
- gøre imens
Du kan skrive js for
, js while
eller js do while
for at få mere information om nogen af disse. Lad os se på dem og nogle variationer mere detaljeret nu.
til løkke
Syntaks
for ([initialization]); [condition]; [final-expression]) { // statement }
Javascript- for
erklæringen består af tre udtryk og en erklæring:
Beskrivelse
- initialisering - Kør inden den første udførelse på sløjfen. Dette udtryk bruges ofte til at oprette tællere. Variabler, der oprettes her, afgrænses til sløjfen. Når løkken er afsluttet, er den udført, de ødelægges.
- betingelse - Udtryk, der kontrolleres inden udførelsen af hver iteration. Hvis det udelades, evalueres dette udtryk til sandt. Hvis det evalueres til sandt, udføres sløjfens erklæring. Hvis det evalueres til falsk, stopper sløjfen.
- final-expression - Udtryk, der køres efter hver iteration. Normalt brugt til at øge en tæller. Men det kan også bruges til at mindske en tæller.
- sætning - Kode, der skal gentages i sløjfen
ethvert af disse tre udtryk eller udsagnet kan udelades. For sløjfer bruges ofte til at tælle et bestemt antal iterationer for at gentage en sætning. Brug en break
sætning til at afslutte sløjfen, før betingelsesudtrykket evalueres til falsk.
Almindelige faldgruber
Overskrider grænserne for en matrix
Ved indeksering over en matrix mange gange er det let at overskride arrayets grænser (f.eks. Prøv at henvise til det 4. element i et 3-element array).
// This will cause an error. // The bounds of the array will be exceeded. var arr = [ 1, 2, 3 ]; for (var i = 0; i <= arr.length; i++) { console.log(arr[i]); } output: 1 2 3 undefined
Der er to måder at rette denne kode på. Indstil betingelsen til enten i < arr.length
elleri <= arr.length - 1
Eksempler
Iterer gennem heltal fra 0-8
for (var i = 0; i < 9; i++) { console.log(i); } output: 0 1 2 3 4 5 6 7 8
Bryde ud af en løkke, før betingelsesudtryk er falsk
for (var elephant = 1; elephant < 10; elephant+=2) { if (elephant === 7) { break; } console.info('elephant is ' + elephant); } output: elephant is 1 elephant is 3 elephant is 5
til ... i løkke
Den for...in
opgørelse gentager de enumerable egenskaber af et objekt, i vilkårlig rækkefølge. For hver særskilt ejendom kan udsagn udføres.
for (variable in object) { ... }
Påkrævet / ValgfriParameterDescriptionRequiredVariableEt andet egenskabsnavn tildeles variablen på hver iteration.OptionalObjectObject, hvis utallige egenskaber gentages.
Eksempler
// Initialize object. a = { "a": "Athens", "b": "Belgrade", "c": "Cairo" } // Iterate over the properties. var s = "" for (var key in a) { s += key + ": " + a[key]; s += "
"; } document.write (s); // Output: // a: Athens // b: Belgrade // c: Cairo // Initialize the array. var arr = new Array("zero", "one", "two"); // Add a few expando properties to the array. arr["orange"] = "fruit"; arr["carrot"] = "vegetable"; // Iterate over the properties and elements. var s = ""; for (var key in arr) { s += key + ": " + arr[key]; s += "
"; } document.write (s); // Output: // 0: zero // 1: one // 2: two // orange: fruit // carrot: vegetable // Efficient way of getting an object's keys using an expression within the for-in loop's conditions var myObj = {a: 1, b: 2, c:3}, myKeys = [], i=0; for (myKeys[i++] in myObj); document.write(myKeys); //Output: // a // b // c
til ... af løkke
Den for...of
sætning skaber en løkke iteration løbet Iterable genstande (herunder Array, kort, Set, argumenter objekt og så videre), påberåber en brugerdefineret iteration krog med erklæringer, der skal udføres for værdien af hvert enkelt ejendom.
for (variable of object) { statement }
DescriptionvariablePå hver iteration tildeles variable.objectObject en værdi af en anden egenskab, hvis utallige egenskaber gentages.
Eksempler
Array
let arr = [ "fred", "tom", "bob" ]; for (let i of arr) { console.log(i); } // Output: // fred // tom // bob
Kort
var m = new Map(); m.set(1, "black"); m.set(2, "red"); for (var n of m) { console.log(n); } // Output: // 1,black // 2,red
Sæt
var s = new Set(); s.add(1); s.add("red"); for (var n of s) { console.log(n); } // Output: // 1 // red
Argumenter objekt
// your browser must support for..of loop // and let-scoped variables in for loops function displayArgumentsObject() { for (let n of arguments) { console.log(n); } } displayArgumentsObject(1, 'red'); // Output: // 1 // red
mens sløjfe
While-sløjfen starter med at evaluere tilstanden. Hvis betingelsen er sand, eksekveres erklæringen / erklæringerne. Hvis betingelsen er falsk, udføres erklæringen / erklæringerne ikke. Derefter, mens løkken slutter.
Here is the syntax for while loop:
Syntax:
while (condition) { statement(s); }
statement(s): A statement that is executed as long as the condition evaluates to true.
condition: Here, condition is a Boolean expression which is evaluated before each pass through the loop. If this condition evaluates to true, statement(s) is/are executed. When condition evaluates to false, execution continues with the statement after the while loop.
Example:
var i = 1; while (i < 10) { console.log(i); i++; // i=i+1 same thing } Output: 1 2 3 4 5 6 7 8 9
How to Iterate with JavaScript While Loops
While loops will run as long as the condition inside the ( ) is true. Example:
while(condition){ code... }
Hint 1:
Use a iterator variable such as i in your condition
var i = 0; while(i <= 4){ }
Spoiler Alert Solution Ahead!
Solution:
// Setup var myArray = []; // Only change code below this line. var i = 0; while (i <= 4){ myArray.push(i); i++; }
Do...while loop
The do...while
loop is closely related to while
loop. In the do while loop, the condition is checked at the end of the loop.
Here is the syntax for do...while
loop:
Syntax:
do { *Statement(s);* } while (*condition*);
statement(s): A statement that is executed at least once before the condition or Boolean expression is evaluated and is re-executed each time the condition evaluates to true.
condition: Here, a condition is a Boolean expression. If Boolean expression evaluates to true, the statement is executed again. When Boolean expression evaluates to false, the loops ends.
Example:
var i = 0; do { i = i + 1; console.log(i); } while (i < 5); Output: 1 2 3 4 5
How to Iterate with JavaScript Do…While Loops
Do...While
loops sørger for, at koden udføres mindst en gang, og hvis betingelsen inde i denwhile()
er sand , efter udførelsen, fortsætter den med løkken, ellers stopper den.
Opløsning:
var myArray = []; var i = 10; do { myArray.push(i); i++; } while(i <= 10);